Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
WeAcceptCrypto

Can You Change Mobile Menu Format?

Question

Site URL: https://www.weacceptcryptocurrency.com/

I've been speaking with users of my site recently to see how I can improve it, and nearly all of them say that they didn't even recognize the mobile menu icon as a menu. SquareSpace uses a hamburger icon with two lines rather than three, and people don't seem to recognize this as a menu.

Would it be possible to replace the mobile hamburger menu with just the word "Menu"? I believe this would reduce bounce rate on my site significantly and improve user experience.

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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%;
} 

 

Edited by christyprice

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0
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} 😅

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post
  • 0
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. 😅😅


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

How to Setup Password & Share URL | 120+ SS 7.1 code

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...