How to Style the Mobile Menu? (Rocked Theme)

rocked
#1

Hey guys, just had a quick question if someone could help?

How can i style hamburger menu on the “Rocked” theme?

Things I would like to change if possible:

  1. All the colours (including the hamburger icon itself)
  2. I would also like to to add the word “MENU” beside the hamburger menu icon if possible?

Thanks in advance for any help!
Martie

How to change dropdown menu colours in Rocked theme?
#2

Hi Martie,

Thank you for asking about our theme, Rocked. I am happy to help with your queries.

Please try adding ths CSS code to Appearance > Customize > Additional CSS from dashboard.

    .header .btn-menu {
      width: 108px;
    }

    .header #mainnav-mobi {
      background-color: #fff000;  
    }

    .header .btn-menu .fa,
    .header .btn-menu span,
    .header #mainnav-mobi ul > li a,
    .header #mainnav-mobi ul > li > a {
      color: #ff0000;
    }

and do your own color adjustments.

I hope that helps.

Regards,
Kharis
aThemes Support

#3

Thank you very much for your answers Kharis… Works perfectly!

Just 2 more things if you don’t mind?

  1. How could I add the word MENU beside the hamburger menu (with both being centred)
  2. How can I change the colour of the dropdown mobile menu background colour? (like behind the text)

Thanks again! :slightly_smiling_face:
Martie

#4

Hi Martie,

Thank you for trying the code.

  1. How could I add the word MENU beside the hamburger menu (with both being centred)
  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){
      $('.btn-menu').html('<i class="fa fa-bars"></i> <span>Menu</span>');
    })(jQuery);
  1. Update
  2. Then add this CSS code to your website’s Additional CSS.
   .btn-menu {
        width: 108px;
    }
  1. How can I change the colour of the dropdown mobile menu background colour? (like behind the text)

Try this CSS code:

    #mainnav-mobi {
      background-color: #fff000;
    }

Regards,
Kharis
aThemes Support

#5

Thank you very much Kharis, this worked perfectly!