Tranparent header

vaughanmatt · March 2016

I would like to use the Transparent header as see here (http://www.christopherashaw.com/) 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 · March 2016

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 · March 2016

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

cspiro · March 2016

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

Albert · March 2016

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

vaughanmatt · March 2016

Hi - it is opening up just fine --> http://www.christopherashaw.com/

Albert · March 2016

@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; }

vaughanmatt · March 2016

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 · March 2016

To move header up, you must use:

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

Tranparent header

Comments