- This topic has 25 replies, 2 voices, and was last updated 3 years, 6 months ago by Elvin.
-
AuthorPosts
-
September 23, 2020 at 5:36 pm #1456197angelarose
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 #1456199ElvinStaffCustomer SupportHi,
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.
September 23, 2020 at 5:46 pm #1456200angelaroseSeptember 23, 2020 at 6:09 pm #1456219ElvinStaffCustomer SupportYou’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.
September 23, 2020 at 6:21 pm #1456222angelaroseI 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 #1456227ElvinStaffCustomer SupportI 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.
September 23, 2020 at 6:36 pm #1456233angelaroseThanks, I added the site to the private info box. I had justt created the wordpress site today
September 23, 2020 at 6:41 pm #1456240ElvinStaffCustomer SupportThank 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; } }
September 23, 2020 at 6:55 pm #1456249angelaroseCOpy and pasted that code into the additional cms but it still stayed the same
September 23, 2020 at 7:02 pm #1456250ElvinStaffCustomer SupportI’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?
September 23, 2020 at 7:06 pm #1456255angelaroseyes! 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 #1456302ElvinStaffCustomer SupportOh 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; }
September 24, 2020 at 6:51 am #1456876angelaroseAwesome. 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 #1457512ElvinStaffCustomer SupportAwesome. 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.
September 24, 2020 at 12:31 pm #1457522angelarosesorry about that, i just set the mobile menu breakpoint to 6000
-
AuthorPosts
- You must be logged in to reply to this topic.