[Resolved] Sticky TOP Bar with sticky header

Home Forums Support [Resolved] Sticky TOP Bar with sticky header

Home Forums Support Sticky TOP Bar with sticky header

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1671941
    Rostyslav

    Hello,

    I am trying to make a sticky top bar and I also have a sticky header. When I scroll down happens this: https://ibb.co/6NFv5Th
    https://ibb.co/GWxcgwm

    I am using an element>block>hook>generate_before_header (css class:barra-superior)

    In additional CSS this code:

    
    .barra-superior  {
       	position: -webkit-sticky;
        position: sticky;
        top: 0px;
    	  z-index: 9999;
    }
    #1672023
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS to move the sticky nav down the height of your barra-superior element:

    #sticky-navigation,
    #mobile-header.is_stuck {
      top: 33px !important;
    }
    /* adjust position when admin bar is shown */
    .admin-bar #sticky-navigation,
    .admin-bar #mobile-header.is_stuck {
      top: 66px !important;
    }

    If you alter the height of the bar – then you will need to adjust the top: 33px to suit. Likewise the second part of the code considers the admin bar height for when your logged in.

    #1672447
    Rostyslav

    Works! Thanks so much!

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