[Resolved] Sticky navigation on top of full screen slideshow

Home Forums Support [Resolved] Sticky navigation on top of full screen slideshow

Home Forums Support Sticky navigation on top of full screen slideshow

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #758028
    Tony

    Hello.

    I’m trying to do the following:
    https://www.willpearson.co.uk/

    I have already followed the instructions below:
    https://generatepress.com/forums/topic/keep-menus-visable-with-scroll/#post-54453

    I have two issues:
    – My sticky menu won’t stick!
    – I’m forcing the Beaver Builder slideshow to cover the whole screen, by using a negative number as a top row margin. (-60). The side effect is that the logo and tagline are then hidden behind the slideshow.

    My login credentials are the same as for the resolved case below:
    #754481

    Thanks for your time.

    Chris.

    #758202
    Tony

    Hi again!

    I ‘ve made progress. My navigation is now sticky after setting the following:

    Customize > Layout > Sticky Navigation > ON

    The remaining issues are:

    – Logo and tagline are hidden behind the slideshow (or photo).

    – The default navigation background color is transparent. When I start scrolling down I would like to have a #hex color or image as a background, in other words, doing this:
    https://www.willpearson.co.uk/

    – After page load, when I scroll down, there is a tilt in the menu (note that there is also css in Customize > Additional CSS).

    Thanks.

    Chris.

    #758271
    Leo
    Staff
    Customer Support

    Hi there,

    Have you tried the exact steps here?
    https://docs.generatepress.com/article/navigation-as-a-header/#merge-with-header-elements

    Looks like it’s exactly what you needed.

    Let me know ๐Ÿ™‚

    #758835
    Tony

    Hi Leo.

    It is exactly what I need!
    I have already followed the instructions you sent me and changed it.
    There’s only one issue. I need the tagline below the logo and the following CSS which does that, doesn’t work anymore.

    Thanks.

    Chris.

    .inside-header {
    display: grid;
    grid-template-columns: 240px auto;
    }
    .site-logo {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0.3em;
    }
    .site-branding {
    grid-column: 1;
    grid-row: 2;
    }
    #site-navigation {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
    }

    .main-navigation .main-nav ul li a {
    padding-left: 5px;
    padding-right: 20px;
    line-height: 60px;
    }
    .main-navigation li {
    float: right;
    position: relative;
    }

    #758911
    Tony

    I have also tried, as an alternative, to put a tag below the logo using a Hook in Elements, but the after_logo hook only works for the normal logo and not for the sticky one…

    #759180
    Leo
    Staff
    Customer Support

    So you want to add tagline to navigation logo?

    If so try this method:
    https://generatepress.com/forums/topic/how-i-add-tagline-below-logo-in-primary-nav/#post-623313

    #759920
    Tony

    Hi Leo.

    I have put the code in functions.php.
    It’s (almost) working.

    I can see the tagline when I start to scroll down but I cannot see it when I’m at the top of the page.

    Thanks.

    Chris.

    #760256
    Tony

    Hi Leo.

    It worked! The problem was an Element I created yesterday as I was trying to place the tagline below the logo. I removed the Element and now everything is fine.

    Thanks very much for helping.

    Chris.

    #760408
    Leo
    Staff
    Customer Support

    No problem ๐Ÿ™‚

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