This discussion is archived
5 Replies Latest reply: Dec 3, 2013 5:58 PM by scott.wesley RSS

CSS settings in responsive theme 25 - fixed enkitec navbar menu

scott.wesley Guru
Currently Being Moderated

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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points