How to switch Colour of Hamburger Stripes

Hi guys,

i have a hamburger collapsed in the header, and want to switch the colour of the stripes to white. how is the css code for this?

And at the same time, maybe i want to make other changes to the hamburger. is there a list of all commands concerning the hamburger? :wink:

thx
Flo

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up, however there may be a delay since it was placed in the wrong location (see global notice at top of page). How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Conversation Forum (no official support provided here).

Design & Development, Marketing & Media, and Hosting & Optimization are for discussion with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Customizer, Custom > CSS area.

.x-btn-navbar {
    color: #ffffff;
}

Hope that helps.

Nothing happens. What else can i try?

Hi There,

Please provide us with the URL to your site to check.

Thanks!

Sure, dev.fenner-musik.de

Hi there,

Please try this code:

.hm3 .x-toggle-burger {
    color: #fff !important;
}

Hope this helps.

Yeah, now it works. What was the difference?

And I have have additional questions. :wink:

  1. how can i make the menu open on the left side, not on the right side?

  2. how can i make it slide. in the beginning it slided well, but it just jumps to the section, when i click on the menu

  3. when i open another page, (like impressum) i also show the menu, but when i click on the items there the link is wrong because it also goes to #1stsection, #2ndsection, #3rdsection, etc., and not home/#1fstsection, etc…
    What can I do here?

  4. on tablet, my menu ist not well seen, because there the white menu is not on my brown hair, but on a lighter background, any solution for this problem?

thx a lot in advance. :slight_smile:

All the best
Florian

Hello There,

Thanks for updating in!

The first code was for the mobile menu with the default navbar. Since you are using custom header, the second code was needed to resolve your issue.

1.) Please edit your header and change the location from right to left:

2.) Please update to the latest version. Pro 1.1.1 is now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (https://theme.co/changelog/). After doing the updates, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

3.) You will need to create two separate menus. One menu will be for your homepages and the second one will be for your inside pages. You will need to duplicate your custom header as well. You will need to assign one header for the homepage and in this header it will contain the menu just for the homepage. The duplicated header will be assign to all other pages and in this header, the second menu will be used.

4.) We can create a custom css that will highlight the mobile menu icon. You can make use of this code:

@media(max-width: 979px){
  .hm3.x-anchor-toggle {
    background-color: black;
    box-shadow: 0em 0.15em 0.65em 0em rgba(255,255,255,0.95);
  }    
}

Hope this helps. Please let us know how it goes.

Hey, thank you

1.) can’t find that. :frowning:
i dont mean to put the hamburger on the left side, it already is, i mean the openening menu after clicking the button.

2.) seem to work, great, thx! :slight_smile:

3.) works too, thank you :slight_smile:

4.) cool, it works for them hamburger now, can i also have it for the social icons on the top right?

Hi again,

- Just click on Off Canvas tab in inspector and change the Location to Left and this will change the menu opening location from right to left.

- For the icons, add this code as well:

@media(max-width: 979px){
  .hm5.x-bar-container .x-anchor {
    background-color: black;
    box-shadow: 0em 0.15em 0.65em 0em rgba(255,255,255,0.95);
  }    
}

Let us know how this goes!

ok, cool, it works, thank you. :slight_smile:

How can I make changes just for mobile in pro theme withouth using css?
Is that possible? I just found the possibility to see how it looks on the different devices, but not the function to say: “this has to be seen on mobile, not on pc”.

Thx in advance. :slight_smile:

Hi there,

I suggest that you open up new threads for each questions as it will make it easy for us and our other customers that may have the same problem locate the thread.

Now regarding the question, you need to click on the magnifying glass icon of the element you want to have control over and search for the Customize tab:

There you will find the options to Show/Hide the element in different viewports:

Play with those options and you will get the hang of the way it works.

Thank you :slight_smile: