Esquire theme – sidebar menu overlaps with category pages banners

My site is: brettcooperwriter.com

Try clicking on the “ya fiction” link on the left to see the overlapping problem I’m talking about.

The sidebar is ‘fixed’, which means it is positioned according to the browser window in the top/left, but it takes it out of the natural flow of the rest of the html.

You could go to the style.css, find #header and add:
margin-left:380px;
…which seems to be the width of the sidebar.
You may have to make some adjustments to that, more or less to get it correct.

Thanks a lot for your response. I tried updating to this:

}
#header {
background: #ff6 url(img/header-bg.png) repeat-x 0 0;
margin: 0 0 3.5em -40px;
margin-left:380px;
width: 600px;
height: 6.8em;
}

You can see that the third line is yours that I added. I couldn’t see any change, though, after saving it. I have now reverted to the original code because I’m nervous about further messing up the formatting if this doesn’t fix it. Any other ideas? Do I need to change or delete all or part of the margin code line above it? I’m really a newbie at all of this…

Thanks.

Really?
Because it worked for me in Firebug.

Do this:

change: margin: 0 0 3.5em -40px;
to: margin: 0 0 3.5em 340px;

Then “Update File” button.
Go to page and “refresh”

…which is what I did in Firebug and it moved the header in to line with the posts.

Perfect! You are awesome. Thank you so much. It looks amazing.

Here’s the proof:

https://www.brettcooperwriter.com/category/ya-fiction/

Thank again!!!!!

Brett

Glad to help.

If this is the one and only change you will ever make, then you can get away with it if you remember it, but it is better to make all you alterations in a Child Theme so that when your theme is updated, your changes are not lost.

Hi Brett – sorry to butt in here – but how did you edit your text bubble on the side of your site? I’m just starting out with Esquire and trying to work out how to get in there and add some stuff in..
Thanks for any advice,
Millie