Archived topic

Nav Bar Links In Mobile View

3 replies · Started by Bobby on July 8, 2017

Viewing posts 1–4 of 4

July 8, 2017 at 10:45 am #346092

Hey Tom,

I searched the forum but could not find a solution to my question. My question will probably seem odd, but here it goes..LOL.

In the mobile view, how do I make either the primary or scondary nav bar appear underneath the the logo, search box and menu button?

For example, on my site in mobile view, I have the menu button to the left, the logo centered and the search icon on the right.

See screenshot below of my site:

http://playerwags.com/wp-content/uploads/2017/07/pw-nav.png

I want my mobile site to also have the nav bar links underneath...

See the screenshot below of an example site of what Im trying to achieve...

http://playerwags.com/wp-content/uploads/2017/07/hhip-example.png

When I move the secondary nav bar underneath the header, it does not show nav links, it flips into mobile mode and shows the menu icon...so I end up with two menu icons.

To recap, How do I put the nav links below the header and how to keep the links from switching to the menu icon?

Also, if the links can be added underneath, how do i make the links remain in sticky mode along with the logo, search box and 1st menu icon?

Thanks

July 8, 2017 at 11:01 am #346102

Hi there,

You can use the Secondary Navigation, and disable the mobile menu for it: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

As for making it sticky, you would have to do something like this:

@media (max-width: 768px) {
    .secondary-navigation {
        position: fixed;
        top: 50px; /* the height of your primary navigation/mobile header */
        width: 100%;
    }
}

July 8, 2017 at 10:17 pm #346260

Thanks Tom...it works great. appreciate it.

July 9, 2017 at 12:24 am #346294

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.