Change the Menu button for mobile to a different color

  • Resolved gt14199

    (@gt14199)


    8 years, 11 months ago

    Here is the link to my website: https://www.splashsquadwindows.com/

    Everything is fine on the desktop version. It’s when I go to the mobile version I have problems. The menu button is white, as is the menu background. You can’t see the menu button on mobile. I need to keep the background white to keep with the theme of my site, but I’d like to change the menu button color to #124a60. None of the color options in Sydney are letting me do that, and I tried all of them. Is there a different way to do it?

    On the iPad version of the site, there isn’t even a menu button. I figured it was just white there as well, but I clicked around the whole top menu bar and there isn’t even a button to click. What’s the deal there?

    Bonus question: Is there a way to increase the padding between the top of my menu items and the top of the screen on the desktop site? If you visit the site, you’ll see that the menu options are very high on the menu bar. Can I change that?

    I appreciate any help you can give!

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hey!

    Paste this code on your css file or plugin:

    .btn-menu{color:blue;}

    Change blue to your color of choice.

    For your menu:

    .ul#menu-menu.menu{margin-top:30px;}

    Let me know if it works ??

    Ps: Nice site!

    Thread Starter gt14199

    (@gt14199)

    Thank you so much! The mobile menu button did turn blue, that’s awesome. The menu padding didn’t actually seem to change though… Not sure what the problem is there.

    The blue button also fixed the problem I was having on the iPad, so thanks again for that. Looks like the padding is the only major problem I have left.

    One other question if you have any suggestions. The Social media buttons in the footer are from a plugin. Do you know of a way to make the spacing in the footer… idk, better? It made the footer huge, when it really didn’t need to expand it much for such a small section of social media icons…

    I appreciate the help!

    To add more spaces between the menu and the top of the screen, try to apply the following CSS code: 

    #mainnav{
  margin-top: 30px;
}

    To reduce the spaces in the footer, try to apply the following: 

    .footer-widgets{
  padding-bottom: 0;
}

.footer-widgets .widget{
  margin-bottom: 0;
}

    Regards,
    Kharis

    Thread Starter gt14199

    (@gt14199)

    Kharis, you’re the man. Thank you, that fixed both issues!

    hi,
    when i try to browse my website on the mobile the menu doesn’t show?
    anyone can me help me?

    thanks in advance

    Hello @jhep1878,

    If possible, please share your URL here so I can have a closer look.

    eleganteventsmedia.com

    Hi jhep,

    the .site-header class in mobile is #ffffff and the menu button is also #ffffff hence you cannot see it. Change the color of the site header.

    Hi @jhep1878,

    Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css? 

    .btn-menu{
  color: #D63737;
}

    You would adjust the hex color to meet your need.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Change the Menu button for mobile to a different color’ is closed to new replies.