topic Re: Making header on vast home template see through in CMS Development

Making header on vast home template see through

Martyn — Tue, 18 Feb 2020 03:32:02 GMT

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

Re: Making header on vast home template see through

narmstrong — Tue, 18 Feb 2020 05:28:11 GMT

Try this:

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

To make it toally transparent you can:

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

Re: Making header on vast home template see through

Martyn — Tue, 18 Feb 2020 05:33:33 GMT

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.

Re: Making header on vast home template see through

narmstrong — Tue, 18 Feb 2020 05:41:16 GMT

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);
}

Re: Making header on vast home template see through

Martyn — Tue, 18 Feb 2020 06:03:25 GMT

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

Re: Making header on vast home template see through

narmstrong — Tue, 18 Feb 2020 06:09:00 GMT

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);
}

Re: Making header on vast home template see through

Martyn — Tue, 18 Feb 2020 06:15:06 GMT

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)

Re: Making header on vast home template see through

narmstrong — Tue, 18 Feb 2020 13:03:05 GMT

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

Re: Making header on vast home template see through

Martyn — Wed, 19 Feb 2020 02:17:55 GMT

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

Re: Making header on vast home template see through

narmstrong — Wed, 19 Feb 2020 03:20:23 GMT

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.

Re: Making header on vast home template see through

Martyn — Wed, 19 Feb 2020 04:53:44 GMT

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

Re: Making header on vast home template see through

smartfixers001 — Thu, 09 Apr 2026 19:20:10 GMT

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?