Navigation
Archive / Different menu items on mobile and desktop
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • July 6, 2016 at 5:24 am #1074496
    tomaspernek
    Participant

    Hey there!

    I would like to change menu items depending if the site is viewed on a desktop or a mobile. I believe this can be achieved with defining on hiding and showing item based on screen width. I can manage to hide items from the desktop version using this code

    @media (min-width: 600px){
    #menu-item-250 {
    display: none;
    }
    }

    but not the other way around that is hidning items from the mobile menu.

    the page is

    http://recco.technology

    Thanks in advance!

    /Tomas

    July 6, 2016 at 6:10 am #1074547
    Nico
    Moderator

    Hi There,

    Thanks for writing in.

    You can try adding this code in your Customizer > Custom > CSS:

    
@media (min-width: 600px){
li.menu-item-250{
display:none;
}
}

    It will remove both desktop and mobile version.

    Hope it helps.

    Let us know how it goes.

    Thanks.

    July 6, 2016 at 6:10 am #1074548
    Thai
    Moderator

    Hi There,

    Please add the following CSS:

    .x-navbar .mobile .x-nav li.menu-item-250 {
    display: none;
}

    Hope it helps 🙂

    August 5, 2016 at 4:37 pm #1119395
    DiamondAlexander
    Participant

    Thank you so much for this! It worked perfectly – ughh I had been trying and trying.

    Y’alls support is the best!

    August 5, 2016 at 5:30 pm #1119459
    Prasant Rai
    Moderator

    Happy to hear that. Feel free to ask us again. Have a great day! 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1074496 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>