Archived topic
Diffrent Mobile Menu
9 replies · Started by Nicholas on February 27, 2017
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 :D
Hi Nicholas,
Checkout this post: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/
Let me know if this does what you wanted :)
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?)
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.
It worked it is only showing the logos now but it kicked the text down a line on the desktop menu :P
What it is doing.
Add this addtional CSS:
.hide-on-mobile {
display: inline;
}Let me know.
YEY :D perfect thank you!
Appreciate the help!
You're very welcome :)
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 :)
