Change color of dots in Nav Menu

  • Resolved bordercollies2

    (@bordercollies2)


    8 years, 8 months ago

    I would like to change the color of the dots in between each menu item to something other than pink. I have changed the nav background color and the hover color, but I can’t put a finger on where the dot color is located. Any suggestion?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Sean Davis

    (@sdavis2702)

    8 years, 8 months ago

    Hi there,

    Those dots are put in place using CSS psuedo elements. You can use the following CSS to make adjustments:

    #site-navigation .nav-menu > li > a::after {
	color: red;
}
    Moderator Kathryn Presner

    (@zoonini)

    8 years, 8 months ago

    sdavis2702 is spot on – thanks, sdavis2702!

    bordercollies2 – when you make this tweak – replacing “red” with whatever colour code you prefer – just be sure not to edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated to the latest version.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

    Let us know how it goes.

    Thread Starter bordercollies2

    (@bordercollies2)

    8 years, 8 months ago

    Perfect! Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change color of dots in Nav Menu’ is closed to new replies.