replace mobile menu icon with logo

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!

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

Yes! so far, so good.

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

? yes ?

Hi there,

do you have an example of the style in mind ?

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

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

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.

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