Styling the Mobile Menu

  • jgbutler

    (@jgbutler)


    8 years ago

    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:

    https://www.motpicthistcrit.com/

    Thanks for any suggestions.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter jgbutler

    (@jgbutler)

    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

    (@siobhyb)

    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!

    Thread Starter jgbutler

    (@jgbutler)

    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

    (@siobhyb)

    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.