Sticky Navigation Menu expanding upon scrolling

Hi there,

I believe this is what you are looking to achieve:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know if this helps :)

I don't know if that's what I'm trying to achieve.

I don't want the logo and the navigation text to run off the edges of the header, which is what happens when I scroll up. Will floating the logo outside the container help eliminate this?

Thanks.

Using the method I suggested above should be better.

It's one of the most popular layout out there.

This is what the solution will achieve: http://gpsites.co/marketer/

Thanks Leo but I want sticky navigation, in the example link the navigation disappears.

Regards,
Shawn

The example link doesn't have sticky navigation activated - I'm just trying to show you the header navigation layout I linked above.

If you want sticky navigation as well, simply activate it:
https://docs.generatepress.com/article/sticky-navigation/

Ok, thanks.

No problem! Let me know if you need more tweaks to get to what you need :)

Leo,

I followed the steps in your links, the logo is now really small until I start to scroll down. The logo needs to be larger by default. I didn't change the size of the logo so I don't know why it's smaller now:

http://newsite.stroudassociates.com/

Regards,
Shawn

Hi there,

the navigation logo size is defined by the Customizer > Layout > Primary Navigation > Menu Item Height. Increase this and your logo will increase in size.

Thanks David, that helped.

The navigation menu on the right needs to move left so it's not running so close to the edge of the frame.

I added space to the logo via:
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 5%;
top: 0;
}

I tried adding space to the right of the navigation text via:
.main-navigation .main-nav ul{
position: absolute;
right: 5%;
top: 0;
}

When I did that, the navigation bar disappeared do I'm obviously doing something wrong. Please advise, thanks.

Can you remove both of those CSS rules and try this:

.inside-navigation {
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}

Perfect, thanks David.

You're welcome, glad we could help