Fix Top Bar

Support
#1

Hi there,

I’m building this site: http://mymaddogs.co.uk/ and I’m trying to fix the top bar menu so it remains on the page at all times.

I tried this:

.x-topbar {
position: fixed;
width: 100%;
height: 10px !important;
}
.x-navbar, .x-navbar-fixed-top {
top: 46px !important;
}

But it does weird things to the layout of the logo and the navbar menu, and it’s also transparent on mobile so looks a mess.

Can you please help me? I’ll post the login details in the below.
Thanks a lot.
Cheers!
Matt

#2

Hi there,

Thanks for writing around! To make the topbar sticky, please add the following script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function sticky_relocate() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('.x-topbar').outerHeight() + jQuery('.x-logobar').outerHeight();
    if (window_top > div_top) {
        jQuery('.x-topbar').addClass('stick');
    } else {
        jQuery('.x-topbar').removeClass('stick');
    }
}
(function($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
})(jQuery);

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 980px) {
	.x-topbar.stick {
		margin-top: 0 !important;
		position: fixed;
		top: 0 !important;
		z-index: 10000;
		width: 100%;
	}
	.x-navbar.x-navbar-fixed-top {
		top: 74px !important;
	}
	.admin-bar .x-topbar.stick {
		top: 32px !important;
	}
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#3

Hi there,

Thanks for the code. So there are a few issues with it as it is:

  1. The topbar disappears until the navbar scrolls underneath it, then it jumps into place — it’s a bit clunky, can it just stay fixed at the top at all times?
  2. Nothing has changed on mobile — I’d like to keep the topbar fixed at the top on mobile too.
  3. When you click on the topbar menu items, the scroll targets partially disappear underneath the navbar — how can I offset this?

Thanks a lot for your help.
Cheers!
Matt

#4

Hi Matt,

Unfortunately, your site is down at the moment.


In the meantime, try the solution I provided here instead.

Cheers!

#5

Hi there,

Thanks for that, but it didn’t solve my problem so I’ve changed tact a little. I’ve moved the navbar and logo into a sidebar (and stripped out all the above code I’d put in). So all I want to do now is:

  1. Fix the topbar in place on both desktop and mobile so it never moves.

Thanks for your help, much appreciated.
Cheers!
Matt

#6

Hi again,

Please try adding the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-topbar {
	margin-top: 0 !important;
	position: fixed;
	top: 0 !important;
	z-index: 10000;
	width: 100%;
}
.admin-bar .x-topbar {
	top: 32px !important;
}

@media screen and (max-width: 980px) {
	.x-navbar {
		top: 40px !important;
	}
	.admin-bar .x-topbar {
		top: 0 !important;
	}
}

Let us know how this goes!

#7

Hi there,

Brilliant thank you, almost there. So there are a couple of issues — can you help again please?

  1. On desktop only, when you click a menu item in the top bar, and the menu scrolls, part of the top of the target headline (eg. SALADS, MAINS etc) appears underneath the topbar — can this be fixed so they appear without being obscured?

  2. On mobile there appears to be an additional box above the topbar — can this be removed?

  3. How can I move the topbar menu items down a few pixels, and reduce the height of the topbar too?

Thanks very much for your continued help, much appreciated.
Cheers!
Matt

#8

Hello There,

Thanks for updating in!

1.) Instead of added the ID to the text element, please remove it and add it in the section. The section should holds the ID and to align it, please add a top padding of the section to at least of the same height of the topbar.

  • I went ahead and edited the page. I removed the salads ID from your text headline and move it to the section. I added a top padding of 3em and that is just a right fit. Please check the site now.

2.) This is because you inserted an incorrect html code. The topbar content is already wrapped with <p> tag. You will have to remove your p tag in code.

<span align="center" style="padding-top: 5px; padding-bottom: 5px;"><a href="http://mymaddogs.co.uk/menu/#mains" title="Mains">MAINS</a> • <a href="http://mymaddogs.co.uk/menu/#salads" title="Salads">SALADS</a> • <a href="http://mymaddogs.co.uk/menu/#sides" title="Sides">SIDES</a> • <a href="http://mymaddogs.co.uk/menu/#appetisers" title="Appetisers">APPETISERS</a> • <a href="http://mymaddogs.co.uk/menu/#pups" title="Pups">PUPS</a> • <a href="http://mymaddogs.co.uk/menu/#desserts" title="Desserts">DESSERTS</a> • <a href="http://mymaddogs.co.uk/menu/#softdrinks" title="Soft Drinks">SOFT DRINKS</a> • <a href="http://mymaddogs.co.uk/menu/#wine" title="Wine">WINE</a> • <a href="http://mymaddogs.co.uk/menu/#beer" title="Beer">BEER</a></span>
  • I went ahead and already fixed it.

3.) The topbar height can be reduce by adjusting the amoung of top and bottom padding in the code in #1.

Hope this helps.

#9

RueNel, thank you so much for your help, that’s all brilliant and works a treat.

Can I ask one more thing please? How can I insert a gap of 30px above the blog posts on the blog post page (called News on this site)?
Thanks as ever.
Cheers!
Matt

#10

Hi Matt,

Please also add this custom CSS:

.blog .x-container.offset-bottom {
    margin-top: 30px;
}

Hope it helps :slight_smile:

#11

Awesome, thanks a lot, as ever.
Cheers!
Matt

#12

You’re welcome!
Thanks for letting us know that it has worked for you.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.