[Support request] Nav Bar

[EJ]

Hi, how do I make my navbar look like this?

https://kinsta.com/

[David]

Hi there,

do you require the Search and Login items ?

[EJ]

I require the login item. I also want to add a button called Free Strategy Session to the right of the login item

[David]

First off – add the additional login and free strategy buttons to the nav.
Simplest way is to create a new Block Element:

https://docs.generatepress.com/article/block-element-overview/

Using the GenerateBlocks plugin you can add buttons ( with or without icons ).
Select the Hook: menu_bar_items to display them in that place.

Once they’re in place i can provide the CSS for that layout.

[EJ]

Okay, I added the login and free strategy buttons to the nav

[David]

Try adding this CSS:

@media(min-width: 1024px) {
    .nav-float-right #site-navigation {
        flex: 1;
    }

    #primary-menu {
        margin-left: auto;
        margin-right: auto;
    }
}

[EJ]

The navbar before scroll seems to be aligned more to the left, then on scroll its perfectly centered

[David]

Easiest solution would be to enable the Navigation as Header in Customizer > Layout > Header – then the transition between initial and sticky nav will be identical.

[Author]

Posts