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



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?





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