[Resolved] Remove Menu Labels On Desktop When Enabled Off-Canvas –

[Moses]

Good day. Goal: Remove the text menu labels on the header NAV when Off-Canvas menu is enabled.

Off-Canvas is enabled for Desktop Only. Wish to keep the user ‘on-page’ without having to X out on mobile.

Attempted setting a ‘Blank’ Menu as Primary Menu. This removes the text menu labels from the nav on desktop, but also creates a Blank menu on Mobile.

How am I able to set my desired menu as both Primary and Off-Canvas so that it appears on both Desktop and Mobile – without the text Menu Labels showing on the desktop layout?

As always your help is greatly appreciated.

[Ying]

Hi there,

Can you link us to your site?

So on desktop, you only want the off canvas hamburger menu icon to show?

What do you want to achieve on mobile?

Let me know 🙂

[Moses]

That is correct. On desktop only the off canvas hamburger menu icon. On mobile, the hamburger menu icon will drop down (not off canvas) to display the same menu as on desktop. The way its is currently configured, with the exception of the Menu Text Labels appearing on Desktop.

[Ying]

I see, try this CSS:

.inside-header .main-navigation .main-nav>ul {
    display: none;
}

[Moses]

That did remove the menu text labels on the header, but it also removed the links from the Off Canvas slide out menu unfortunately.

[Elvin]

Hi Moses,

Try this instead:

body.offside-js--is-open  nav#site-navigation  .main-nav>ul  {
    display:none;
}

[Moses]

That is a negative. Unfortunately that did not work. Adding your code – the text menu labels are still visible. I tried your code along with the previous one also, and then again all menus disappeared. :/

[Ying]

I’ve edited the CSS here, try this instead:
https://generatepress.com/forums/topic/remove-menu-labels-on-desktop-when-enabled-off-canvas/#post-1867036

[Moses]

[Ying]

You are welcome 🙂

[Moses]

Oh goodness – I spoke too soon. Apologies. That previous code did not work. It did hide the text menu labels on desktop. And the hamburger menu did display correctly on desktop – but on MOBILE the menu is completely blank. :/

[Ying]

I don’t have your site link since it’s marked as resolved, the content in the private info filed got erased.

You can try this CSS in stead:

@media (min-width: 769px) {
    .inside-header .main-navigation .main-nav>ul {
        display: none;
    }
}

If it’s not working, can you link me to your site again? Tks!

[Author]

Posts