Home>Support>Making transparent glassy header?

Making transparent glassy header?

By xerfilstyx, 8 years ago. Last reply by xerfilstyx, 8 years ago.

This is my site under construction with vantage free theme – http://sosotura.rf.gd/

Current Front Page:

and I wanna remove the space of white header for making body content visible under transparent sticky menu like this:

I already know that using (multiple) #masthead background url CSS code can make it similarly but I HATE to assign all of

header imgs per pages with CSS. And this trick doesn’t help if using siteorigin’s widget like sliderbar, etc.

Thanks for your support and really sorry for poor English.

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 10 days ago xerfilstyx

    I’ve managed to resolve the issued with my humble css – the main problem is that siteorigin’s main menu mechanism. They set the main menu’s display position to relative when no-scrolling(entering site), and set this to fixed when scrolling.

    What I’ve done:

    /* make transparent menu */#masthead .main-navigation {	position: fixed;	left: 35px;	right: 35px;	z-index: 998;}

    —-> Change *original(non-scrolling) main menu* position from relative to fixed, hence the whole main menus will be positioned as fixed.

    #masthead div#sticky-container {	position: relative !important;}

    —-> Because of former css, all positions under #masthead .main-navigation will be fixed. But this makes *scrolling main menu* dyfunctional as #sticky-container should be relative. So I did.

    /* remove sticky-container height */#masthead div#sticky-container {	height: 0px !important;}

    —-> As stated, remove sticky-container height. This is also needed because of vantage menu’s mechanism. Without it, when scrolling down the white space will show up under transparent menu :S

    /* main menu transparent @ home, single post, specific pages with img header ONLY */.home #masthead .main-navigation, #search-icon #search-icon-icon,.single-post #masthead .main-navigation, #search-icon #search-icon-icon,.page-id-20 #masthead .main-navigation, #search-icon #search-icon-icon {	background-color: transparent;	}

    —-> Make transparent menu for specific pages. I’ve set this to home, single-posts, and some specific pages like page-id-xx.

    the result of transparent header :D

    http://sosotura.rf.gd/competencies/catalogue

    I’ve used Hero Widget as background header imgs.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More