Make topbar menu sticky

Did you already try going to Appearance > Menus, scrolling down to the bottom, and selecting Topbar instead of Header? Topbar should give you a sticky menu at the top by default.

No, I don’t think you understand what I mean by sticky.

Like this: https://demo.hongkiat.com/css-sticky-position/

Yes, like this, correct? That’s my sandbox site using Hueman, with the menu set to Topbar.

The topbar is fixed by default on any resolution above 1024px.

Here is the CSS:

@media only screen and (min-width: 1025px) {
	/* 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; }
}

Modify the mediaquery and lower the 1025px if you wish to have it fixed for lower res.

Really.. Must have fiddled too much with that css, because on my site, it isn’t.

https://merfotball.com/wordpress

The correct CSS is there, but for some reason, your body element isn’t getting assigned the full-width class, that’s the problem (I added the class interactively using Chrome Developer Tools and the top menu went sticky). I don’t know if it’s because you are running an old version of the theme, but if you do decide to upgrade, read this thread very carefully so you don’t lose your modifications. Alexander may be able to shed more light on your situation.

If you are running an older version of the theme, update the theme or remove the .full-width class as CrouchingBruin mentions:

@media only screen and (min-width: 1025px) {
	/* fixed nav */
	.topbar-enabled #header { padding-top: 50px; }
	#nav-topbar.nav-container { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }
	.admin-bar #nav-topbar.nav-container { top: 28px; }
}

Thank you so much for your response!

However, I am using the latest version of the theme, and this is what I’ve got on that css:

@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; }
}

Should I just remove this?

Edit: Tried removing it, with no effect

Any working link to the site again? I need to inspect the page with firebug to see what’s going on.

https://merfotball.com/wordpress

Thank you!

Getting a 404 error with that link, now.

Was getting a 404 there as well, until I force-refreshed.

1. I see that the css above is removed from style.css – it should be remain in style.css as it is the code that makes the topbar stick to top.

The theme sticks the topbar to top by default, so you could try just leaving style.css alone. Or if you want to stick it earlier for less width, change the value as above, from 1025px to 960px.

2. I see version 2.0.0, 2.0.2 is the latest. Might be a good idea to update to that while you are at it, as one important bug was sorted out.

Hi again.

The 404 can be related to us switching host atm. The page I was editing is just a “sandbox” for the new website.

Now, I’ve installed the newest theme. The modifications shouldn’t be a problem to apply now, but when I installed it, I noticed that it doesn’t fill the browsers width. Can anybody tell me why this happens?

https://merfotball.com

Did you try going to Theme Options > Styling, checking the box labeled Enable to use the options below, and sliding the slider under Website Max-width all the way to the right?

The problem was in my child theme, so it is resolved now ?? Thanks a lot for all your help people, amazing support!