Sidebar on left issues

[Colin]

Colin

November 24, 2015 at 7:17 am

Hi Ben

One problem I actually solved before posting here (must be getting good!) but worth recording for others methinks 🙂

I needed the sidebar on the left for my latest site. So I found your CSS for this on the forum:
body .main {float: right;}

And it worked great on the laptop and I carried on designing with forms and mouseovers etc in the content area. Then I resized the browser to see what needed to be tweaked for phones and tablets (yes, I know that’s the wrong way round 🙂 )

And all the form input fields, mouseovers, even the links, just stopped working as the sidebar dropped below the content!

Identified the problem by using the browser tools – the sidebar container was still ‘anchored’ top right and so was laid out over the top of the whole of the content, masking any interactive bits even though they were still visible.

Fixed by making both the body .main and .ktsidebar classes relatively positioned (to give me access to their height positioning) and then giving them different z-index values. So now the content is over the top of the sidebar…
body .main {position: relative; z-index: 2; float: right;}
.ktsidebar {position: relative; z-index: 1;}

Best, Colin