[Resolved] Menu to a burger icon breakpoint customization, and positioning the icon

[Max]

Hi Tom and Leo,

I have a question regarding a customization of a max-width of a website when a regular menu collapses to a burger icon and setting up a location of this icon on the page. Sadly, I am not a coder and maybe my issue is something that can be easily resolved with some code knowledge.

I went through another help topic where I found a css-code that you posted: https://gist.github.com/generatepress/c23aef2d05807c39bb32. The code works well and I was able to change the max-width setting but I would like to change the position of the burger icon to the top right corner where the mobile menu icon is placed at the smaller screen size.

Could you please help me change the css to relocate the burger icon to the desired position?

Please find a link to my temporary domain where I am constructing the website in “Your website URL” field. Everything is in Cyrillic but I think that you will notice the issue when you will try to resize the window to make it narrower.

Thank you!

Kind regards,
Max

[Tom]

I would use the mobile header instead: https://docs.generatepress.com/article/mobile-header/

Then you can use this code to make it initiate at a higher width:

@media( max-width: 1000px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}

	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}
}

[Max]

Hi Tom,

Thank you for your reply. I have tried to mess around with your code and the mobile header and while I get the mobile header look and the mobile header logo at a breakpoint specified in the code, the menu does not collapse to the burger icon until the screen reaches a default tablet width.

I liked the way my site looked like before using the mobile header as I used a Page Header module and had a transparent background under my menu as well as consistent logo throughout the regular and mobile versions of the site.

I am back at a starting point and I once more have to kindly ask you to help me to relocate the burger icon from center to right top corner using the css from the link in my initial post or another code that can do the trick.

Thank you!

Regards,
Max

[Tom]

Hi Max,

Did you get this working? Here’s what I’m seeing: https://www.screencast.com/t/rVH62Rxcf

[Max]

Hi Tom,

Sadly, not yet. I removed the initial css yesterday before trying the mobile header and did not paste it back – sorry for confusing you.

Now it’s back in the Simple CSS and running.

Here how the page looks like at 1144px: https://www.screencast.com/t/0zGQvwUf

Here – at 970px: https://www.screencast.com/t/yFbkL2UFmyz

Here – at 765px (the burger icon is in the desired position here): https://www.screencast.com/t/70KXEShnZU

So this is how the site is looking at the moment with the initial css code on. As you can see on the first two screenshots, the burger icon is in the centre of the screen and below the site’s logo, while I would like it to be in the top right corner.

[Tom]

You should be able to just do this:

button.menu-toggle {
    width: auto;
    float: right;
}

[Max]

Hi Tom,

Thank you very much! I added this short code and now everything is perfect.

Thank you for a great support! Best of luck in all life has to offer you!

Best regards,
Max

[Tom]

Thank you! Glad I could help 🙂

[Author]

Posts