CMS Development

Martyn
Member

Making header on vast home template see through

SOLVE

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
narmstrong
Solution
Contributor | Platinum Partner
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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
11 Replies 11
smartfixers001
Member

Making header on vast home template see through

SOLVE

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?

0 Upvotes
narmstrong
Contributor | Platinum Partner
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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

Making header on vast home template see through

SOLVE

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
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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

Making header on vast home template see through

SOLVE

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
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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

Making header on vast home template see through

SOLVE

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
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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

Making header on vast home template see through

SOLVE

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
Contributor | Platinum Partner

Making header on vast home template see through

SOLVE

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
0 Upvotes
Martyn
Member

Making header on vast home template see through

SOLVE

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

0 Upvotes