Navigation menu, remove item from desktop

Question

Navigation menu, remove item from desktop

Larm

2021年7月21日 08:25

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/

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;
    }
}

Topic responsive navigation mobile menus Wordpress

Category Web

ripper17 · Accepted Answer · 2021年7月21日 08:25

I can't comment yet on wordpress.stackexchange.com (not enough reputation...), but I'd like to add to the answer of Jack Johansson from Jun 1 '17 : The syntax for "display" is not "hidden" but "none". So the corrected code would be

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

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

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

While "hidden" is correct for "visibility", it isn't for "display". See https://developer.mozilla.org/de/docs/Web/CSS/display for all possible values.

I'd argue that moving the first rule into the media-query would be even better and might save you from using the !important keyword, too, but that might depend on your theme or your other CSS rules.

Johansson · Accepted Answer · 2017年6月1日 17:33

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).

Navigation menu, remove item from desktop

About