Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #30377
    securespace
    Guest

    Hello, I added my phone number to the top right corner of my site in the menu section and it looks fine in desktop mode but in the mobile view it collapses the phone number into a clickable drop down menu.  Is there a way to stop this from happening so that the number is always showing in mobile view?

    #30378
    Jesse Owens
    Guest

    Hello!

    That’s a really great question. Normally the primary menu at the top is meant to collapse into the “Hamburger” on mobile devices, but if you’re only using the one item- your phone number- I can definitely see why you’d want to disable this behavior.

    I came up with one solution, assuming the menu you’re using for your phone number is the Primary Menu. You can tell if you’re using the Primary Menu in the Customize -> Menus -> Menu Locations section. If you’re using another menu, replace “primary-navbar” in the code below with the corresponding menu name you’re using for your phone number.

    This is going to take both custom CSS, and custom JavaScript, so head over to your Customize -> Advanced -> Custom JS & CSS menu.

    For your CSS, use this code:

    .navbar-toggle {
        display: none;
    }

    Then, for your custom JavaScript, use this code:

    document.getElementById("primary-navbar").classList.remove("collapse");
    document.getElementById("primary-navbar").classList.remove("navbar-collapse");

    I hope this helps!

    #30379
    Jesse Owens
    Guest

    Glad to hear I was able to help! If you have an extra moment, we’d be very grateful if you could help spread the word by leaving us a review on wordpress.org.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Menu item (phone number) collapses in mobile view’ is closed to new replies.