Staff replied Templates

Travelin template - changing hamburger color and logo for sticky and non-sticky header on mobile

Asked by Wiktor 3 years ago Last activity 3 years ago

Hi!
I am using travelin template.
Site is on a temporary URL http://temp.dworzno.pl
I am having trouble with the menu colors, because they need to stand out from the background, but the header has a transparent background.
I managed to set up everything except for the mobile view.
Please help me to set the hamburger color to white, but only in non-sticky header. Sticky header has a pale backgriund, so black hamburger is ok.
Also I would like to have a different logo version for the sticky header and the non-sticky header on mobile.
Please help.

6 replies

Ofi Khan Staff

3 years ago

Hello Wiktor

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-header .burger-icon>span{
    background: #fff;
}
#sp-header.header-sticky .burger-icon>span{
    background: #000;
}

You have to customize for different logo on sticky header. Sorry, we do not provide customization support.

Best regards

Wiktor Asked this

3 years ago

thanks, everything seems to be working out pretty well so far.
Please just help me with one more slight issue:
In the template presets I can edit dropdown menu background, link, hovered link and active link colors. Alle the others seem to work, but the "menu dropdown text color" seems not to be taking any effect.
Please write me the css line which will force the dropdown menu items to be black.

(http://temp.dworzno.pl travelin template)

Thank you

Wiktor Asked this

3 years ago

Also if you could also help me to apply filter: brightness(100); to the logo, but only on non-sticky header. Once I scroll the page down and the header becomes sticky, I want the filter to turn off.

Thanks!

Ofi Khan Staff

3 years ago

Please try this CSS to Template Options -> Custom Code -> Custom CSS

.sp-megamenu-parent .sp-dropdown li.sp-menu-item>a{
    color: #000;
}
#sp-header .logo a img{
    filter: brightness(100);
}
#sp-header.header-sticky .logo a img{
    filter: brightness(0);
}

Wiktor Asked this

3 years ago

Thanks, that works!
Any idea why this filter only affects part of the logo?
temp.dworzno.pl

Ofi Khan Staff

3 years ago

Sorry, I have no idea about it. I have also found it weird.