Top navigation menu does not show up on mobile

  • Author
    Posts
  • #62918

    plmwanchai
    Member

    I have read through the help and forum but am still unsure what I need to set to get the top navigation menu to appear on a mobile? (My site is public–thanks!)

    The blog I need help with is harvesttestblog.wordpress.com.

    #63223

    thelukemcdonald
    Theme Author

    Debut has a special mobile menu that will display on mobile devices. The menu is setup via Appearance > Menus. Create a new menu and apply it to the “Mobile Menu” navigation area. If the Mobile Menu is not setup, the Primary Menu will display.

    The reason for the mobile menu is because Debut has three navigation menus in the header. There isn’t a good way to display each of these menus in a simple way on mobile devices.

    #63226

    plmwanchai
    Member

    Since I am using the front page as a website not a blog, I only have the top nav menu (the primary menu area is hidden). Because of this, even when I set the mobile menu it did not work.

    I found this format on another help site to hide the header only on the computer and not the smaller screens and it worked so the mobile can still use the primary menu–not sure if there is a better way, but it was the only thing I found that worked:

    @media (min-width:992px) {
    .header-below {
    display: none !important;
    }
    }

    #63234

    thelukemcdonald
    Theme Author

    The mobile menu will display on mobile/touch devices less than 1024px. A special “touch” class is given to the body of the page and assists with the menu display and functionality.

    When viewing your site on my iPhone, I do see the mobile navigation on the page; I don’t see the top navigation.

    #63235

    plmwanchai
    Member

    Thanks, that is very helpful. I will use 1024px as the min width then to hide .header- below.

The topic ‘Top navigation menu does not show up on mobile’ is closed to new replies.