5 Replies Latest reply on Dec 4, 2013 1:58 AM by Scott Wesley

    CSS settings in responsive theme 25 - fixed enkitec navbar menu

    Scott Wesley



      I've modified the page template in theme 25 to just show the enkitec navbar in lieu of tabs/logos etc.

      I've set it up so the menu is fixed at the top of the page as you scroll down:


      The issue arises when multiple regions over multiple columns are displayed - regions start staggering:

      Form on EMP

      This is due to the CSS I've applied to provide a gap between the top of the page and the rest of the content - a gap for the fixed menu to live.

      I just can't work out what CSS to use to make the layout consistent.


      Changes to the template are:


      Clear template header from form_open to just have region 07 in the header tag

      <header id="uHeader">


      Inline CSS to set navigation bar to be fixed position across the top

      .navbar {
        position: fixed;
        width: 100%;


      This next part causes issue.

      .apex_span_12, .apex_span_10,.apex_span_2 {

      When pages start using multiple columns, the grid utilises div classes such as apex_span_10 multiple times, hence region layout gets staggered with multiple margin:50px


      Placing the margin on components such as #uBodyContainer or #uHeader will just drop everything down.


      Any suggestions from CSS gurus?