Tranparent header

vaughanmatt

I would like to use the Transparent header as see here ([Links visible only for registered users]) but I would like to have the action bar use a black background and would like to add some opacity to the navigation header so that it is easier to see on top of the image. Can you help me with this? 

cspiro

I used/placed this code in the BeTheme > Custom CSS section

#Action_bar {
  background: rgba(0, 0, 0, 0.7);
}

#Action_bar .contact_details li {
  color: rgba(255, 255, 255, 0.8);
}

vaughanmatt

That works great. Thanks! What if I want the header to only be transparent on the home page? Is that possible?

cspiro

I haven't tried anything out for it to only show on the home page. Not sure if that is possible...

Albert

@vaughanmatt Would be great if you can sort your website first because we can not open it. The site keeps loading and nothing happen.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

vaughanmatt

Hi - it is opening up just fine --> [Links visible only for registered users] 

Albert

@vaughanmatt Yes, now it works. Looks like the problem was with your host then. So, to make Top Bar solid background on all pages except home, you need to use the following css:

#Top_bar:not(.home) { background: #000 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

vaughanmatt

Thank You! 

If we choose to not use the action bar, how can we push the navigation to the top of the page instead of having a space like there is currently above the logo and navigation? 

Albert

To move header up, you must use:

.header-transparent.ab-hide #Top_bar { top: 0 !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next