[Resolved] Left sidebar margins

[Adrian Cojocariu]

Hey, I want the left sidebar to be always sticking to the left side of the screen, and also at the the top, near the navigation menu.

I have the secondary menu first thing in the left sidebar, and I want it to make like a 90 degree angle with the primary menu which is under the header.

But there’s the space between the primary menu and the left sidebar, and there’s also a big space between the left side of the screen and the left sidebar. The bigger the screen the bigger the gap.

I tried setting margin-left 0 on almost every div I could find, I also used the !important but nothing seems to have any effect.

I know it’s because of the responsive setup, any way I could achieve it ^_^ ?

[Tom]

Hi Adrian,

Any examples of what you’re trying to do? Having a tough time visualizing it.

Let me know 🙂

[Adrian Cojocariu]

Ok so I’ll just link you in.

test site

There is a bag between the left edge of the screen and the sidebar with the navmenu.

If you zoom in with CTRL scroll you’ll get the effect I want, but I want it all the time.

There’s also a little gap above, between the sidebar and the navmenu under the header, I’d like that removed too.

Is it possible ?

[Tom]

Hmm tough one..

To remove the spacing between the navigation and the sidebar, you can do this:

.separate-containers .inside-left-sidebar {
      margin-top: 0;
}

As for having the sidebar over to the left, the only way to do this is to set your container to 100% width.

body .grid-container {
    max-width: 100%;
}

Let me know if that works for you 🙂

[Adrian Cojocariu]

As usual, you da’ man.

Worked out great.

I added a #page ID before .grid-container, so that the footer doesn’t get 100% width as well.

Thanks !

[Tom]

Perfect, glad I could point you in the right direction 🙂

[Author]

Posts