Sidebar on toggle, to push topbar

Question

What I am trying to achieve is this: Without using javascript/jquery. I have a topbar and a sidebar. On smaller screens, I want the sidebar to collapse and have a button on top, and when the button is clicked the sidebar toggles horizontally, adding opacity to the background, putting the button on the topbar, and putting all content from within the topbar inside the sidebar.

Similar to when the screen is small for Youtube page, and the sign in option appears on the sidebar.

This is the code I have so far :JSFIDDLE

<header>
  <nav class="navbar navbar-expand-sm  fixed-top navbar-light bg-faded">
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#sidebar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <img class="navbar-brand navbar-logo" src="" />

    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
      <ul class="navbar-nav ml-auto user-info">
        <li class="avatar">
          <img src="">
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link ">Hello</a>
        </li>
      </ul>
    </div>
  </nav>
</header>
<div class="container-fluid">
  <div id="mySidenav">
    <nav class="col-sm-3 col-md-3 col-6 col-lg-2 d-sm-block sidebar collapse 
    width " id="sidebar">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home">
          <a class="nav-link">
            <img src="" />Home </a>
        </li>
        <ul class="sub-menu collapse" id="home">
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu1</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu2</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu3</a>
          </li>
          <li class="nav-item list-unstyled">
            <a class="nav-link">Submenu4</a>
          </li>
        </ul>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="a" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
        <li class="nav-item side">
          <a class="nav-link">
            <img src="" />Menu Item</a>
        </li>
      </ul>
    </nav>
  </div>
  <main role="main" class="col-sm-9  ml-sm-auto col-md-9 col-lg-10 pt-3 content">
    <h1>
      Main Content here
    </h1>
  </main>
</div>

you can create an div taht has inline style `display:none;` then with css media query you can overwrite it with display block and your desktop menu display: none; but if you want the menu to open and close i suggest using easy jquery method. — Ylama, Nov 21 '17 at 16:29
Thank you. I have done that in the jsfiddle, it's display:none, then when the button is clicked it becomes display:block, but the problem is that I want the sidebar to be on top of the entire page, including the topbar and the button change position with it. — , Nov 21 '17 at 16:31
try using z-index ? So the z-index of yor mobile menu should be mre than content you want under it. — Ylama, Nov 21 '17 at 16:32

Ylama · Answer 1 · 2017-11-21T16:47:35.057

0

in your JSFiddle change css (top has to be 0px) : JsFiddle

.sidebar {
  position: fixed;
  top: 0px;
  left: 0;
  z-index: 1;
  padding: 0;
  overflow-x: hidden;

/* Scrollable contents if viewport is shorter than content. */
  border-right: 1px solid #eee;
  background-color: black;
  height: 100%;

}

edited Nov 21 '17 at 16:47

answered Nov 21 '17 at 16:39

Ylama

2,449
2
25
50

But this way the button is not available anymore to click, cuz sidebar goes on top of it. I still need the button to be able to open/close the sidebar :| And to also put 'Hello' inside the sidebar – Nov 21 '17 at 16:52
oky well if i understand you correctly then it would take some complex media queries , you wil need to use `:active` to achieve this using just css my onion , look at this https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css ,and using js would make it so much more of a pleasure using. – Ylama Nov 21 '17 at 17:05
As it is now, when the button is clicked, I can toggle the sidebar in and out, using the collapse class ( when it's collapse show, then display the sidebar) But my issue is how to: after displaying the sidebar, how to also move the button ( cuz it gets left behind the sidebar when sidebar starts from top ) and then move it back.. Make it responsinve. I'm not sure I am explaining this correctly, so I apologize – Nov 21 '17 at 17:08

Sidebar on toggle, to push topbar

1 Answers1