- This topic has 13 replies, 2 voices, and was last updated 4 years, 4 months ago by Leo.
January 12, 2019 at 11:38 am #780175iSiteTV
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:
}January 12, 2019 at 3:48 pm #780283LeoStaffCustomer Support
I’m not exactly sure what you mean.
Does setting the transition to none help?
https://docs.generatepress.com/article/sticky-navigation/#sticky-navigation-transitionJanuary 14, 2019 at 1:01 am #781150iSiteTV
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 againJanuary 14, 2019 at 8:50 am #781647LeoStaffCustomer Support
Sorry still not quite sure if I understand.
Would the full screen option in header element help?
If not any chance you can link me to an example?January 14, 2019 at 10:14 am #781717iSiteTV
I understand this is a difficult one to explain.
here is an example post
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.
ThanksJanuary 14, 2019 at 10:16 am #781721LeoStaffCustomer Support
Have you checked out the header element suggestions above?
Looks like it’s what you are after.January 15, 2019 at 12:52 am #782224iSiteTV
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.January 15, 2019 at 8:15 am #782682LeoStaffCustomer Support
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/January 15, 2019 at 10:47 am #782828iSiteTV
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.January 15, 2019 at 3:08 pm #783057LeoStaffCustomer Support
I’m not seeing a header element on the home page?January 16, 2019 at 1:00 am #783282iSiteTV
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.
ThanksJanuary 16, 2019 at 9:09 am #783807LeoStaffCustomer Support
No problem 🙂
Let me know if you need another look.January 16, 2019 at 11:44 am #783974iSiteTV
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?January 16, 2019 at 11:46 am #783976LeoStaffCustomer Support
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 -->.
- You must be logged in to reply to this topic.