On your top menu, you have this in your CSS:
#my-top-menu ul li {
display: inline-block;
padding: 25px 5px;
margin-right: 50px;
}
That’s 25px set for the top and bottom of that div.
I would change that to 10px and that would reduce the height of that menu and tighten things up.
For the alignment, try doing this:
.navbar .nav {
float: right;
}
Right now your nav is set to float left.
When I changed the padding to 10px the top links are no longer active? I don’t know what’s going on.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you show us the problem?
I have changed the padding to 10px as suggested above. Please see site as links in top menu are no longer active.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Doesn’t look like that issue’s caused by the 10pixel padding to me
But when it’s 25px it works? Any suggestions?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You can comment out CSS in your stylesheet to explore which is responsible you know. It’s even easier with tools like Firebug.
Are you sure the CSS responsible isn’t this instead:
.navbar-wrapper .navbar.notresp {
...
margin-top: -60px;
}
Very well may be. I have taken all padding a margins out in terms of top of bottom. I was trying to reduce the white space between the two menus. How would you suggest I do that?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
You’d benefit greatly from Firebug or an equivalent tool. Look what I can see. I can see empty elements that are taking up room http://snag.gy/f3oWA.jpg
<div class="social-block span5"></div>
<h2 class="span7 inside site-description"></h2>
I can see margins, I can see heights, http://snag.gy/XnBUU.jpg
Well that’s very interesting. I had no idea that was there. Thank you for that great tool
