[Resolved] How to keep "Top Bar" sticky as the "Navigation Bar"?

Home Forums Support [Resolved] How to keep "Top Bar" sticky as the "Navigation Bar"?

Home Forums Support How to keep "Top Bar" sticky as the "Navigation Bar"?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #692115
    Walter Schwarz

    Site “https://www.drwjs.eu”.

    Scrolling down the navigation moves up and stays sticky. That’s what I want.
    The “Top Bar” disappears thereby. That I do not want.
    I would like to keep the “Top Bar” always visible above the “Navigation Bar”.
    The problem seems to be that the “Top Bar” is inner part of the moving container (?) when scrolling.
    I did need succeed to fix it.

    Any hints?
    Thank you,
    Walter

    #692215
    David
    Staff
    Customer Support

    Hi there,

    could you disable the sticky navigation, so i can provide the CSS that would be required to make this work

    #692225
    Walter Schwarz

    Hi David,

    just finished.

    #692247
    David
    Staff
    Customer Support

    Hi there,

    add this CSS, note that the #site-navigation top position needs to reflect the height of the top bar, currently that is 21px.

    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #site-navigation {
        position: -webkit-sticky;
        position: sticky;
        top: 21px; /* This is the height of the top bar */
    }
    #692672
    Walter Schwarz

    Hi David,

    thank you so much – it works as expected in Firefox, Chrome and Opera.
    IE still slides to top bar into the nirwana … But that does not bother me.

    #692874
    David
    Staff
    Customer Support

    Glad i could be of help πŸ™‚

    #1052365
    Kim

    Hi,

    Could you please help me out?

    I am trying to get both top bar and header sticky. So not only the header. When I enable ‘Sticky Navigation’ I only get a sticky header. So I disabled the sticky navigation and copied the CSS below (after reading support options on this forum) but unfortunately it doesn’t work. Same with any other options I tried.

    I hope you can assist! Much appreciated!

    Thanks,
    Kim

    .top-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 99;
    }
    #site-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 21px; /* This is the height of the top bar */
    }

    #1052372
    Leo
    Staff
    Customer Support

    Any chance you can link me to the site in question with the CSS applied?

    #1052388
    Kim

    Hi Leo,

    I read it in David’s (customer support) comment on this page. Dated October 3, 2018 at 3:31 am.
    Do you have an alternative way for me how to get both header AND top bar sticky?

    Thanks so much!!

    #1052436
    Leo
    Staff
    Customer Support

    David’s way should work so we need to see your site with the code applied to see why it isn’t working.

    Can you link us to it?

    Feel free to open a new topic so you can use the private URL field as well.

    Let me know πŸ™‚

    #1052441
    Kim

    Thank you Leo! I will open a new topic now to use the private URL field.

    #1052519
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.