Archived topic

Transparent header and navigation overlapping image

5 replies · Started by Are Martin on November 14, 2015

Viewing posts 1–6 of 6

November 14, 2015 at 3:19 pm #153094

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

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?

November 14, 2015 at 10:14 pm #153148

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 :)

November 15, 2015 at 11:44 am #153264

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....

November 15, 2015 at 9:29 pm #153343

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

November 16, 2015 at 1:59 am #153391

That worked! Nice! :)

Thanks for a brilliant theme!

November 16, 2015 at 10:37 am #153492

Thanks for using it! :)

This archived topic is closed to new replies.

Start building better websites today.