Travelin Template - Changing Hamburger Color And Logo For Sticky And Non-sticky Header On Mobile - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Travelin Template - Changing Hamburger Color And Logo For Sticky And Non-sticky Header On Mobile

W

Wiktor

Template 2 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.

0
6 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #112252

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

0
W
Wiktor
Accepted Answer
2 years ago #112862

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

0
W
Wiktor
Accepted Answer
2 years ago #112865

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!

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #112897

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);
}
0
W
Wiktor
Accepted Answer
2 years ago #112950

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 2 years ago #113062

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

0