[Resolved] Diffrent Mobile Menu

Home Forums Support Diffrent Mobile Menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #284679
    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 😀

    #284681
    Leo
    Staff
    Customer Support

    Hi Nicholas,

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

    Let me know if this does what you wanted 🙂

    #284683
    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?)

    #284699
    Leo
    Staff
    Customer Support

    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.

    #284711
    Nicholas

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

    #284716
    Nicholas

    View post on imgur.com

    What it is doing.

    #284718
    Leo
    Staff
    Customer Support

    Add this addtional CSS:

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

    Let me know.

    #284720
    Nicholas

    YEY 😀 perfect thank you!

    Appreciate the help!

    #284721
    Leo
    Staff
    Customer Support

    You’re very welcome 🙂

    #284820
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.