Customizing Mobile Hamburger Menu - Color/size/text

Can you point me in the right direction on how to customize the hamburger menu on mobile?
After some user testing, I found that people are not noticing it.
I would like to

  1. make it pink (#d40086) - border and lines inside
  2. make it bigger
  3. add the word “MENU” inside the box under the hamburger lines

Can you please help?

My site is

Hey there

Please add this css:

.navbar-default .navbar-toggle {
border-color: #d40086;
.navbar-default .navbar-toggle .icon-bar {
background-color: #d40086;

p.s. unfortunately, word cannot be added :frowning:

Is there a way to use an image there instead? -
your method worked great to make it bigger and pink though :smiley:
Thank you!!!

Hi there,
Thanks for writing back.
In relation to your question here, In relation to your question here, I’m afraid that would entail a bit of custom work which is beyond the scope of our support. I would recommend on services form Envato Studio (

Please let us know if you have any more questions.
Best Regards,

Hi there!
I realized that I forgot to close this request out.
I appreciate your help. Changing the size of the menu on mobile seems to have worked. No complaints from users now, even though I think it looks funky :smiley:

I REALLY appreciate your help!

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews |