Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you tried this CSS;
#nav ul.sf-menu {
background: none;
}
Thread Starter
Eande
(@eande)
Ah, Andrew it was you who helped me with my first code and that’s the one I entered. I have tried it again but nothing,
I have already –
#nav ul.sf-menu,#nav-top ul.sf-menu {
width:100%;
background-color:#F0EDEF;
but is this only for the bottom navigation bar? My one at the tops responds to this in preview but not when I save changes
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Sometimes when CSS isn’t responding, it only appears so because the browser has cached/saved an older version of the page to improve page loading time.
Can you clear your browser cache to make-sure this is not the issue?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I’m sorry, I mistaked your ‘top’ navigation for the one that says
Blog Affirmations Personal Development Spirituality Travel Art And Creativity
And your ‘bottom’ navigation for the one right at the bottom of the page, in your footer (not a navigation oops).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You could add
#nav-top,
#nav-top ul li {
border: 0;
}
#nav-top ul.sf-menu {
background: none;
}
Hi Eande,
It looks as though the nav is taking the style but its your li and li a elements that picking up the borders and white backgrounds
change :
#nav-top ul li {
border: 1px solid #444444;
}
to
#nav-top ul li {
border: none;
}
and
#nav-top a.current, #nav-top a.current:visited, #nav-top a.current:hover, #nav-top a.current:active, #nav-top li a:hover, #nav a.current, #nav a.current:visited, #nav a.current:hover, #nav a.current:active, #nav li a:hover {
background: none repeat scroll 0 0 #555555;
color: #EEEEEE;
}
to
#nav-top a.current, #nav-top a.current:visited, #nav-top a.current:hover, #nav-top a.current:active, #nav-top li a:hover, #nav a.current, #nav a.current:visited, #nav a.current:hover, #nav a.current:active, #nav li a:hover {
background: none;
color: #000;
}
Hope this helps guys
Sorry and
#nav-top ul li a, #nav ul li a {
background-color: #FFFFFF;
color: #444444;
}
to
#nav-top ul li a, #nav ul li a {
background: none repeat scroll 0 0 transparent;
color: #000000;
}
Sorry Andrew,
I must have been mid post whilst you were posting that. Dont want to confuse anyone 🙂
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
There’s nothing wrong with comments which fulfill and reinforce the solution, J.
Thread Starter
Eande
(@eande)
Thank you both very much! I have since tried all the codes and updated them, and I’m almost at the effect I was looking for. However now I have a ‘bar border’ that’s transparent that runs behind the grey.
Where will I be able to add in a font colour change in these fonts, I seem to have so codes now!
Thread Starter
Eande
(@eande)
am I also able to change the background colour of the top bar to transparent? I’m not seeing which code applies to which bar?
I knew that one was coming hehe 🙂 change :
#nav-top, #top-bar-right-spanel {
margin: 0 auto;
}
to
#nav-top, #top-bar-right-spanel {
border: none;
margin: 0 auto;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
For the “bar border”, if you don’t want it, can you add;
#nav-top {
border: 0;
}
For the colour, you’ll need to override the previous style by using these selectors;
#nav-top a.current,
#nav-top a.current:visited,
#nav-top a.current:hover,
#nav-top a.current:active,
#nav-top li a:hover {
color: #etc-your-color.
}
Thread Starter
Eande
(@eande)
Thank you both again! 🙂 🙂
However I still have the grey bar on the top nav, (I wanted plain white background with purple font int ariel) and the colour of the font is only when I hover over it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
However I still have the grey bar on the top nav
Try
#nav-top ul.sf-menu {
background: none;
}
and the colour of the font is only when I hover over it.
Try
#nav-top a.current:hover,
#nav-top li a:hover {
color: #etc-your-color;
}
