Liked how the menu is styled on hover in the above GIF? You can add a similar dim effect to the content on the menu hover with the following CSS. With this, visitors will have an increased focus on the navigation menu and it’s better for conversion.

/* Dim content on menu hover */
#masthead:hover~#content {
	opacity: 0.1;
	transition: all 0.5s linear 0.1s;
}

#content {
	transition: all 0.5s linear 0.1s;
}

Above CSS can be added to the customizer under Additional CSS tab or in the child theme’s style.css file.

This is a screenshot of how this would look on the frontend:

If you would like to add some style to bullets and lists, you can use the following CSS. Below are the steps that show how to use CSS.

Step 1 – Add the following CSS classes to ol (ordered lists) and ul (unordered list) with the following HTML codes:

• Code for ol (ordered lists) – ‘ast-content-ol-list’

<ol class="ast-content-ol-list">
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
</ol> 

• Code for ul (ordered lists) – ‘ast-content-ul-list’

<ul class="ast-content-ul-list">
   <li>Red</li>
   <li>Blue</li>
   <li>White</li>
   <li>Yellow</li>
   <li>Green</li>
</ul> 

You can modify the number of list items by removing lines or adding new ones (<li>ITEM_NAME</li>).

Step 2 – Now it’s time to style your lists. Navigate to the Customizer and copy the following custom CSS to your website’s “Additional CSS”.

 /* Order list style */ .entry-content ol.ast-content-ol-list {
   counter-reset: my-ol-counter;
   margin-left:1.4em; 
}
.entry-content ol.ast-content-ol-list li {
   position: relative;
   padding-left: 30px;
   list-style: none; 
} 
.entry-content ol.ast-content-ol-list li:before {
   position: absolute;
   top:50%;
   left: 0;
   width: 20px;
   height: 20px;
   margin-top: -10px;
   color: #fff;
   text-align:center;
   background-color: #0274be;
   content: counter(my-ol-counter,decimal);
   counter-increment: my-ol-counter;
   font-size: 11px;
   -webkit-border-radius: 50%;
   border-radius: 50%; 
} 

/* Unordered list style */ 
.entry-content ul.ast-content-ul-list {
   margin-left:1.4em;
}
.entry-content ul.ast-content-ul-list li {
   position: relative;
   padding-left: 30px;
   list-style: none; 
}
.entry-content ul.ast-content-ul-list li:after{
   position: absolute;
   top: -webkit-calc( 50% - -1px);
   top: calc( 50% - -1px);
   left: 0;   width: 20px;
   height: 20px;
   margin-top: -10px;
   padding-top: 2px;
   color: #fff;
   text-align:center;
   background-color: #0274be;
   content: "\e900";
   font-size: 10px;
   font-family: 'Astra';
   -webkit-border-radius: 50%;
   border-radius: 50%;
   -webkit-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
   transform: rotate(270deg); 
} 

If you’re not sure how to do this, please check this article on adding s custom CSS.

The result of adding the above CSS is the following look of your bullets and lists:

You can modify the color, font, spacing, and size of the elements by modifying the appropriate lines of the CSS code.

Step 1 – From the WordPress dashboard navigate to Appearance > Menus.
Step 2 – Click on Screen Options and tick the CSS Classes checkbox.
Step 3 – Click on the menu item that needs to be highlighted.
Step 4 – Add CSS class to the menu item and save the changes in the menu. 

Once the CSS class is added you can add CSS with respect to this class. Make sure you add a dot (.) before the CSS class while writing the CSS code. Below is a sample CSS code that you can try. Note the CSS class used is menu-highlight

Below CSS will create a simple button out of the menu item:

.menu-highlight
{
 background: #d3d3d3;
 border-radius: 35px;
 padding: 0px 20px;
 line-height: 50px !important;
 margin: auto;
}

For the above CSS, the highlighted menu will look as shown in the screenshot below –
Below CSS will add the outlined button to the menu item: 

.menu-highlight a{
color: #ffffff !important;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px !important;
transition: all 0.2s linear;
line-height:45px;
}
.menu-highlight a{
color:#1172c4 !important;
}
.menu-highlight a:hover {
color: #ffffff !important;
background: #1172c4;
border-color: #1172c4;
}
li.menu-highlight:hover a{
color:#ffffff !important;
}
.menu-highlight:active {
border-radius: 22px;
}

For the above CSS, the highlighted menu will look as shown in the screenshot below –

Additional Notes:

• This CSS can be pasted in Customizer ▸ Additional CSS as explained here.
• You can tweak the CSS code to change the colors and look of the highlighted menu item.

In Customizer

Since WordPress 4.7, users can now add custom CSS directly inside the Customizer which you can find in Customize → Additional CSS. This is super-easy and you would be able to see your changes with a live preview instantly.

It should be noted that the CSS added in this area is theme-specific, so if you switch themes, you’ll lose your CSS.

Using external plugin

Use the external plugin like Simple Custom CSS to add custom CSS.

Using a Child Theme

If you’re already using a child theme, you can use the style.css file to add your custom CSS. Read How to edit style.css in the child theme?