Menu Help!

[angelarose]

Hi!
I need help in creating a vertical menu that comes down when you click on hamburger icon like this: file:///Users/Ang/Downloads/Screen%20Shot%202020-09-23%20at%205.33.13.html. Thank you 🙂

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

https://ibb.co/KsYKWXC !

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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!

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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

[Elvin]

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?

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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!

[Elvin]

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

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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!

[Elvin]

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.

A wise man once said:
"Have you cleared your cache?"

[angelarose]

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

[Author]

Posts