Making header on vast home template see through

[Martyn]

Hello all, 

I have been attempting to change the header on my new websites pages to reveal the image behind it, this is the site: http://publicsafety-com-au-6499018.hs-sites.com/

I attempted to change the opacity using the code here 

background-image: none;
background-color: transparent;
border: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px; 

Unofortunately this just made the font of the menu less visible. Does anyone know how I can make this header clear? 

Many thanks,
Martyn

[smartfixers001]

I'm currently in the process of using the "Making header" feature on the Vast Home template for my service-based website during this I've been customizing the header to fit my branding and the specific needs of my business, but I've run into a problem with the navigation menu. How can i solve this?

[narmstrong]

Try this:

.header-container {
    background-color: rgba(255,255,255,0.7);
}

To make it toally transparent you can:

.header-container {
    background-color: transparent;
}

[Martyn]

Hey, I put in the first line of code you said to try as seen here, unfortunately it made no change to my header. Thanks for your time thus far.

[narmstrong]

You have to use the class structure. Looks like your class structure is targeting the menu only. Add this:

.header-container {
    background-color: rgba(255,255,255,0.7);
}

[Martyn]

Thanks for your help, where should I add this line of code? I tried to add it on line 1258 but no luck, I proceeded to add it above the .custom-menu privacy lines, there was no error but no change,
thanks again.
Martyn

[narmstrong]

Add it after your 

.custom-menu-primary .hs-menu-wrapper > ul li a {

}

Code block. So 

.custom-menu-primary .hs-menu-wrapper > ul li a {
    /*Not going to type out all your code for this block 🙂 */
}
.header-container {
    background-color: rgba(255,255,255,0.7);
}

[Martyn]

So I added the code after this block and the transparency is there... but the menu has freaked out a bit. (the top picture is before adding the code)

[narmstrong]

My Guess is that you may have put that in a place that broke a code block. I also think that right above that looks like this?

@media(max-width:768px) {
    .custom-menu-primary,
    .custom-menu-primary .hs-menu-wrapper>ul,
    .custom-menu-primary .hs-menu-wrapper>ul li,
    .custom-menu-primary .hs-menu-wrapper>ul li a {

Maybe try this: Go all the way to the top of your stylesheet.

Do you see this code block?

img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom
}

Add these blocks right after the closing curly bracket

}

So your end code should look like this:

img {
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom
}
.header-container {
    background-color: rgba(255,255,255,0.7);
}
.body-container-wrapper {
padding-top: 0 !important;
}
img.alignRight,
img.alignright {
    margin: 0 0 5px 15px
}
/*The rest of the code*/

[Martyn]

Hey mate,

Have been looking through the code at the top I couldn't find anything matching. Around lines 430-630 I found similar code, shown below. Is this where I should add the code?

Thanks again, 

Martyn

[narmstrong · Accepted solution]

Honestly that should work fine. As long as it isnt in another code block or in a media query that isnt relevant it "should" just work. 

Just these lines:

.header-container {
    background-color: rgba(255,255,255,0.7);
}
.body-container-wrapper {
    padding-top: 0 !important;
}

Let me know how you fare. Good luck.

[Martyn]

Thanks so much. Perfect, All sorted. Have a great day. 
Martyn