[Resolved] Menu Help!

Hi,

The screenshot you’ve provided is not working. Can you upload it somewhere and link it here?

You can try using this to upload your images. https://imgbb.com/upload

Thanks.

You’ll need custom CSS for that.

You can try this CSS code.

@media (max-width: 768px){
.main-nav li > a {
   writing-mode: vertical-rl; 
   transform: rotate(-180deg);
   padding-bottom: 15px;
   padding-top: 15px;
}
}

Let us know if it works for you.

I copied and pasted that code in the “additional css” section after hitting customize on my wordpress. Would I have to input it elsewhere?

That’s fine.

This is what happened: https://ibb.co/qCb56XT

If its possible, can you link me to the site? It’ll help a lot in identifying which selector to use for the CSS code.

You can provide the link to your site on the Private Information text box.

Thank you.

You can try this code.

@media (max-width: 768px){
.main-navigation .main-nav ul li a {
    writing-mode: vertical-rl;
    transform: rotate(-180deg);
    padding-bottom: 15px;
    padding-top: 15px;
}
}

I’m seeing it apply on my end.
https://share.getcloudapp.com/rRuopev4

Perhaps I’ve misunderstood what you’re trying to do. I was thinking you only wanted it on mobile.

To clarify, did you mean a vertical menu from hamburger for all viewports?

Oh alright. That needs more steps.

We first have to make the nav as hamburger on desktop.

To do that, go to Appearance > Customize > Layout > Primary Menu and set the Mobile Menu Breakpoint to 6000. Remove the menu label too so only the hamburger will display.

After that, you can set your colors on Appearance > Customize > Color > Primary Menu.

Once you’ve set your color, you can try this code:

.main-navigation .main-nav ul > li > a {
	width: max-content !important;
	writing-mode: vertical-rl; 
  transform: rotate(-180deg);
	padding-left: 0px;
  padding-right: 0px;
}

button.menu-toggle {
   flex-grow: 0 !important;
	width: auto;
	color: white;
	background-color: black;
}

button.menu-toggle:hover {
	color: white;
	background-color: black;
}

.main-nav{
	width: auto !important;
}

.main-nav > ul {
	width: max-content !important;
}

.main-nav > ul > li {
	width: max-content !important;
	margin-top: auto;
	margin-bottom: auto;
}

Awesome. THis is what changed: https://ibb.co/2tWgHS6. I’d like there to be a hamburger in that black box which drops down to the menu. Thanks for all the help!

As previously mentioned, go to Appearance > Customize > Layout > Primary Menu and set the Mobile Menu Breakpoint to 6000. Note: You may have to type 6000 on the value box.
https://share.getcloudapp.com/JrugkebD

This is important. This is what we need to set for the menu to turn into a hamburger toggle button.