CODEWITHSUNDEEP
htmlcss
Tom
Tom

Reputation: 1628

Edit CSS menu, remove element from specific options

I'm looking at this CSS menu https://codepen.io/StephenScaff/pen/bVbEbJ and it seems to do what I want apart from the '>' image/icon at the end of each menu option.

Is there a way to only show this image/icon if there is a submenu/flyout ?

I've worked it it is being added using

.sidebar-nav>ul>li>a:after {
  content: "";
  font-family: ionicons;
  font-size: 0.5em;
  width: 10px;
  color: #fff;
  position: absolute;
  right: 0.75em;
  top: 45%;
}

But I don't know how to only apply that to the menu entries with sub entries.

Thanks

Upvotes: 0

Views: 50

Answers (1)

Medda86
Medda86

Reputation: 1630

You can add a class "has-sub-entries" to the links that should have it.

.sidebar-nav>ul>li>a.has-sub-entries:after {

}

so you remove the :after element on

.sidebar-nav>ul>li>a:after

Upvotes: 1

Related Questions