CMS Development

Martyn
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
1 Solução aceita
narmstrong
Solução
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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

Exibir solução no post original

0 Avaliação positiva
11 Respostas 11
smartfixers001
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
narmstrong
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
narmstrong
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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 Avaliação positiva
Martyn
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
narmstrong
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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 Avaliação positiva
Martyn
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
narmstrong
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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 Avaliação positiva
Martyn
Membro

Making header on vast home template see through

resolver

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 Avaliação positiva
narmstrong
Solução
Colaborador(a) | Parceiro Platinum
Colaborador(a) | Parceiro Platinum

Making header on vast home template see through

resolver

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 Avaliação positiva
Martyn
Membro

Making header on vast home template see through

resolver

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

0 Avaliação positiva