Docs

[dakotagts]

We have two sites that I am working on. They are both setup with a top menu and controlled by the UberMenu plugin for styles. However, I want to completely remove the top_bar menu from site when viewed on mobile devices that are below the responsive min width.

Sites:

http://www.useatrust.com
http://www.champaigncounseling.com

[Rahul]

Hey There,

Thanks for writing in!

To make it disappear in mobile. you can add this under Custom > CSS in the Customizer.

@media (min-width: 979px){
    .x-topbar {
        display:none;
    }
}

Hope this helps!

[dakotagts]

Looks like you put the wrong limited in the code. I needed all sizes below desktop to have the top bar disappear. I changed min-width to max-width

@media (max-width: 979px){
    .x-topbar {
        display:none;
    }
}

Next issue is the navi responsive break… It does not seem to go mobile (hamburger) toggle until the menu drops below the logo and then gets narrower than the navi width. Is there a way to make that smoother in ubermenu or set another min width to force the toggle to appear?

[Rupok]

Hi there,

Thanks for writing back. You can use another media query to make the font-size, spacing a bit smaller to fit it within smaller screen :

@media only screen and (min-width: 960px) and (max-width: 1130px) {
.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target {
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
}
}

Note that it might be different for your other site as this example is for first URL.

Thanks!

[Author]

Posts