Docs

[bartenderonduty]

Hi Themeco Team,

I’m stuck on an issue and hoping you can help… I’ve built a site for a client using the X theme with the Icon stack. My client has asked me to add quite a few menu links, which I have done, however, now whenever the browser window is resized, the nav bar is dropping below the logo until the window is finally sized down enough to transition to the mobile view. Naturally whenever the menu drops below the logo, it makes the nav bar very tall.

Can you provide some guidance on editing the point the menu bar converts to the mobile view? I’m trying to prevent the full nav bar from falling below the logo.

Appreciate any help you can provide.

[Nico]

Hi There,

Thanks for writing in.

Would you mind sharing us a screenshot for the changes you want so that we could make it as our guide.

Thank you so much.

[bartenderonduty]

Hi Themeco Team,

Thanks for the quick reply.

Please see attached screenshots. Basically I’m trying to get the nav bar to transition to the mobile version (as shown in the fourth screenshot) well before it wraps to multiple lines.

Appreciate your help with this.

[Nabeel A]

Hi there,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 980px) and (max-width: 1280px) {
	.x-nav-wrap.desktop {
		display: none;
	}
	.x-btn-navbar, .x-btn-navbar.collapsed {
		font-size: 24px;
		display: block;
		width: 4%;
		float: right;
	}
}

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

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css("display", "none");
		}
		else{
			$('.x-nav-wrap.mobile').css("display", "block");
		}
	});
});

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

[bartenderonduty]

PERFECT.

Thank you very much, really appreciate your help with this!

[Paul R]

You’re welcome! 🙂

[Author]

Posts