I recently started using your great theme and I get to know its great features and functionality.
I hope you will be able to help me in adding an horizontal divider between menu item on the main menu of GP press.
I’ve done some progress as you can see in this link
Here is the css I used so far:
.main-navigation .main-nav ul li a {
padding-right: 24px;
}
.main-navigation .main-nav ul li a:before {
content: "|";
position: relative;
left: -25px;
float: inherit;
margin-top: 15px;
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a:before {
content: "|"!important;
color: #e9eff9;
position: relative;
float: inherit;
margin-top: 15px;
}
Gere is what I am still trying to figure out how to do without a success so far:
1. Remove the horizontal divider from both side of current menu item (active/focus/hover). As you can see I could only manage to remove the divider before the menu items on current page.
Here is a short video that demonstrate what I am looking to achieve: http://d.pr/v/ULKmxN
.main-navigation .main-nav ul li[class*="current-menu-"] > a:before,
.main-navigation .main-nav ul li[class*="current-menu-"] + li > a:before,
.main-navigation .main-nav ul li a:hover:before,
.main-navigation .main-nav ul li:hover + li a:before {
color: transparent;
}
Awesome!
It did the work perfectly.
I highly appreciate your help and super fast support.
Keep doing your magical work on this fantastic theme.
Thanks SO MUCH!
Amiel