CODEWITHSUNDEEP
htmllistcss
inspirednz
inspirednz

Reputation: 5077

Hide dot on unordered list

I am trying to customise an unordered list, which is used of for the navigation menu on this site: http://chaine-charlotte.org/

You'll see there is a dot/disc between each menu item, running horizontally along the header. I'd like to remove the dot.

I don't have direct access to the CSS code (as far as I can ascertain) as it's a wordpress.com site (I've only ever dealt with wordpress.org self-hosted sites until now). Otherwise, I would post it.

Of course, I can inspect elements from the user/browser side, but so far I've failed to identify which CSS declaration is generating the dot/disc, and therefore which to apply one or both of the following to: 

list-style-type: none;
list-style-image: none;

Can someone please inspect the site from the front end, and kindly tell me which CSS property I should be customising with these declarations?

Thank you.

Upvotes: 0

Views: 3172

Answers (3)

agustin
agustin

Reputation: 2387

Explanation

It isn't a dot in the ul, that's why your code doesn't work. The anchors in the menu have a before selector, which insert a char (a dot) before each one.

Check this fiddle

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}
<q> That's how before and after work </q>

Check li > a:before

Solution

Add this to your CSS

.nav-menu > li > a::before {
  content: "";
}

Upvotes: 0

ketan
ketan

Reputation: 19341

Just add css:

.nav-menu > li > a::before {
    content: "";
}

Because following css is making the dot.

.nav-menu > li > a::before {
    color: #fff;
    content: " •";
    margin-right: 1em;
    opacity: 0.15;
}

Upvotes: 2

Felix A J
Felix A J

Reputation: 6480

It is from below css

.nav-menu > li > a:before {
 color: #fff;
 content: ' \2022';
 margin-right: 1em;
 opacity: .15;
}

Upvotes: 0

Related Questions