Hi there,
You need to add the following code to custom css of your child theme
@media only screen and (min-width: 960px) {
/* fixed nav */
.full-width.topbar-enabled #header {
padding-top: 50px;
}
.full-width #nav-topbar.nav-container {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 999;
}
.full-width.admin-bar #nav-topbar.nav-container {
top: 28px;
}
}
You can set the min width to 1025 px if you want the top bar to stick only in desktop.
Also, you need to disable boxed layout in customise->Global Settings->General Design options
Please close the thread if your query is resolved.
The topbar menu is sticky if you have Customize > Global settings > General Design Options > Boxed Layout disabled. If you want it sticky in the Boxed Layout, use the same plugin you mentioned and set the Sticky Element to #nav-topbar.
Thread Starter
AZBros
(@azbros)
I wanted to sticky the header menu, not the topbar. Is this possible in this theme? Also, just to verify, neither would be possible while in the boxed layout?
I don’t have to have either sticky, but I like the look of sites that allow the main menu bar (in my case, the header menu) to stick to the top while scrolling.
Thanks!
The plugin won’t have any affect in the “wide” mode because the theme already sets the topbar as sticky. In “Boxed” mode you can use the plugin and set the Sticky Element to “#nav-header” to make the main menu sticky.
Thread Starter
AZBros
(@azbros)
Hi bdbrown,
That’s what I did, but the menu then scrolls behind the widgets in my right sidebar (I only have the right sidebar enabled). Is there a way to have the menu scroll on top of the right sidebar widgets rather than become hidden behind them?
Thread Starter
AZBros
(@azbros)
I’m sorry, but that was a typo in the first post. I had originally input #nav-header (not #header.nav). The issues I mentioned above all occurred when I typed #nav-header into the plugin.
I apologize for the confusion.
I’m running it on a clean install of v3.1.3 and it works as you would expect. There must be some conflict with another plugin or some other customization that’s causing that behavior.
Thread Starter
AZBros
(@azbros)
Interesting. I’m not sure what might be causing the conflict. It goes behind a every widget in the sidebar, as well as the Social Media bar itself. I’ll try disabling some plugins and see if anything changes. I’d love to be able to sticky the header menu, but I can live without it. At this point, I’m more curious why it’s not working properly.
I’m not sure if it matters, but when I tried the above suggestions to sticky the topbar menu, it scrolled correctly in front of the widgets. It’s just something about the header menu I guess.
Have you tried setting the Z-index option in the plugin? Maybe use 99 to see if that makes any difference.
Thread Starter
AZBros
(@azbros)
That worked, bdbrown! Wow, I saw that option, but I guess I just didn’t understand how it worked. I could have sworn I tried it, but now I’m not sure. Oh well, I’m just happy you figured it out, thanks!
I hesitate to ask, but do you know if there’s a way to sticky the header image along with the header menu? I wasn’t sure if there was any piece of code that contained both elements (since this plugin can only sticky one element). Honestly, I’m not sure I’d even want to sticky both, but I was curious.
Again, thank you very much for your help, I really appreciate it!
if there’s a way to sticky the header image along with the header menu?
I gave this a quick test and it seemed to work:
1. Upgrade to the new version of the plugin.
2. Basic Settings > Sticky Element is #header.
3. Advanced Settings > Z-index is 99, Legacy mode is disabled
4. Add this to your custom css:
/* remove padding on sticky header */
#header.sticky-element-original {
padding-bottom: 0 !important;
}
/* replace padding on sidebars and content */
.sidebar, .content {
padding-top: 60px;
}
Thread Starter
AZBros
(@azbros)
Thanks for the above code bdbrown. I just tried it and it worked, but I’m curious, is there an easy way to only sticky the header banner image and the header menu, but not the topbar menu?
I’m considering going with just the header menu only, but I’m curious how the header image and header menu together (minus the topbar menu) might look. If it’s too complicated, don’t worry about it, though.
And once again, thank you very much for all your help, I really appreciate it!
Interesting. I have a test site running the same configuration and the menu items work fine. Don’t have the search option in the header menu so can’t check that.
Just saw your update. The short answer is no. The topbar is part of the header and, unless you carve it out and put it in a separate container, it will stay at the top with the rest of that section.
Thread Starter
AZBros
(@azbros)
Sorry about that, just changed the option to disable Legacy Mode and everything works properly now. I edited my above post, but I guess I didn’t get it up in time.
