Mobile Menu using UberMenu

Support
#1

The menu icon on mobile devices is very small and almost impossible to tap using a cellphone. What I am talking about is where it says “Menu” with three horizontal lines. How do I make this icon larger?

#2

Hello There,

Thanks for writing in!

To increase the size of the hamburger icon for your ubermenu, please go to Appearance > UberMenu > Main UberMenu Configuration > Style Customizations and find the “Responsive Toggle Font Size” option. Insert at least 16 or 18 pixels.

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

#3

Great, that worked! Thank you! Do you know how to make it placed at the top of the screen and/or have it stay there? It scrolls past and does not stay as a hamburger viewable at all times.

#4

Hello There,

To make the hamburger menu fixed on top in smaller screens, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
  a.ubermenu-responsive-toggle.ubermenu-responsive-toggle-main.ubermenu-skin-white.ubermenu-loc-primary.ubermenu-responsive-toggle-content-align-left.ubermenu-responsive-toggle-align-full{
    display: block;
    position: fixed !important;
    width: 100%;
    left: 0 !important;
    top: 0 !important;
    z-index: 9999 !important;
  }
}

We would loved to know if this has work for you. Thank you.

#5

Hi there. That changed the format of the menu but it didn’t make it sticky on mobile devices.

#6

Hi There,

I didn’t see the CSS applied to the menu in the page.
Can you please confirm if you have added the CSS?

Thanks

#7

I applied it and saw it didn’t work so I removed it

#8

Hi There,

Sorry for the confusion!
The position of the nav menu you have is not possible to make it sticky Via CSS. You need custom JS code for that.
The only way to make sticky is to make the entire header section sticky.

Please use this CSS to make the header sticky and ignore the above CSS.


@media (max-width: 979px){
  .masthead {
    position: fixed;
    z-index: 9;
    top: 0px;
    width: 100%;
    background: #fff;
}
.x-container.offset {
margin: 35% auto 40px auto !important;
}
#scb-wrapper {
    z-index: 999999;
    position: fixed;
    width: 100%;
    top: 0px;
    background: #339966;
}
}

Hope this helps!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.