Transparent Mobile Header (Hero)

[Velved_S]

Hey, Is there a way that I can make the standard white mobile menu bar transparent (hero) to match the desktop home page. I checked all of the setting throughly and I did not see any type of option for it.

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

I’m not understanding exactly what do you want to achieve.
Can you explain further? maybe with a mockup image?

Thanks

-Rui

[Velved_S]

Hey Rui,

Maybe I made that a little confusing. I just want a transparent (hero style) mobile header. That’s what I’m looking to accomplish.

I have attached an image to show what I mean. Currently the mobile header is a standard white color. I’d like to make it completely transparent so that the background image is behind the logo.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

What is the URL?

Thanks.

[Velved_S]

URL is dev.getdrivit.com

[Velved_S]

Is this is not a core theme function, to allow the mobile header to be transparent, is there some css that would allow me to do so?

[David Martin – Support]

Please test this:

@media only screen and (max-width: 767px) {
#mobile-header {
    position: absolute;
    background-color: transparent;
}
}

[Velved_S]

Working for the most part, just need to get rid of the border line in the image I’ve attached.

Attachments:

You must be logged in to view attached files.

[Velved_S]

Adjusted the code to:

@media only screen and (max-width: 767px) {
#mobile-header {
position: absolute;
background-color: transparent;
border: transparent;
}
}

That got rid of the border. Let me know if theres anything wrong with me doing it that way.

[Mohammad – SUPPORT]

Hi,
Its perfect 🙂 .
Thanks
Mohammad

[Velved_S]

Any way I can add some spacing or padding in there? After the header that is.

[Kyle – SUPPORT]

Can you explain where you want the padding?

– Kyle

[Velved_S]

Right after the menu, so at the bottom. Just to add a little more space between the logo/menu icon & the actual website content.

[Velved_S]

Hey Guys,

I have one other issue I need some hep with, figured I’d just mention it in this thread.

So I have my main menu items color set to a gray right now.

When I use a Swift Slider, and set the “Slide Styling” to dark (because the image is lighter), it changes the main menu items to black (assuming this is done by default).

Is there some code I can use to set that color to the gray that I’d like to use?

[Kyle – SUPPORT]

Add this to your custom css:

.sticky-header-disabled .header-wrap[data-style="dark"].full-header-stick nav .menu > li.menu-item > a {
  color: #777;
}

So you want to add more spacing here?

– Kyle