Docs

[Bark201]

I would like to change the position of the menu from the left to the right on mobile devices and tablets. I am using a logo so I want the menu to be before the logo on the left. I would also need to change the height of the hamburger menu on mobile devices and tablets so it will have the same height as the logo.

Im assuming this can be achieved via CSS, please help.

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Bark201]

This reply has been marked as private.

[Bark201]

Sorry, I made a mistake. I meant I want the mobile menu to shift from the right to the left. Its showing on the right side by default, I want it to be on the left in front of the logo.

[Paul R]

Hi,

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

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
    position: absolute;
    display: block;
    float: left;
    margin-top: 35px;
}

.x-brand {
    margin-left:50px;
}
}

Hope that helps.

[Bark201]

Thank you, I will try it soon. Which part of the CSS controls the size of the hamburger menu? Mainly the height.

[Christopher]

Hi there,

Please adjust mobile button size under Customize -> Header -> Mobile Navbar Button Size.

Hope it helps.

[Bark201]

Thank you, I will try the CSS soon and let you know how it went.

[Christopher]

You’re welcome.

[Bark201]

I tested it and looks like its working, thank you.

[Lely]

You’re welcome!

Cheers!

[Bark201]

Hi, I am not opening a new topic for this. I also want to have the hamburger menu on browsers below 1366 width including desktops. When I changed the CSS to 1360px the hamburger menu shows but the with the nav menu as well. How do I get to hamburger menu to display on browsers with width below 1366px and make the actual nav menu hidden so it will just be the the hamburger menu showing?

I hope I am making sense.

[Bark201]

This reply has been marked as private.

[Bark201]

Aslo, one more thing on the CSS itself, when the page is scrolled down on mobile devices the logo is fixed, which is great. But when the page is scrolled back up the logo hides some of the content inside the page (the title). Do I need to change the margin top 35px to fix it or do I need to do something else?

You can see it by changing the browser size. Go to any page besides the homepage. My url is already linked in this topic in private.

Do not share my url in public or take screenshots in public, only private.

[Nabeel A]

Hi again,

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

@media screen and (min-width: 980px) and (max-width: 1366px) {
	.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(){
		$(".x-nav-wrap.mobile").toggle();
	});
});

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

[Author]

Posts