[Support request] site-navigation always behaving like the sticky nav

[iSiteTV]

Hello, I’d like my nav bar to permanently behave like the sticky nav does. This is because I’d like to make better use of the ‘max-height’ elementor property for sections at the top of my posts/pages. Currently when I use this, it works but the user has to scroll down by the height of the nav bar before the content neatly fits within the screen. This means any text or links that are positioned at the bottom of the section are not visible until you scroll down.

It it possible to do this neatly using just CSS? or is it slightly more complicated?
I’ve tried this, but it’s clunky when scrolling back to the top of the page:

#site-navigation{
position: absolute;
left: 50%;
width:100%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}

[Leo]

Hi there,

I’m not exactly sure what you mean.

Does setting the transition to none help?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-transition

[iSiteTV]

Hi Leo, thank you for getting back to me.

This isn’t quite what I’m after. The main thing I want to achieve here is to have the page/post content start right at the top of the browser window so that I can use the ‘max-height’ property for sections at the top of the post/page without needing to scroll past the site-navigation to allow that content to properly fill the screen. Hope that makes sense.

I would still like the sticky nav to transition as it does. It’s smooth and suits the style of the site. I just don’t want it to ever occupy any space at the top of the page/post. Instead I’d like it to always sit over the top.

Thanks again

[Leo]

Sorry still not quite sure if I understand.

Would the full screen option in header element help?
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/transparent-header-and-navigation/
https://docs.generatepress.com/article/page-hero-examples/

If not any chance you can link me to an example?

[iSiteTV]

Hi Leo,

I understand this is a difficult one to explain.

here is an example post
https://isite.solutions/fujifilm-x-pro-2/

On initial page load, I don’t want the user to need to scroll down by 80px (the nav bar height) in order to have the header image completely fill the screen.

Instead I’d like the content to always start at the very top of the page, and have the nav bar layered over the top like it does once scrolled down.

Hope this is clear now.

Thanks

[Leo]

Have you checked out the header element suggestions above?

Looks like it’s what you are after.

[iSiteTV]

Yes, I did look at those. Looks like that would work, but does this mean I’d need to manually create a new header element for every one of my posts unless I use the featured image to generate the header image?

Currently the featured image is being used for post thumbnails and these differ from the header images. This is something I’d like to continue doing.

I would prefer to manage all of the post content within Elementor if possible.

[Leo]

Sounds like you want to merge the current content with the header?

If so you should be able to do this without adding a an image:
https://docs.generatepress.com/article/transparent-header-and-navigation/

[iSiteTV]

Yes that definitely looks like the solution I’m after.

Just experimenting with that now, but not able to get the navigation or site logo to appear. Also it doesn’t actually seem to be merging with the content. It’s just sitting on top.

[Leo]

I’m not seeing a header element on the home page?

[iSiteTV]

I was trying something out on a specific post so the changes were less visible. I’ll do a bit more research into the header elements and see if I can get something to work.

Thanks

[Leo]

No problem 🙂

Let me know if you need another look.

[iSiteTV]

Just a thought, is it not possible to just merge the standard generate press header (the one I’m currently using) with the content? I don’t see why it’s necessary to make a new header using the elements feature?

[Leo]

You can probably do it with CSS but why not using the built-in feature as it’s meant for it?

If you don’t want any header element content, you can also just insert <!-- HTML comment -->.

[Author]

Posts