CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

Add a dot to the left of the active menu item

I'm using a WordPress theme with a vertical navigation menu. I'd like to add a colored dot to the left of the active menu item like on the image below. How could I do that? Below is the CSS code controlling the active menu item.

.vertical_menu_toggle .second .inner ul li.current_page_item a {
}

enter image description here

Upvotes: 2

Views: 3630

Answers (2)

m4n0
m4n0

Reputation: 32275

Try using the CSS code below. Description in comments.

/* Set the disc and its color */
.vertical_menu_toggle .second .inner ul li.current_page_item {
  color: #D0021B;
  list-style-type: disc;
}
 
/* Remove the default underline */
.vertical_menu_toggle .second .inner ul li a {
  color: #CCC;
  text-decoration: none;
  font-weight: bold;
}

/* Remove the disc on other list elements */
.vertical_menu_toggle .second .inner ul li {
  list-style-type: none;
}
<h3>Art Works</h3>
<div class="vertical_menu_toggle">
  <div class="second">
    <div class="inner">
      <ul>
        <li><a href="">2010 to date</a>
        </li>
        <li class="current_page_item"><a href="">2000 to 2009</a>
        </li>
        <li><a href=" ">1990 to 1999</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 5

Ashesh
Ashesh

Reputation: 3599

Taking into consideration the extra classes in your case: .vertical_menu_toggle .second .inner which play no important role here.

  1. First I removed the default bullet points using list-style: none.
  2. Then I used the Unicode character "•" (U+2022:Bullet) as bullet point but in case of inactive list item, its visibility is set to hidden using visibility: hidden.

.vertical_menu_toggle .second .inner ul {
  list-style: none; /* hide default bullets for all list items*/
  padding: 0;
  margin: 0;
}

/*put red dot before all the active list items*/
.vertical_menu_toggle .second .inner ul li.current_page_item:before {
  content: "• "; /*don't miss the space*/
  color: red;
}

/*put dot but make it invisible before the inactive list items*/
.vertical_menu_toggle .second .inner ul li:not(.current_page_item):before {
  content: "• "; /*don't miss the space*/
  visibility: hidden;
}


/***extra***/
/*not absolutely important*/
h3 {
  font-family: Impact, sans-serif;
  font-size: 36px;
}
li {
  font-family: monospace;
  font-weight: bold;
  font-size: 24px;
}
.vertical_menu_toggle .second .inner ul li {
  padding-left: 1em;
  text-indent: -.7em;
}
<h3>Art Works</h3>
<div class="vertical_menu_toggle">
  <div class="second">
    <div class="inner">
      <ul>
        <li>2010 to date</li>
        <li class="current_page_item">2000 to 2009</li>
        <li>1990 to 1999</li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 4

Related Questions