- This topic has 25 replies, 2 voices, and was last updated 3 months, 3 weeks ago by
Elvin.
-
AuthorPosts
-
September 23, 2020 at 5:36 pm #1456197
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 🙂September 23, 2020 at 5:45 pm #1456199Elvin Customer Support
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?"September 23, 2020 at 5:46 pm #1456200angelarose
September 23, 2020 at 6:09 pm #1456219Elvin Customer Support
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?"September 23, 2020 at 6:21 pm #1456222angelarose
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!
September 23, 2020 at 6:28 pm #1456227Elvin Customer Support
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?"September 23, 2020 at 6:36 pm #1456233angelarose
Thanks, I added the site to the private info box. I had justt created the wordpress site today
September 23, 2020 at 6:41 pm #1456240Elvin Customer Support
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?"September 23, 2020 at 6:55 pm #1456249angelarose
COpy and pasted that code into the additional cms but it still stayed the same
September 23, 2020 at 7:02 pm #1456250Elvin Customer Support
I’m seeing it apply on my end.
https://share.getcloudapp.com/rRuopev4Perhaps 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?"September 23, 2020 at 7:06 pm #1456255angelarose
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!
September 23, 2020 at 8:07 pm #1456302Elvin Customer Support
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?"September 24, 2020 at 6:51 am #1456876angelarose
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!
September 24, 2020 at 12:18 pm #1457512Elvin Customer Support
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/JrugkebDThis 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?"September 24, 2020 at 12:31 pm #1457522angelarose
sorry about that, i just set the mobile menu breakpoint to 6000
-
AuthorPosts
- You must be logged in to reply to this topic.