Change Hamburger Icon Size In Mobile View - Question | JoomShaper

Change Hamburger Icon Size In Mobile View

Ina Holm Johannesen

Ina Holm Johannesen

Template 1 year ago

I use the Konstra template on one of my websites.

  1. 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
  2. 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?

0
8 Answers
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #171253

Hi 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

0
Ina Holm Johannesen
Ina Holm Johannesen
Accepted Answer
1 year ago #171367

Thank you.

Url: www.arbeidsgruppenhus.no

0
Ina Holm Johannesen
Ina Holm Johannesen
Accepted Answer
1 year ago #171371

You should look at www.trygg-it.no instead

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #171372

As 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.

0
Ina Holm Johannesen
Ina Holm Johannesen
Accepted Answer
1 year ago #171373

Thank 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..

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #171374

That'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.

0
Ina Holm Johannesen
Ina Holm Johannesen
Accepted Answer
1 year ago #171375

https://snipboard.io/Sgj9wk.jpg

Picture showing what it looks like now and the result i`m looking for :)

0
Paul Frankowski
Paul Frankowski
Accepted Answer
Senior Staff 1 year ago #171399

Are you sure that you used my 2nd code?


Anyway on trygg-it.no - I see [=] on the right side.

0