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.

https://ibb.co/KsYKWXC !

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? This is what happened: https://ibb.co/qCb56XT

Thank 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.

Thanks, I added the site to the private info box. I had justt created the wordpress site today

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;
}
}

COpy and pasted that code into the additional cms but it still stayed the same

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?

yes! this is on my desktop view! in the left corner, there would be a hamburger icon, and when clicked the vertical menu would appear like the first screenshot I sent! and then you would click the exit button and it would go back to the hamburger menu! sorry for the confusion!

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!

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.

sorry about that, i just set the mobile menu breakpoint to 6000