Sticky #top-bar?

[WEswift]

How would I make the #top-bar “sticky” and stay fixed above the main menu navigation when the page is scrolled down? (By #top-bar I’m referring to the optional area that can contain social icon links.) Would such an edit require a child theme? Thanks in advance!

[Mohammad – SUPPORT]

Hi,
Please go to Admin -> Theme Options -> Custom CSS => Here put this code and update options

#top-bar {
position: fixed;
padding: 0 30px;
}
#header-section {
padding-top: 80px;
}

It will work fine as i tested
Thanks

With Best Regards
Swift Ideas

[WEswift]

Since I’m also using a sticky #header the top gets set dynamically (by js?) while scrolling. Currently this is 28px. This hides the #header contents beneath #top-bar. In order to remedy this I’ve also done the following:

#header-sticky-wrapper { padding-top: 35px; background: white; height: 155px !important;}
#header.sticky-header { top: auto !important; }

Will this negatively impact responsiveness? I’m not sure if it’s related, but when I utilize the Responsive Design View and set the dimensions at 360×640, the drop down menu links don’t all appear. See attached screenshot. Thoughts?

Thanks!

[Mohammad – SUPPORT]

Hi,
Please share your live site URL so i can look in to this matter to resolve .
Thanks
With Best Regards
Swift Ideas

[WEswift]

Hey, thanks for the help!

Here is a test page on our preview site: http://clients.werremeyer.com/stPeters/about-us-2/

[Mohammad – SUPPORT]

Hi,
yes you are right . Please hide it at responsive mode .
@media only screen and (max-width: 479px) {
#top-bar{display:none}
}