Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • July 31, 2017 at 8:23 pm #832392
    sdigit

    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:

    Make top bar sticky on mobile

    Mobile Menu Sticky Issue

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

    Thanks!
    D

    July 31, 2017 at 9:25 pm #832436
    Jordan Shannon

    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

    July 31, 2017 at 9:37 pm #832447
    sdigit

    Hi Jordan,

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

    Thanks for checking!
    D

    July 31, 2017 at 10:20 pm #832469
    Jordan Shannon

    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

    July 31, 2017 at 10:58 pm #832483
    sdigit

    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

    August 1, 2017 at 6:53 pm #833015
    sdigit

    Figured it out!

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

    Thanks again!
    D

    August 1, 2017 at 10:02 pm #833085
    Nikko

    Hi D,

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

    Best regards,
    Nikko

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Sticky Top Bar on Mobile’ is closed to new replies.