[Resolved] I would like to get the Orbital menu in GeneratePress (Mobile menu)

[Isaac Krombell]

Do not install any plugin. If the button works for me.

[Tom]

Hmm, not working for me using developer tools or on my phone. Can you try again on your phone after clearing the browser cache?

We may need to take a step back and deactivate plugins one by one to see if one of them is conflicting with the toggle.

[Isaac Krombell]

I have just deactivated almost all the plugins and I have cleared the cache and I was testing and it works on both phones and in the browser.

[Tom]

Strange, I can get it to work by resizing my browser, but not any other way.

Does this CSS get you close to what you’re after?:

.main-navigation.offside {
    height: auto;
    top: auto;
    bottom: 10rem;
    border-radius: 10px;
    max-height: 400px;
}

Let me know 🙂

[Isaac Krombell]

Thank you! It works on the computer, on the iphone and on the ipad but on android devices it does not work. I’m testing it in Chrome. I don’t know what it can be since it only gives problems on Android.

[Isaac Krombell]

Solved I had put this code

button.menu-toggle:focus {
    display: none !important;
  }

He is the one who was giving trouble. How can it be done so that the lower padding is not left in the menu after the last link? And the menu is left without padding at the bottom.

[Tom]

Give this a shot:

.slideout-navigation .main-nav {
    margin-bottom: 0;
}

[Isaac Krombell]

Perfect!! Thanks a lot Tom. It’s looking great!! I put a bottom border on each link and I would like to know how I can remove or hide the edge of the last link in the menu? That edge is mainly noticeable when deploying the submenu.

[Tom]

You have this:

.main-nav ul li {
    width: 100%;
    border-bottom: 1px solid #eee;
}

Try this instead:

.main-nav ul li:not(:last-child) {
    width: 100%;
    border-bottom: 1px solid #eee;
}

[Isaac Krombell]

Perfect!!! Many thanks

[Tom]

Glad I could help 🙂

[Author]

Posts