Can You Change Mobile Menu Format?

Hi @WeAcceptCrypto,

This may get you close. The menu bars are visible for a second, and the X sits a little lower than Menu, but you can play around with those bits. Add this to Design > Custom CSS:

.burger-inner::before {
    content: 'Menu';
    width: 150%;
    height: 0px;
 }

 .burger-inner::after {
  height: 0px !important;
}

.burger-inner::before {
    content: 'Menu';
    width: 150%;
    height: 0px;
 }

 .burger--active .burger-inner::before {
content: 'X';  
   transform: none;
   width: 150%;
} 

Hi Christy, thank you so much! I had found a roundabout way to do it (was using "button" class rather than "burger-inner" class) but this looks way better. I added bold font and a border above the "Menu" button and I really like the way it looks. Adding the "X" when it opens is a great UX touch too so thank you for that!

If you have any idea how to add the Site Title to all pages above a certain screen width (I'm thinking 300px based on screen testing) or if there is a resource you could point me to it would be amazing! I've looked all over these forums and on the web generally and I can't find any way to include both the logo and site title with CSS which I think would look 1000x better than having just the logo.

Also if you accept cryptocurrency as payment let me know and I can list you on our site with a hyperlink!

On 2/11/2020 at 4:00 AM, christyprice said:

Hi @WeAcceptCrypto,

This may get you close. The menu bars are visible for a second, and the X sits a little lower than Menu, but you can play around with those bits. Add this to Design > Custom CSS:

 

You can also use class .burger-box,

.burger-inner: display none

.burger-box:after {menu} 😅

Much cleaner @tuanphan- thanks!

1 minute ago, christyprice said:

Much cleaner @tuanphan- thanks!

Today a client hired me to do this, and I thought I would use your code (thank for your code),

but then discovered that burger-boxes could use and find this code, too. 😅😅