Milligram: How to push other elements to the right using my sidebar?

Created on 27 Oct 2017  ·  5Comments  ·  Source: milligram/milligram

I want to create a simple side-navigation that takes up the entire screen's height. I am using
Milligram for my base, and I want my side-nav to work with it. I have the following set up:

Codepen demo

As you can see, my sidebar is the following element

<div class="sidebar"></div>

with the following styles:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

This sort of works, the sidebar appears above all else, but everything else does not get pushed to the side. And if the screen is small, the content clashes with the sidebar.

How can I make it so the sidebar pushes everything else (including the navbar) to the right by 250px(its width)? I know this will make things unusable on smaller screens, but I will give the user a way to toggle it.

Hacktoberfest help wanted
Source
picture fooksupachai
👍1

All 5 comments

I found this problem as well. Hopefully someone will help with this problem.

abc985 picture abc985 on 14 Dec 2017

Not exactly an issue with the framework. What you're essentially after is an off-canvas sidebar. I have modified your Codepen to make it work: https://codepen.io/chillyorange/pen/EQYJvQ

Applied fixed positioning on the sidebar and wrapped the content inside an additional element with a left margin matching the width of the sidebar.

chillyorange picture chillyorange on 29 Jan 2018
👍1

@chillyorange 's response shoud solve your problem.

Fixed items don't scroll down. So your sidebar will have 100% height as you want.

umitkucuk picture umitkucuk on 29 Jan 2018

@fooksupachai I can help you!

If you define position: absolute this element will overlap the others. You can try to use the Milligram Grid to have the expected behavior.

Milligram Grid:

The position CSS property:

Let me know if you have any questions about how to use the Milligram Grid.

cjpatoilo picture cjpatoilo on 7 Feb 2018
👍1

@fooksupachai for now, I will close this issue.
If you need help feel free to reopen or open a new issue.

cjpatoilo picture cjpatoilo on 19 May 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mterron picture mterron  ·  6Comments
neronmoon picture neronmoon  ·  4Comments
davedele picture davedele  ·  5Comments
mukai11 picture mukai11  ·  4Comments
piever picture piever  ·  3Comments