Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #739701

    Hello, does the following code not work anymore? I tried it and it doesn’t seem to work. If not, can you please provide CSS that will replicate this solution?

    https://kriesi.at/support/topic/different-menu-on-mobile-view/

    Thanks!

    -Brad

    #739838

    Hey soundstrat,

    It should work :)

    Please make sure the “class name” is set correctly for the menu items in Appearance > menu after the css code is added in Enfold > General Styling > Quick CSS

    Best regards,
    Vinay

    #739887

    I tried with just the code provided on that page but didn’t see any css code for quick CSS in that thread. Did I miss something?

    #739900

    Hi,

    Let’s start from fresh!

    remove any code you added earlier to solve this.

    1. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    /*Show only in mobile or desktop*/
    
    @media only screen and (min-width: 769px) {
    .only_mobile { display: none !important; }}
    
    @media only screen and (max-width: 768px) {
    .only_desktop { display: none !important; }}
    

    2. In Appearance > Menu page click on screen options and select the css class.

    3. Add the menu items to the menu list and in the class name section add only_mobile for the once you like to show in mobile and only_desktop for the menu items you want to show in desktop.

    Hope this helps :)

    Best regards,
    Vinay

    #936451

    Dear Vinay this still doesn’t work on my enfold, It both shows on mobile aswell on desktop when using those class names

    Greetings

    Bram

    #936553

    Hi TPMdeVos,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #944147

    Hello,

    I’ve the same problem. I did like you told in this post. But you still will see the menu item on mobile.

    Can you see what’s wrong?

    The problem is that some items aren’t clickable on desktop. But on mobile it looks like the must be clickable, so I want them out of the menu.

    Greetz

    #944533

    Hi,
    Can you please see my reply?

    Thank you!

    #945197

    Hi,

    @Tim: Did you add the css modification? We can’t see it when we inspect the menu item.

    /*Show only in mobile or desktop*/
    
    @media only screen and (min-width: 769px) {
    .only_mobile { display: none !important; }}
    
    @media only screen and (max-width: 768px) {
    .only_desktop { display: none !important; }}

    Please create a new thread or post the login details in the private field.

    Best regards,
    Ismael

    #1037891

    Hi there,
    I’ve been trying to figure out why I can’t get this to work.
    I’m trying to have a few items on my menu only visible on the desktop and not the mobile, and vice versa.

    I followed instructions from an old thread and added the class element in the menu section and then added the css in the quick css…

    I added:
    @media only screen and (min-width: 769px) {
    .only_mobile { display: none !important; }}

    @media only screen and (max-width: 768px) {
    .only_desktop { display: none !important; }}

    It was actually working at first, hiding one of the menu items on the mobile, but only on safari and not the Google app.
    Now neither is working.

    Please help!

    Thanks,
    j

    #1037916

    Hi,

    The changes you made to the menu looks good on my end. The “Weddings” menu is hidden on mobile.

    You may not see the changes until the cached files are cleared in your browser.

    Please perform the below steps to clear the browser cache:

    1. Disable “merging and compression” for CSS and JS files from Enfold > Performance.
    2. If a caching plugin is installed check the plugin settings and clear the cache and deactivate the plugins for testing purpose.
    3. Hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload”.

    Best regards,
    Vinay

    #1161576

    This seems to be the appropriate place to ask this question:

    I have setup a website with enfold and added a menu – looks neat on a desktop computer. However on a mobile device two menus are showing, see see link https://imgur.com/a/r7ghX4r
    I have no clue where I can turn of the extra menu (upper).
    Can you help me?

    Regards
    Metin

    #1161782

    Hi,

    Thank you for the update.

    The theme automatically creates a burger or mobile menu, so you don’t have to install a plugin for it. Please disable the plugin.

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.