Docs

[Jeypolitan]

Hi there!

I have a question regarding UberMenu’s Navbar.

I have my logo in the middle of the navbar, as seen in Screenshot 1.
As you can see on my page, the logo is not very visible and it blends in the middle of the navbar with the other pages (it is not very distinct).

In Screenshot 2, you can see an example from another blogger that her logo is very distinct, and is easily seen when accessing her page. Her logo does not blend in with her other pages in her navbar.

What can I do to make my logo more visible in my navbar?

Best,
J

[Jeypolitan]

This reply has been marked as private.

[Jade]

Hi J,

You can add this under Custom > CSS in the Customizer.

li#menu-item-95 a img {
    width: 100%;
    position: relative;
    top: -5px;
}

li#menu-item-95 a {
    padding-top: 15px;
    padding-bottom: 0;
}

Hope this helps.

[Jeypolitan]

Hi Jade,

That worked perfect, thank you so much!

I have another question. As you can see on my website now, when at the top of the website – there’s now two Jeypolitan logos.
What I would love, is if the logo in the Navbar would only be visible once scrolling down (so not visible when on top of the page).

An example of this is Huda Beauty. When seeing the top of her page, the “Huda Beauty” logo is only visible in the header. Once scrolling down, a Huda Beauty logo appears in the Navbar.

How can I do so my logo will only appear once scrolling down?
Please see screenshot 1 to see when I would like it not visible (when at the top of the page), and screenshot 2 to see when I would like it to be visible (once scrolling down from the header).

Please advise.
Best,
J

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	var navbar_logo = $('#menu-item-95');
	navbar_logo.hide();
	var x_logobar = $(".x-logobar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > x_logobar) {
			navbar_logo.show();
			$('.x-logobar').hide();
		} else {
			navbar_logo.hide();
			$('.x-logobar').show();
		}
	});
});

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

[Jeypolitan]

Hi Nabel,

Thank you so much for your answer and for the jQuery code – that is exactly how I wanted it! 🙂

Just one question – now when I insert the code, the page kind of “jumps” when scrolling to the top/bottom of the page. It doesn’t scroll smoothly anymore. How can I fix this, so when scrolling up or down from the top of the page, it will scroll smoothly and not jump (due to the logo change in Navbar)?

Please advise.

Best,
J

[Rad]

Hi there,

It’s not jumping on my view, but please try this

jQuery(document).ready(function($){
	var navbar_logo = $('#menu-item-95');
	navbar_logo.hide();
	var x_logobar = $(".x-logobar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > x_logobar) {
			navbar_logo.show();
			$('.x-logobar').stop().hide(700, 'swing');
		} else {
			navbar_logo.hide();
			$('.x-logobar').stop().show(700, 'swing');
		}
	});
});

That should at least create some easing effect 🙂

Cheers!

[Jeypolitan]

Hi Rad,

Ah that worked great – it doesn’t jump anymore! 🙂 Thank you very much!

Now with the new jQuery code, the header now has a slide-in effect. Due to this effect, it lags a little when scrolling up/down. How can I remove the lagging (small jumping/un-smooth scrolling) caused by the slide-in header?
If the slide-in effect gets removed, will it stop lagging maybe, and scroll smoothly?

Many thanks!

Best,
J

[Nabeel A]

Hi again,

Try replacing the previous code with this one:

jQuery(document).ready(function($){
	var navbar_logo = $('#menu-item-95');
	navbar_logo.hide();
	var x_logobar = $(".x-logobar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > x_logobar) {
			navbar_logo.show();
			$('.x-logobar').stop().hide(100);
		} else {
			navbar_logo.hide();
			$('.x-logobar').stop().show(100);
		}
	});
});

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

[Jeypolitan]

Hi Nabeel,

Many thanks for your help – the lagging improved a little bit, however it still jumps/lags which makes the page feel a bit uncomfortable. When scrolling down a small amount, the website “jumps” even further down. The same when scrolling up. Please see here or here or here for example of another website who has the same changes – that the logo appears only in the navbar when scrolling down, and in this website it scrolls very smoothly (not lagging like mine).

Please see here as an example of how much it jumps. When scrolling down, most of the “contact me” page disappears due to the lagging.

Please advise, as scrolling down the website is now not very smooth.
Many thanks! 🙂

Best,
J

[Nabeel A]

Hey J,

Thank you for the detailed writeup! I went ahead and changed the previously given code to this:

jQuery(document).ready(function($){
	var navbar_logo = $('#menu-item-95');
	navbar_logo.hide();
	var x_logobar = $(".x-logobar").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > x_logobar) {
			navbar_logo.show();
			$('.x-logobar').css('visibility', 'hidden');
		} else {
			navbar_logo.hide();
			$('.x-logobar').css('visibility', 'visible');
		}
	});
});

This seems to be working as expected. Please clear your browser’s cache and reload the site. Do let us know about this.

Cheers!

[Jeypolitan]

Hi Nabeel,

Thank you very much for the code – it worked perfectly!
The only issue is that somehow it has changed?
It used to scroll incredibly smoothly, however now when scrolling down, the text jumps down a little bit?

The menu bar used to be centralised before and after scrolling. Now before scrolling, the navbar text is further up than central (maybe margins?). And then after scrolling down, the navbar text jumps a bit further down than central (again, margins?).

How do I fix this please?
Please advise 🙂

Best,
J

[Rad]

Hi there,

The fix for jumping is to add slide effect, that will add smoother effect. And to remove the scroll effect, you’ll have to remove the smooth effect and go back to jumping effect.

Switching between elements with different sizes will always cause jumping. This time, masthead height changes. And you can’t have both. Unless you’re going to change the overall structure through customization but that something we can’t cover. Does the scrolling issue is more visible than jumping?

Thanks!

[Jeypolitan]

Hi Rad,

Many thanks for your clarification, your explanation makes sense.
No problem then, I shall keep it with the smooth scroll effect 🙂

Thank you!

Best,
J

[Paul R]

You’re welcome! 🙂

[Author]

Posts