Change Hamburger Icon Size In Mobile View
Ina Holm Johannesen
I use the Konstra template on one of my websites.
- I want to change the size and color of the hamburger menu icon on mobile view to a little smaller. How can I do this? OR
- I want to move the hamburger menu to the right corner in the mobile view.
Tried adding custome css but it won't work. probably wrong..
In Kontra template styles, you can choose whether off canvas should be on the right or left, but if you choose right, it disappears. Can I add some custom css that overrides or forcing it to appear where I want?
Paul Frankowski
Accepted AnswerHi Ina,
ad 1) Read tip 8. and 9. from: https://www.joomshaper.com/documentation/helix-framework/customization-tips#how-to-change-the-color-of-offcanvas-menu-icon-usead-in-header
Those menu [=] lines are not a icon, it's lines made by CSS.
Ad 2) You have to share URL
Ina Holm Johannesen
Accepted AnswerThank you.
Ina Holm Johannesen
Accepted AnswerYou should look at www.trygg-it.no instead
Paul Frankowski
Accepted AnswerAs basic variant for (2) use that Custom CSS
#sp-logo {order: 1;}
#sp-menu { margin-right: 0; order: 2; margin-left: 35px;}If was used the same template CSS code is still OK.
Ina Holm Johannesen
Accepted AnswerThank you, but the logo and burger only switched place.
I still want to keep the burger inn left corner on desktop and tab, but in the right corner in mobile view..
Paul Frankowski
Accepted AnswerThat's why I said its a basic variant.
More advanced will be:
@media screen and (max-width: 860px) {
#sp-logo {order: 1;}
#sp-menu { margin-right: 0; order: 2; margin-left: 35px;}
}Then that switch will be used only on Mobile & Tablet. Easy.
Ina Holm Johannesen
Accepted Answerhttps://snipboard.io/Sgj9wk.jpg
Picture showing what it looks like now and the result i`m looking for :)