-2

Using theme (and child theme) of Sailent, I'm trying to work out a way to completely remove a menu item from my navigation bar while on desktop. See site here: http://www.boinginflatables.com/2017update/

It's there, although not visible As you can see, the text for the menu item isn't there, yet it messes up the alignment of the menu.

At the moment, I have that menu item set to a css class of mobile-only with css settings as:

.mobile-only {
        visibility:hidden;
    }
@media (min-width:992px) {
    .desktop-only {
        visibility:visible !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        visibility:visible !important;
    }

    .desktop-only {
        visibility:hidden !important;
    }
}
0

Although this is not really a WordPress question, but the visibility property does not actually HIDE any element. It only fades it so you can't see it, but it still reserves space for it. You need to use the display property:

.mobile-only {
        display:hidden;
    }
@media (min-width:992px) {
    .desktop-only {
        display:block !important;
    }
}

@media (max-width: 991px) {
    .mobile-only {
        display:block!important;
    }

    .desktop-only {
        display:hidden !important;
    }
}

You might want to change the block to inline-block or inline, depending on the original value of your menu's item (which is usually inline-block).

  • Thanks Jack! I tried this, however it still displays on desktop – Larm Jun 3 '17 at 1:01
  • @Liam You're welcome. If visibility:hidden works for you, then display:none will work too. – Jack Johansson Jun 3 '17 at 8:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.