Why does my sidebar have a gap between the header and where it starts?
Because your top nav is wrapping into two lines.
Can I get rid of it?
Start by editing layout.css and replacing padding:0 0 0.75em 0; with padding:0; in:
#globalnav {
float:left;
line-height:1em;
list-style:none;
margin:0;
padding:0 0 0.75em 0;
position:relative;
width:100%;
}
Then change margin:0; to margin:-37px 0 0;in:
.sidebar {
float:left;
font-size:0.8em;
margin:0;
padding:25px 0.5%;
width:22%;
}
Thread Starter
Hopper
(@faithfilly)
Wow!… it’s so close, but now the top of the sidebar overlaps onto the bottom of the header on a wide screen monitor and still has a gap in a window screen size of 1024 x 768.
Reduce the negative top margin (-37px) to suit.
Thread Starter
Hopper
(@faithfilly)
Will that work given that screen sizes vary?
Can I maybe hide that sidebar top under my header?
It will work just fine. Screens that have a height smaller than your page will simply have a vertical scroll bar like 99.9% of the sites out there.
Thread Starter
Hopper
(@faithfilly)
With the sidebar margin:-50px 0 0;
on the 1024 x 768 size screen the sidebar looks good.
On the wide screen, it is too high and enters into the header’s space.
I restricted the navigation menu down to 80%, which keeps it then out of the sidebar’s space. Now to get that sidebar out of the header’s space on a wide screen.
Thread Starter
Hopper
(@faithfilly)
Would the solution have anything to do with using a z-index in the sidebar layout?
Thread Starter
Hopper
(@faithfilly)
I apologize for forgetting to mention that I finally resolved this issue. I thought using the word overlap in a topic title for a new post would be of more help, but it wasn’t.
Anyhow, here is a link to what the problem was.
Even though all that work finally fixed the last annoyance with that design I wanted to fix, I’m still trying out different themes and don’t know what one will remain on my site yet.
