[Support request] replace mobile menu icon with logo

Home Forums Support replace mobile menu icon with logo

  • This topic has 8 replies, 3 voices, and was last updated 2 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1379960
    Robin

    Hello again

    I would like to use a website’s logo (image file) INSTEAD of the hamburger icon that is the mobile menu icon.

    I have tried specifying content for button.menu-toggle but that didn’t work.

    In this screenshot, the logo I would like to use instead of the hamburger is on the left.

    Please advise… ! Thank you!

    #1379975
    Robin

    I entered this custom css:

    /* */
    .menu-toggle:before {
    content: url(“http://shiraf.sg-host.com/wp-content/uploads/2020/07/hamburger-logo.png”) !important; width: auto; display: inline-block; padding-top:12px;
    }

    .toggled .menu-toggle:before {
    content: (“http://shiraf.sg-host.com/wp-content/uploads/2020/07/hamburger-logo.png”) !important;
    }

    works fine! but now I would like the logo to display about half the size that it is displaying.

    possible? same URL as above

    thank you!

    #1379976
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like you did it?

    The menu opens when I click the big logo on the left:
    https://www.screencast.com/t/9t65V6co7

    #1380000
    Robin

    Yes! so far, so good.

    now I would like to know if there is a way to style the pop-out mobile menu.

    ? yes ?

    #1380504
    David
    Staff
    Customer Support

    Hi there,

    do you have an example of the style in mind ?

    #1381294
    Robin

    1. for the menu to pop up on the right, under the logo that shows and hides the menu

    2. to make the line spacing slightly less so that the menu takes up less vertical space

    #1381470
    David
    Staff
    Customer Support

    1. Try adding this CSS for the alignment:

    #site-navigation.toggled .main-nav>ul {
        max-width: 200px;
        margin-left: auto;
    }
    #site-navigation.toggled .main-nav li {
        text-align: right !important;
    }

    2. The Menu Item height can be adjusted in Customizer > Layout > Primary Navigation

    #1382490
    Robin

    Beautiful! Thank you! added a couple other tweaks…

    Now I have a different challenge. I’d like the background image to scale with the browser window, but if I just make the browser window shorter (pull it up from the bottom), the bottom part of the image goes away. This might be some setting I am using… ?

    Guess I should start a new thread, so I can post the URL?

    Thank you VERY much for the assist on that mobile menu.

    #1382694
    David
    Staff
    Customer Support

    You’re welcome.
    Yes a new topic would be best.

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