[Resolved] Menu Help!

Home Forums Support [Resolved] Menu Help!

Home Forums Support Menu Help!

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #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 🙂

    #1456199
    Elvin
    Staff
    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?"

    #1456200
    angelarose
    #1456219
    Elvin
    Staff
    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?"

    #1456222
    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!

    #1456227
    Elvin
    Staff
    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?"

    #1456233
    angelarose

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

    #1456240
    Elvin
    Staff
    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?"

    #1456249
    angelarose

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

    #1456250
    Elvin
    Staff
    Customer Support

    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?"

    #1456255
    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!

    #1456302
    Elvin
    Staff
    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?"

    #1456876
    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!

    #1457512
    Elvin
    Staff
    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/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?"

    #1457522
    angelarose

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

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.