In your Child Theme or CSS Editor Plugin try this code:
ul.slicknav_nav {
background: #8224E3;
}
Update: Edited First Code
What do you mean by “CSS Editor Plugin”? Is that just the “Editor” under “Appearance”? I have an “Editor” under “Plugins” but it’s the Aksimet tool and doesn’t have the CSS in it.
Here’s all the “Slick Nav” code. Where would you insert your tag? (I’m not a programmer; I’m just trying to get a bridge solution done till a programmer can do this)
.mobile-nav .slicknav_menu > a {
text-transform: uppercase;
font-size:14px;
color: #fff;
font-weight: 700;
}
.slicknav_nav {
background: #000;
width:100%;
position: absolute;
left:0;
top:66px;
border-top:1px solid #212121;
text-align: center;
z-index:9999;
margin: 0;
list-style: none;
}
.sub-menu {
margin: 0;
list-style: none;
}
.slicknav_menutxt {
font-size: 26px;
}
.slicknav_nav li {
border-bottom:1px solid #212121;
}
.slicknav_parent ul li:last-child {
border-bottom:3px solid #50a6c2;
}
.slicknav_nav > li a {
display: inline-block;
color: #6c767e;
text-transform: uppercase;
font-size:14px;
font-weight: 700;
transition:0.3s all;
}
.slicknav_nav > li > a {
padding:10px 8px;
width:100%;
}
.slicknav_nav li:hover > a,
.slicknav_nav li:hover > a > a {
color:#fff;
}
.slicknav_parent ul li a {
padding:10px 8px;
width:100%;
}
.slicknav_parent ul li a:hover {
color:#fff;
}
.masonry {
list-style: none;
}
What do you mean by “CSS Editor Plugin”? Is that just the “Editor” under “Appearance”?
No those are the default PHP and CSS don’t edit anything under ‘editor’
The CSS Editor Plugin is a plugin to edit CSS so not to mess with core files.
After you install the plugin then go to Appearance > Custom CSS.
Then pasted the code I have given you in the space under the words
/* Enter Your Custom CSS Here */
Is there a CSS Editor that you recommend?
I included one it the post above
CSS Editor Plugin
Okay. I appreciate your help, but I’ve done that and it had no effect.
I put this code into the custom editor:
.slicknav_nav {
background: #000;
color: #FFF847;
width:100%;
position: absolute;
left:0;
top:66px;
border-top:1px solid #212121;
text-align: center;
z-index:9999;
margin: 0;
list-style: none;
}
It made little yellow dots all the way on the left of the responsive nav. I tried using that same hex code and adding the tag ” color: #FFF847; ” in every single div of the Slick Nav section and the only things that ever changed were the stack nav icon (hamburger menu) and the yellow dots. All I want to do is change the inactive state of the responsive navigation items. They currently are nearly invisible. The hover state is white and easy to see.
Through trial and error, I figured out this code:
.slicknav_nav ul li a {
color: #FFF;
}
That enables me to do what I want to do with the text. Thanks again!
