Support » Theme: Sunspot » Styling the Mobile Menu

  • I’m building a WordPress site using Sunspot and it’s looking great–except for the mobile menu.

    I’ve made a child theme, but I haven’t modified the styling of the menu. The issue is the display of the (list-based) main menu when at max-width: 480px. The list items are centered and the list’s dots are left-justified, which looks awkward.

    You can see it here:

    http://www.motpicthistcrit.com/

    Thanks for any suggestions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • UPDATE:

    Resolved the bullet issue with

    ul {
    	/* To get rid of list bullets in the mobile menu. */
    	list-style-type: none;
    }

    Still working on the alignment.

    Siobhan Bamber (siobhyb)

    (@siobhyb)

    Automattic Happiness Engineer

    Hi @jgbutler,

    Would you prefer the items to be centred on mobile? If so, the following custom CSS will do the trick:

    @media (max-width: 480px) {
        .main-navigation ul {
            text-align: center;
        }
    }

    Let me know if that helps out!

    Thanks for the suggestion, @siobhyb .

    I was actually trying to get rid of centering, not create it; but your post reminded me that what I needed to do was:

    @media (max-width: 480px) {
        .main-navigation ul {
            text-align: left;
        }
    }

    This worked like a charm!

    Siobhan Bamber (siobhyb)

    (@siobhyb)

    Automattic Happiness Engineer

    Perfect! I’m glad that helped you come up with the solution. 🙂

    We’re right here if you have any extra questions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Styling the Mobile Menu’ is closed to new replies.