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

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

Home Forums Support site-navigation always behaving like the sticky nav

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #780175
    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%);
    }

    #780283
    Leo
    Staff
    Customer Support

    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

    #781150
    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

    #781647
    Leo
    Staff
    Customer Support

    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?

    #781717
    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

    #781721
    Leo
    Staff
    Customer Support

    Have you checked out the header element suggestions above?

    Looks like it’s what you are after.

    #782224
    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.

    #782682
    Leo
    Staff
    Customer 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/

    #782828
    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.

    #783057
    Leo
    Staff
    Customer Support

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

    #783282
    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

    #783807
    Leo
    Staff
    Customer Support

    No problem 🙂

    Let me know if you need another look.

    #783974
    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?

    #783976
    Leo
    Staff
    Customer 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 -->.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.