Recolour the mobile menu hamburger icon

• andonelab

  said

  Hello,
  I need to re-colour the menu icon on the mobile phone layout but I can’t find where I have to change the settings … Can you help me?
  Thank you!

• jeffw

  said

  NOTE: If you are using Vellum v1.4+ this CSS will not work because it is for the old version of UberMenu Lite. See below for CSS that will work with UberMenu Lite v3. → http://para.llel.us/support/groups/vellum/forum/topic/menu-icon-on-mobile/#post-69298

  Hi, andonelab.

  You can do that with some custom CSS…

  #megaMenu #megaMenuToggle .megaMenuToggle-icon:after  {
    background: Red !important;
    background: rgba(255, 0, 0, 0.7) !important
  }
  #megaMenu #megaMenuToggle .megaMenuToggle-icon:before {
    background: Blue !important;
    background: rgba(0, 0, 255, 0.7) !important
  }
  #megaMenu #megaMenuToggle .megaMenuToggle-icon {
    background: Green !important;
    background: rgba(0, 255, 0, 0.7) !important
  }

  Go to Appearance > Theme Options > Custom CSS and add those styles to your Custom CSS box. Adjust the colours to suit.

  The styles for the menu toggle icon are defined in the ‘extensions/ubermenu/lite/styles/basic.css’ stylesheet, lines 661-698 or thereabouts.

• andonelab

  said

  Thank you!!!

• rjoyner

  said

  I tried the code and didn’t have any luck. The mobile view was still light gray. I’d like to have a darker color, something like #333333. So how would I achieve this?
  BTW, for some reason my Forum account was blocked earlier. I purchased a fresh copy of Vellum a few hours ago. Not sure why no one would answer my questions or at least message me if I’m doing something wrong

• jeffw

  said

  I just checked the CSS I posted and it works fine. If it is not working for you then perhaps you made a mistake adding the CSS to your Custom CSS box.

  If you want to change the colours in my CSS feel free to do that. But that is a customisation issue and we can’t help if you are having issues with customisation beyond the theme options. The CSS I posted is an example and that’s as much help as we offer with non-support requests. Custom changes, testing and coding are up to you and are beyond the scope of our theme support.

  References:
  http://www.w3schools.com/cssref/css_colors_legal.asp

• rjoyner

  said

  Thanks. The link is very useful

• jaredfriesdesign

  said

  Hi. rjoyner… Did you ever solve this issue? If so, how? I have the same problem and the code above doesn’t seem to work even if pasted directly from here into the Custom CSS box as mentioned.

• jeffw

  said

  In the v1.4 theme update UberMenu Lite was updated from v2 to v3 and a great deal changed, which means that any navigation menu styling tips posted in this forum before January 1st, 2015 will most likely not work.

  In UberMenu Lite v3, to set the colour of the hamburger icon you can use this custom CSS…

  #MainNav .ubermenu-responsive-toggle { color: Fuchsia }

  Go to Appearance > Theme Options > Custom CSS and add that CSS to your Custom CSS box, or add it to your custom stylesheet. Adjust the colour to suit your specific situation.

  The toggle content text (the word “Menu”) can be removed or changed on the Appearance > UberMenu > Main UberMenu Configuration > Responsive & Mobile settings page, it’s the input box labelled Responsive Toggle Content.

  If you want the colour of the hamburger icon to be different from the colour of the toggle content text you can do that with some more custom CSS…

  #MainNav .ubermenu-responsive-toggle .fa { color: SpringGreen }

• jaredfriesdesign

  said

  @jeffw Thanks! I figured it was just out of date… This solution works perfect!! THANKS again!

• bildersturm

  said

  Thank you, this post helps me.

• drkiran

  said

  Hi,

  I want NAV bar to be transparent and look like part of theme and remove wordpress icon and replace with site logo. can it be done?

• jeffw

  said

  @drkiran

  The subject of this topic is “Recolour the mobile menu hamburger icon”. Your question has nothing to do with the subject of this topic so if you can’t find a solution using the forum search please create a new topic for this separate issue and we’ll do our best to help.

  (To start a new topic go to the forum topic list → http://para.llel.us/support/groups/vellum/forum/ and click the big purple New Topic button.)

  Please try to remember to start a new topic for each separate issue that you have. We like to keep each topic in the Help Center focused on a single subject. We find that separating each question into a separate topic keeps the information much clearer and easier to follow. Also, it really helps other users to find information and it prevents threads from wandering down Tangent Lane. If you can’t find a solution using the forum search, please always create a new topic for each separate issue that you have. Thanks.

• grimesgw

  said

  Hi there, is this solution (http://para.llel.us/support/groups/vellum/forum/topic/menu-icon-on-mobile/#post-69298) still current?

• jeffw

  said

  Yep…

  #MainNav .ubermenu-responsive-toggle { color: Fuchsia }
  #MainNav .ubermenu-responsive-toggle .fa { color: SpringGreen }