Using Mobile Menu On Desktop Version

I am using Perth Pro and as the number of pages and links increase in the Nav Menu, I am finding that the Nav Menu now wraps onto a second line and looks terrible. I can widen the menu area, but that reduces the Logo size and creates a different appearance issue. I would like to use the Mobile Menu (Hamburg) style for the Desktop layout, so that all layout versions will be using the same Nav Menu. Could you provide me custom CSS or Javascript that I can add to make this happen.


Hello, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

#site-navigation {
  display: none;

.mobile-nav {
  display: block;
  width: 100%;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Thanks Roman, solved the problem. I have a couple of related questions taht I hope you can help me with.

  1. How can I make the thickness of the the three horizontal lines a bit less and also add a white border around them with a small radius of 5-7 px.
  2. When you click the menu and it expands, the expanded menu goes the entire width of the page. How can I have it be perhaps 200-240 px in width and open below the Hamburger Icon on the ride side of the page?

Thanks Roman

Hello, you are welcome!

Please create a separate topic for each of your additional issues to keep the forum in good order and make it easier to help you. I’ll close this topic to avoid confusion, hope for your understanding.

Kind Regards, Roman.
aThemes Support