Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26895

    Hello,

    is it possible to add menu items to the Main Menu (even mega-menu items) and have them show only on mobile devices?

    It would be something in the way that noMobile class works for hiding menu items from mobile devices, just the opposite function.

    Thanks,

    Daniel

    #132015

    Hi,

    You can add Media Queries and choose to hide them on desktop screen widths. Inspect the menu that you want to hide look for the unique menu li id. Add this on your custom.css or Quick CSS.

    @media only screen and (min-width: 1024px) {
    /* Add your Desktop Styles here */
    #menu-item-755 {
    display: none;
    }
    }

    This will hide the menu on screens with minimum of 1024px resolution.

    Regards,

    Ismael

    #132016

    Thanks Ismael,

    It worked for me, I just had to add !important to the styling:

    @media only screen and (min-width: 1024px) {

    /* Add your Desktop Styles here */

    #menu-item-2606 {

    display: none !important;

    }

    }

    One more thing: what I’m hiding here is a fourth column in a mega menu. The result is that the other three columns now show up spreaded over the space for four columns. Is there a way to avoid this?

    Regards,

    Daniel

    #132017

    Hey!

    Can you post a link to the website please? I’m not sure if this is possible but I’ll play around with the css code a bit – maybe we can find a solution.

    Regards,

    Peter

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Enfold – Show menu items only in mobile devices’ is closed to new replies.