In order to make changes so that they are not lost, please first setup a child-theme [http://codex.wordpress.org/Child_Themes].
Q1: I want to add just a little to the bottom edge of the NavBar so it will look like the top:
Not sure what you mean by this. Please clarify.
Q2: I want to remove the gap between the drop-downs:
Add the followign code to your child-themes style.css file:
.main-navigation li ul li {
margin: 0;
}
.main-navigation li ul li a {
border: none;
}
Hope this helps.
Afzaal
child theme is already in place.
add just a little to the bottom edge of the NavBar
do you mean some padding?
like:
.nav-menu { pink; padding-bottom: 5px; }
If you look at the tails of the letter “g” along the bottom edge of the NavBar, I would like to add a little brown (NavBar) below them. The code you posted — Many thanks! — has removed the space between the drop-downs, and now I would like to bump the drop-downs down just a bit so they do not cover the the tail of the “g”: http://www.nnysandbox.net/.
.main-navigation li ul li {
margin: 0;
}
.main-navigation li ul li a {
background: #efefef;
background-color: #3c2418;
border-color: #492e25;
border: none;
/* border-bottom: 1px solid #ededed; */
display: block;
font-size: 11px;
font-size: 0.785714286rem;
line-height: 1.214285714;
padding: 8px 10px;
padding: 0.571428571rem 0.714285714rem;
width: 180px;
width: 12.85714286rem;
white-space: normal;
}
note: This is a Child Theme with the entire sheet rather than an @import line.
ok I understand, the issue seems to be with the line-height. Try adding the following code to the style.css file in your child theme:
.main-navigation li a {
line-height: 1.6;
}
Adjust 1.6 to a value that you’re happy with.
Thanks,
Afzaal
Changing line-height makes the NavBar grow too tall overall, but this seems to have taken care of adding a little brown below the “g” tails:
.main-navigation li {
margin: 2px 40px 8px 0px; /* top - right - bottom - left */
margin: .142857142rem 2.857142857rem .571428571rem 0rem;
I still need to figure out how to push the drop-downs down a bit to get them off the “g” tails, and I would also like to have the drop-downs sized to fit the text a bit more nicely.
I have yet to try your pink padding, alchymyth, but I suspect you might be on to something there since nothing else seems to be pushing those drop-downs…
.nav-menu { pink; padding-bottom: 5px; }
try your pink padding,
🙁 – the ‘pink’ should not be there – my mistake;
the suggested CSS should be:
.nav-menu { padding-bottom: 10px; }
(you might not need that style after all the other changes)
to push the drop-downs down, try:
.main-navigation li ul { padding-top: 8px; }
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
lmao – I can relate to copying things from the browser developer toolbar & forgetting about styles that I’ve added for testing purposes.
🙁 – the ‘pink’ should not be there – my mistake;
Oh no, that lets you know *exactly* what is hitting where! 😉
to push the drop-downs down, try:
.main-navigation li ul { padding-top: 8px; }
Perfect, and many thanks!
