Diffrent Mobile Menu

[Nicholas]

Hi,

I am really enjoying all the premium features and the theme. One of the best themes I have worked with.

The problem I have is fairly simple, I just have never done anything like it so trying to learn. I did read some other forum posts but none of them did exactly what I want.

I have a secondary navigation menu on my website and I am trying to make it change when on mobile/tablet. I would like it to only have the icons and none of the text as well as not be a drop down menu. So pretty much a separate menu that does not use the drop down feature on mobile.

Any ideas on how I can achieve this? thanks 😀

[Leo]

Hi Nicholas,

Checkout this post: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

Let me know if this does what you wanted 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nicholas]

That is almost perfect, it got rid of the drop down menu.

on this menu I have My Account, Cart, and Checkout with icons for each.. how can I make the menu not have the TEXT and only show the three logos? (I guess this is almost a separate menu?)

[Leo]

Try wrapping the text part in hide-on-mobile class like this:
<div class="hide-on-mobile">My Account</div>
Let me know if this works.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nicholas]

It worked it is only showing the logos now but it kicked the text down a line on the desktop menu 😛

[Nicholas]

View post on imgur.com

What it is doing.

[Leo]

Add this addtional CSS:

.hide-on-mobile {
    display: inline;
}

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nicholas]

YEY 😀 perfect thank you!

Appreciate the help!

[Leo]

You’re very welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

Hey actually come to think of it, if you wrap it in span instead of div like this:
<span class="hide-on-mobile">My Account</span>

then you can remove the CSS I provided above:

.hide-on-mobile {
    display: inline;
}

It makes no visual difference. Just 3 less lines of code 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts