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

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

Home Forums Support Remove Menu Labels On Desktop When Enabled Off-Canvas –

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1866964
    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.

    #1867008
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1867011
    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.

    #1867036
    Ying
    Staff
    Customer Support

    I see, try this CSS:

    .inside-header .main-navigation .main-nav>ul {
        display: none;
    }
    #1867158
    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.

    #1867299
    Elvin
    Staff
    Customer Support

    Hi Moses,

    Try this instead:

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

    A wise man once said:
    "Have you cleared your cache?"

    #1868189
    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. :/

    #1868251
    Ying
    Staff
    Customer Support
    #1868306
    Moses
    #1868350
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

    #1869573
    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. :/

    #1869598
    Ying
    Staff
    Customer Support

    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!

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