Making header on vast home template see through

SOLVE
Martyn
Member

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

0 Upvotes
1 Accepted solution

Accepted Solutions
narmstrong
Solution
Contributor | Platinum Partner

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.

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing

View solution in original post

0 Upvotes
10 Replies 10
narmstrong
Contributor | Platinum Partner

Try this:

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

To make it toally transparent you can:

.header-container {
    background-color: transparent;
}
Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
Martyn
Member

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.code screenshot for header.png

0 Upvotes
narmstrong
Contributor | Platinum Partner

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);
}
Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
0 Upvotes
Martyn
Member

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

0 Upvotes
narmstrong
Contributor | Platinum Partner

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);
}
Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
0 Upvotes
Martyn
Member

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)before adding code.pngresult after adding code.png

0 Upvotes
narmstrong
Contributor | Platinum Partner

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*/

 

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing
0 Upvotes
Martyn
Member

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, 

Martyncode found.png

0 Upvotes
narmstrong
Solution
Contributor | Platinum Partner

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.

Noah Armstrong | TSL Marketing
Senior Developer
6085 Marshalee Dr| Suite 100 | Elkridge, MD 21075
Contact Us

TSL Marketing

View solution in original post

0 Upvotes
Martyn
Member

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

0 Upvotes