Archived topic

Custom unordered list items showing in nav menu

3 replies · Started by Shaun on November 25, 2019

Viewing posts 1–4 of 4

November 25, 2019 at 7:26 pm #1077272

I am building a WP site using GP Pro. It's a hobby not a commercial site, and I am trying to learn along the way. The site is live while I build it - https://scienceofpsychology.org/

I used some custom CSS as follows to replace the standard bullet with a Unicode symbol.

Custom CSS

However, the change caused the items in the nav menu to also show the Unicode symbol (see site link above). Is there an easy way to fix this? (other than me not using a Unicode symbol)

Thanks in advance
Shaun

November 26, 2019 at 4:33 am #1077722

Hi there,

couple of choices:

1. Make the CSS selector morre specific eg.

.sidebar ul li::before this will only effect lists in the sidebar.
.entry-content ul li::before this to apply only to the entry content of the post.

You can string the selectors together eg.

.sidebar ul li::before, .entry-content ul li::before {
    /* CSS Rules here */
}

2. Exclude the .menu class from your selector:

ul:not(.menu) li::before

This applies to all UL's unless they have a menu class

November 26, 2019 at 2:51 pm #1078695

Thanks David. It worked perfectly!

November 26, 2019 at 3:42 pm #1078759

You're welcome

This archived topic is closed to new replies.

Start building better websites today.