How do I change colors on the Mobile version of the main menu?

  • Author
    Posts
  • #1697862

    I need to change the styling of the collapsible menu that appears on the mobile version of the website (e.g change the background color from blue to black, and change the fonts to bold).

    Because I can’t get to the source code of the mobile version I cannot figure out what CSS classes or IDs I need to overwrite. Can you assist?

    The blog I need help with is crossfitmuswellbrook.com.

    #1697959

    Because I can’t get to the source code of the mobile version I cannot figure out what CSS classes or IDs I need to overwrite.

    You can see CSS for the mobile theme on your laptop or desktop by going to Safari Preferences > Advanced and checking the “Show Develop menu in menu bar” and then going to Develop > User Agent > iPhone. From there, open the site in Safari and right-click the menu and select the “Inspect Element” option. Then you will be able to see the mobile HTML and CSS just like you can for any other site.

    When you write CSS for the mobile theme, you should do two things. First, check the “On Mobile” option in the Appearance > Customize > CSS panel and also prefix your selectors with “.mobile-theme” to target just that theme.

    change the background color from blue to black, and change the fonts to bold

    Here is a CSS example to get you started:

    .mobile-theme .menu-search {
    	background: #000;
    	-webkit-box-shadow: inset 0 -1px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.4);
    	-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.4);
    	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    
    .mobile-theme #access {
    	font-weight: bold;
    }
    #1697974

    Thanks for the tips and code! You’re so helpful, I appreciate it.

    #1698039

    That’s what I’m here for. :)

The topic ‘How do I change colors on the Mobile version of the main menu?’ is closed to new replies.