How to change Mobile Menu Color to Website Color
M.Muzammil

How to change Mobile Menu Color to Website Color

By M.Muzammil | February 11, 2023

How to change Mobile Menu Color to Website Color

You may have seen most website uses this same technique to customize their technique when you visit any website that has its own costume template with forces your mobile nav bar color to be transformed into a website color that looks nice.

I also use the same technique to make my website do that on mobile devices if you are visiting this page on your mobile device then see it at the top of your mobile menu.

It is not so difficult you can easily do that with 3 to 4 lines of HTML code. Yes, we only need HTML code for doing this we don't need any CSS.

We will add 4 meta tags in our website's header section to do that and transform the mobile menu header color.

As I have told you in my previous articles I am a blogger user so I will tell you how you can add this to websites that use blogger CMS.

So Let's Start Adding this in blogger follow the steps provided below to do that.

  1. Go to Blogger Dashboard
  2. Go to Theme/Template Section
  3. Click Edit HTML
  4. Now Search for <head>
    5. To search anything in blogger template section press Ctrl+F and then type term to search and press enter.
  5. Copy the code provided below and paste it just after the starting header tag we found in step 4.
    6. <meta content='#69E781' name='theme-color'/>
<meta content='#69E781' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#69E781' name='apple-mobile-web-app-status-bar-style'/>
  6. Save Theme/Template

These are the meta tags that tell your mobile browser to transform the mobile nav menu. In the above Code, you have to change Highlighted color code to the color code of your website or blog.

After doing this you have to go and view your website it would be working fine if you followed all the steps as provided if you face any problem let me know in the comment section.

Conclusion:

I Hope that you like this post and your website looks amazing now after adding the functionality of transforming the mobile phone nav bar color.

If you want any other article related to the blogger of web design or development comment below. Now, Good Luck and have a nice day.

Tags :

Related Posts

M.Muzammil
M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Be The First To Comment