Horizontal Bar in Menu Item

Divi Menu

My recent gig involves adding a horizontal bar in Menu Items of default Divi header. The following custom CSS achieved the above menu.

Top Horizontal Bar

I used border-top property of the anchor of menu items to have the horizontal bar and added spacing.

#main-header #top-menu li a {
  padding-left: 30px;
  padding-right: 30px;
  border-top: 1px solid #2986a3;
  padding-top: 20px;
}
#main-header #top-menu li {
  padding-right: 5px !important;
}

Hover Effect

Change color and border-color to black and thicker border-width for hover effect.

#main-header #top-menu li a:hover{
  color: black;
  border-top: 3px solid black;
}

Active Menu

CSS below is used to have different border-top for current menu.

#main-header #top-menu li.current-menu-item a {
  border-top: 3px solid black;
}

Complete CSS

*horizontal bar and spacing*/
#main-header #top-menu li a {
  padding-left: 30px;
  padding-right: 30px;
  border-top: 1px solid #2986a3;
  padding-top: 20px;
}
#main-header #top-menu li {
  padding-right: 5px !important;
}

/*hover effect*/
#main-header #top-menu li a:hover{
  color: black;
  border-top: 3px solid black;
}

/*current menu item*/
#main-header #top-menu li.current-menu-item a {
  border-top: 3px solid black;
}