5 Replies Latest reply: Dec 3, 2013 7:58 PM by scott.wesley RSS

    CSS settings in responsive theme 25 - fixed enkitec navbar menu

    scott.wesley

      Hi,

       

      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:

      http://apex.oracle.com/pls/apex/f?p=79767:2

      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

      ...
      #FORM_OPEN#
      <header id="uHeader">
          #REGION_POSITION_07#
      </header>
      

       

      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 {
        margin-top:50px;
      }
      

      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?

       

      Cheers,

      Scott