Removing a Menu in the Mobile View

  • themantismenagerie · Member ·

    I am using the premium theme Prosperity that allows header text, and I found out that if I put code in the text box, then the header text can display links. I like how the links are up at the top aligned with the search bar, so I decided to remove the main menu at the bottom of the header, at least temporarily to see how it looked. I can remove it from the desktop view by emptying the primary menu, which automatically hides the menu. The mobile view still has a menu button that opens up to a blank page. Is there any way to remove both? Can I hide header text in the mobile view and show the regular menu without also showing the menu on the desktop view?

    The blog I need help with is: (visible only to logged in users)

  • staff-mckluskey · Staff ·

    Hi there!

    The mobile view still has a menu button that opens up to a blank page. Is there any way to remove both?

    The majority of our themes will display the hamburger menu on smaller screens because the traditional links menu often does not fit and makes it harder to read the site. If you still wish to display the links, instead of the button though, you can remove the menu from the mobile by adding this piece of CSS to your site:

    /*Hides mobile menu*/
#mobile-menu-toggle {
    display: none;
}

    Can I hide header text in the mobile view and show the regular menu without also showing the menu on the desktop view?

    So, do I understand correctly that you’d like to show the hamburger menu on the mobile and no header links, but use the header links as a menu on desktop and hide the traditional menu there?

    This could be done with some custom CSS as well, we can have a look once you’ve confirmed what’s the idea.

    Also, remember that on Premium plan you can access our Live Chat directly from https://wordpress.com/help/contact and get your answers sooner :)

  • themantismenagerie · Member ·

    So, do I understand correctly that you’d like to show the hamburger menu on the mobile and no header links, but use the header links as a menu on desktop and hide the traditional menu there?

    That is exactly what I would like it to do. The header links barely fit on my mobile screen, and I am worried that on another type of device they may spill over to the next line. Also, I think the menu button is more user-friendly on the mobile.

  • staff-mckluskey · Staff ·

    I think the menu button is more user-friendly on the mobile.

    I agree with that :)

    So, you’ll want to remove the code I gave you in the last post. Instead, you’ll create your menu that will appear on the mobile screens and add this code:

    @media only screen and (max-width: 768px) {
.top-bar.th-text-sm.th-py-xs.th-bg-accent-base {
    display: none;
}
}
@media only screen and (min-width: 768px) {
	#site-navigation {
    display: none;
}
}

    This should do just what you were looking for.

  • themantismenagerie · Member ·

    It seems to do exactly what I was looking for. I noticed that, when I resized the page on the desktop view, there is a range in widths where both the header text and the menu appear. Based on how I interpret the code, shouldn’t that not be able to happen as one condition starts 768px where the other one ends? Regardless, I am not too concerned about it as the average window sizes I would expect people to view my site with work perfectly, as does the mobile and the tablet view.

  • staff-mckluskey · Staff ·

    Hmm, you’re right.

    I had another look and it seems that the mobile menu is triggered around 990px, try to change the value in the code to that number, it should help :)

    Let me know if you need more help with that or, as mentioned earlier, feel free to jump into Live Chat from https://wordpress.com/help/contact

  • The topic ‘Removing a Menu in the Mobile View’ is closed to new replies.