Been searching here but did not found my answere.
How can I change the blue line in the Navigation. It should be changing to the Catgeory color.
http://www.screencast.com/t/XXEvRq47
Thank you
Hello Sylvester77,
If you want to change the color of the border, you have to use a bit of CSS to do that. Please try the code below and add it in Theme panel->Custom CSS Area.
The code is ->
.sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: red;
}
The result you should see here -> http://screencast.com/t/t9ZB0duyI
Please notice that this border is affected by the theme accent colors from Theme panel -> http://screencast.com/t/sAXVDtGUew6F
Hope this helps!
Thank you for the message!
Hello Catalin, thanks for the reply. But that was not what I wanted.
The border should always take over the category colour which is setup for each category in the theme panel.
What would that CCS Code? 🙂
Thank you ver much
Hello Sylvester77,
Unfortunately, our theme does not have such an option as the border color to be changed automatically depending on the color of the panel. I suppose that you are referring to this option from the theme panel -> http://screencast.com/t/X2D4UeCB and the result -> http://screencast.com/t/FcBATnp5jS4 It is not a simple task to implement this feature in our theme and for achieving that is required custom work. The simplest way to achieving that thing is using a bit of CSS code for each category page, using category ID. Please check the example below and try to do it in the same way in your side.
The code is ->
.category-87 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: red;
}
The result -> http://screencast.com/t/riXVKrIMXb
If you want to display more levels in our theme and you are not aware to the steps in this regard, please consider hiring a freelancer/developer to do this for you because we cannot provide custom services at the moment, sorry!
Hope this helps!
Thank you for the message!
Hello Catalin, appreciate your effort.
I´ve insert this code:
.category-5169 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #f39200;
}
.category-5170 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #526e40;
}
.category-5171 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #22b1e7;
}
.category-5172 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #7dbb48;
}
.category-5173 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #513731;
}
.category-5174 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #72c4ba;
}
.category-5175 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #b0afae;
}
.category-5176 .sf-menu > .current-menu-item > a:after, .sf-menu > .current-menu-ancestor > a:after, .sf-menu > .current-category-ancestor > a:after, .sf-menu > li:hover > a:after, .sf-menu > .sfHover > a:after {
background-color: #db3a8d;
}
But it´s only showing one color…..http://www.urban.dog/
What have i done wrong…..
This code works but the the whole box is coloured, i want only the border:
li.menu-item-5169 {
background-color: #f39200
}
li.menu-item-5170 {
background-color: #526e40
}
li.menu-item-5171 {
background-color: #22b1e7
}
li.menu-item-5172 {
background-color: #7dbb48
}
li.menu-item-5173 {
background-color: #513731
}
li.menu-item-5174 {
background-color: #72c4ba
}
li.menu-item-5175 {
background-color: #b0afae
}
li.menu-item-5176 {
background-color: #db3a8d
}
.sf-menu > .current-menu-item > a::after, .sf-menu > .current-menu-ancestor > a::after, .sf-menu > .current-category-ancestor > a::after, .sf-menu > li:hover > a::after, .sf-menu > .sfHover > a::after {
background-color: #db3a8d;
Found it. Great. But one more thing.
On hover they should also show the category color… 🙂
What di i have to ad?
Hello Sylvester77,
Please try to delete your above custom CSS code and try to implement the below code for each menu item and add the different color.
The code is ->
.sf-menu > li.menu-item-1169:hover > a:after {
background-color:red!important;
}
.sf-menu > .current-menu-item.menu-item-1169 > a:after, .sf-menu > .current-menu-ancestor.menu-item-1169 > a:after, .sf-menu > .current-category-ancestor.menu-item-1169 > a:after {
background-color:red!important;
}
.sf-menu > li.menu-item-963:hover > a:after {
background-color:green!important;
}
.sf-menu > .current-menu-item.menu-item-963 > a:after, .sf-menu > .current-menu-ancestor.menu-item-963 > a:after, .sf-menu > .current-category-ancestor.menu-item-963 > a:after {
background-color:green!important;
}
Please notice that above I gave you only an example how you can be done. You have to implement this method yourself…if you are not aware to the steps in this regard, please keep in mind that we cannot do this thing for you because require custom work and we cannot provide this kind of services at the moment, sorry!
Thank you for your understanding!
