Need help? Check out our Support site, then


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

  1. 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.

  2. 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;
    }
  3. Thanks for the tips and code! You're so helpful, I appreciate it.

  4. That's what I'm here for. :)

Topic Closed

This topic has been closed to new replies.

About this Topic