Styling Custom Menus?

  • Resolved Gregory Gainsborough

    (@gregory-gainsborough)


    11 years, 11 months ago

    Hello, I’m in the process of making a theme and have been searching for support on styling the custom menus.

    I understand how the custom menus work in general. Also I’ve read this: wplift.com/wordpress-custom-menu-styling-advice-and-help
    … but can’t quite put it all together yet

    I’d like to:
    – understanding what default styling WP applies
    – override this styling with my own. For example, with ‘container_class’ => ‘mainmenu’

    .mainmenu {font-size:30px; color:blue;}
    works to change the font size, but not the color…

    .mainmenu .current_menu_item {color:#fff;}
    doesn’t do anything.

    Any idea what’s going on here?
    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    understanding what default styling WP applies

    WordPress doesn’t apply any default styling to dropdown menus of your website.

    override this styling with my own. For example:

    I assume you’re not making a theme from scratch then? Please state the theme you’re using.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    yes, I’m making a theme from scratch. Not concerned about the dropdowns here – just the styling of the basic elements.
    https://www.gregorygainsborough.org is the site I’m working on.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    .mainmenu .current_menu_item {color:#fff;}
    doesn’t do anything.

    Your HTML doesn’t include underscores in the current class.

    Open your website in Google Chrome.
    Right click the menu.
    Select ‘Inspect Element’.
    Behold the HTML.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    oh! duh. – vs _ … I had thought maybe it was something like that, thanks!

    how about this part:
    .mainmenu {font-size:30px; color:blue;}
    works to change the font size, but not the color…

    … also, is there documentation somewhere about what wp’s default styles are for wp_nav_menu? (I haven’t found it in the codex) There’s clearly some default styling (eg list-style, hover)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re not using specific-enough selectors
    https://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    smashing! yes this is a hole in my knowledge, thank you.

    how about those default styles? (and since we’re on the topic, what sort of specificity do default styles carry?… since they are not applied via a ‘regular’ stylesheet (ie: style.css is located in with header.php etc, but wherever these styles are coming from is somewhere else)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Sorry, I don’t understand which styles you’re referring to.

    Thread Starter Gregory Gainsborough

    (@gregory-gainsborough)

    ah – those were from my reset.css, sorry for the confusion.
    and thank you so much for your assistance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Styling Custom Menus?’ is closed to new replies.