Question

I’m having a little trouble here: ..

Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.

I’m using wordpress for this website with some modifications to a basic theme that I’ve made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you’ll notice that the menu overlaps with the content.

How can I make it so that they don’t overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.

Not sure how I should go about this… any help would be appreciated!

Thanks!

Answer 1

As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu

To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you’re after ..

Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:

The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..