Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #832392

    Hello wonderful Enfold people!

    I’d like to make just my site’s top bar sticky on mobile.
    Not the header (where the logo goes). JUST the top bar (where the social icons go).

    I found these two threads, but they seem to solve this problem for the header:

    Does anyone know how to modify this solution for just the top bar?

    Thanks!
    D

    #832436

    Hey sdigit,

    Would you be able to provide a link to the site in question. It would help if we could inspect the page.

    Best regards,
    Jordan Shannon

    #832447

    Hi Jordan,

    I’ve put the URL in the private info below.

    Thanks for checking!
    D

    #832469

    Hi,

    I adjusted the css from the links you provided. Add the following to quick css:

    .html_header_top.html_header_sticky #header_meta {
        position: fixed !important;
        width:100%
       
    }
    
    #advanced_menu_toggle, #advanced_menu_hide {
    	position: absolute !important;
    	right: 0;
    }
    
    #advanced_menu_toggle {
      top: 45%;
    }
    
    #advanced_menu_hide {
      top: 10%;
      right: 10px;
    }

    Best regards,
    Jordan Shannon

    #832483

    Hi Jordan,

    Wow! Many thanks for the code – I’ve put it in the sub 767px media query.

    It works – but now the top bar partially overlaps the header, so the logo is partially hidden by the top bar.

    Is there a way to push the header down so it is not hidden by the sticky top bar?

    Thanks again!
    D

    #833015

    Figured it out!

    @media only screen and (max-width: 767px) {
    #header_main {padding-top:40px !important}
    }

    Thanks again!
    D

    #833085

    Hi D,

    Glad that you figured it out. Thanks for using Enfold :)

    Best regards,
    Nikko

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Sticky Top Bar on Mobile’ is closed to new replies.