[Resolved] Transparent header and navigation overlapping image

[Are Martin]

I was looking trough other generatepress user sites when I came across this site

http://designismylife.com/

It looks like he is using the sections add-on here for the page layout, but how does he achieve the effect where the transparent header is overlapping the page-header-image?

[Tom]

Hi there,

He set the header position to absolute and gave it a semi-transparent background color.

.site-header {
    background-color: rgba(0, 0, 0, 0.5);
    background-image: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
}

Looks awesome 🙂

[Are Martin]

Thanks! 🙂 Agree! This looks great!

What css selectors would i use to target the main navigation and current menu item when navigation is set to “float right” inside the header in order to make this semi-transparent as well?

I tried using firebug but I can´t figure it out….

[Tom]

If you’re using Generate Colors you should just be able to delete those color values and the items will be transparent.

[Are Martin]

That worked! Nice! 🙂

Thanks for a brilliant theme!

[Tom]

Thanks for using it! 🙂

[Author]

Posts