Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • January 28, 2017 at 10:29 am #739701
    Dependable

    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

    January 28, 2017 at 11:35 pm #739838
    Vinay

    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

    January 29, 2017 at 1:58 am #739887
    Dependable

    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?

    January 29, 2017 at 7:48 am #739900
    Vinay

    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

    April 3, 2018 at 10:52 am #936451
    TPMdeVos

    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

    April 3, 2018 at 1:56 pm #936553
    Victoria

    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

    April 19, 2018 at 4:17 pm #944147
    Tim

    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

    April 20, 2018 at 11:18 am #944533
    Tim

    Hi,
    Can you please see my reply?

    Thank you!

    April 23, 2018 at 3:36 am #945197
    Ismael

    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

    November 27, 2018 at 2:27 am #1037891
    jchucary

    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

    November 27, 2018 at 6:23 am #1037916
    Vinay

    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

    December 1, 2019 at 9:27 am #1161576
    metin_aydin

    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

    December 2, 2019 at 10:27 am #1161782
    Ismael

    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

    November 24, 2020 at 2:23 pm #1262668
    ripanti

    Hello, somehow it doesn`t work anymore. Trying to hide a page in the main menue with hide-on-desktop and
    /*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 advice. Thanks!

    November 25, 2020 at 7:21 am #1262930
    Rikard

    Hi ripanti,

    Thanks for the login details. I see the CSS on your site, but I can’t see any classes added to any of your menu items. Please add the necessary class to the menu element in question under Appearance->Menus.

    Best regards,
    Rikard

    November 25, 2020 at 10:31 am #1262960
    ripanti

    https://www.evernote.com/l/AoEwqeW5M65DBLFO9Ym8bhQWDxZQvFYP_n4
    Hi Rikard, I put hide-on-desktop as class to KONTAKT already. Where else do I have to add the class?

    • This reply was modified 4 years ago by ripanti.
    November 26, 2020 at 5:18 am #1263173
    Rikard

    Hi ripanti,

    I see the class added to the menu item, but you are using the wrong class. You need to use either only_desktop or only_mobile, like in your CSS.

    Best regards,
    Rikard

    November 26, 2020 at 9:21 am #1263208
    ripanti

    Hi Rikard,
    I tried both versions. But it does not hide on desktop :-( Thanks for help

    November 27, 2020 at 4:12 am #1263429
    Rikard

    Hi ripanti,

    Thanks for the update. So you want to hide the kontakt menu item for desktops? If so then please try this in Quick CSS:

    @media only screen and (min-width: 991px) {
#menu-item-764 {
  display: none;
}
}

    Best regards,
    Rikard

    November 27, 2020 at 10:44 am #1263486
    ripanti

    Hi Rikard!
    Yes, I want to hide menue items ifor desktop.
    Usually this worked fine with css class only_mobile and the following quick CSS
    @media only screen and (min-width: 769px) {
    .only_mobile { display: none !important; }}

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

    But this time it doesnt work. Still it doesnt work with the new code you just send me – even when removing the other CSS.
    Or is it better to create a different menue for mobile? What is the best way?

    Could you please advice again. Thanks a lot in advance.
    Regards

    November 28, 2020 at 6:33 am #1263654
    Rikard

    Hi ripanti,

    Thanks for the update. Please try this CSS instead:

    #av-burger-menu-ul li.menu-item-764 {
  display: none;
}

    Best regards,
    Rikard

    November 29, 2020 at 8:46 pm #1263807
    ripanti

    Hi Rikard,

    it still doesn`t work. I have no idea how to hide this menue item on desktop :-(

    Regards

    December 1, 2020 at 6:42 am #1264136
    Rikard

    Hi ripanti,

    Thanks for the update. So you want to hide the kontakt menu item for desktop? If so then please try this CSS instead:

    #menu-item-764 {
  display: none;
}

    Best regards,
    Rikard

    December 1, 2020 at 9:08 am #1264154
    ripanti

    Hi Rikard,

    it still does not work :-(

    December 2, 2020 at 5:49 am #1264411
    Rikard

    Hi ripanti,

    I added the CSS for you in Quick CSS, and it’s working. Please review your site.

    Best regards,
    Rikard

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