Hide sidebar on medium and small screen devices

Question

I want to make the sidebar on my website only visible on large screen devices, and to be hidden by default in small and medium size devices and make a button to show it, I want the same behavior of this site : https://colorlib.com/preview/theme/elen/index.html

I've make this code :

HTML :

<template>
  <div id="app">
    <div class="main-container">
      <div class="side-panel">
        <div class="side-panel bg-golden h-100">
          <div class="container h-100">
            <div class="row h-100 pt-5 justify-content-center align-items-center">
              <div class="col-12 text-center text-secondary">
                <h5>AYMAN TARIG</h5>
                <ul class="list-group pt-5 pb-4">
                  <li class="list-group-item bg-transparent">HOME</li>
                  <li class="list-group-item bg-transparent">ABOUT</li>
                  <li class="list-group-item bg-transparent">ARTICLES</li>
                  <li class="list-group-item bg-transparent">CONTACT</li>
                </ul>
                <div id="footer">
                  <h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>
                  <h6 class="pt-4">
                    <i class="fab fa-facebook-f p-2"></i>
                    <i class="fab fa-google-plus-g p-2"></i>
                  </h6>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content">
        <div id="background" class="h-100">
          <div class="container p-5 h-100">
            <div class="row h-100 justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6
                  class="text-center text-secondary pb-4"
                >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

CSS :

<style scoped>
.main-container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

h1 {
  text-decoration: underline #3a3939;
}
#background {
  background: url("./imgs/80911.jpg");
  background-size: cover;
}

h2 > i {
  cursor: pointer;
}

.side-panel {
  position: fixed;
  height: 100vh;
  width: 25%;
}

ul {
  list-style: none;
}

li:hover {
  background-color: #eeeeee !important;
  color: #02131f !important;
}

i:hover {
  color: #ffffff;
}

.bg-golden {
  background-color: #02131f;
}

.content {
  width: 100%;
  margin-left: 25%;
}

@media (max-width: 540px) {
  .main-container {
    display: block;
    flex-wrap: wrap;
  }

  .content {
    width: 100%;
    margin-left: 0;
  }

  .side-panel {
    position: static;
    width: 100%;
    min-height: 250px;
    height: auto;
  }

  #footer {
    display: none;
  }
}
</style>

Can anyone help me to change my code and achievement

What have you tryed? No one is going to help you if you just one someone to make it for you... For a start, I would suggest you to play with transition property of css and the @media you already have used — Mikel Ferreiro, Mar 28 '19 at 08:18
I actually don't know how to make that , I'm still learning @MikelFerreiro — Ayman Tarig, Mar 28 '19 at 08:20
Did you try to research first about @media and transition in css? — Francis G, Mar 28 '19 at 08:24
You might find this [link](https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp) pretty useful for learning how to make that behavior. Try that and if you have any questions we will help you @AymanTarig — Mikel Ferreiro, Mar 28 '19 at 08:27
See this question: https://stackoverflow.com/questions/48996084/ — Carol Skelly, Mar 28 '19 at 11:04

awran5 · Accepted Answer · 2019-03-29T08:50:46.300

I'm working on something similar, you will need to adjust the code to meet your need:

Edit: Sidebar fixed position.

/* JS */

var sidebar = $("#sidebar");
var hamburger = $('#navTrigger');

hamburger.click(function(e) {
  e.preventDefault();
  $(this).toggleClass('is-active');
  // This will add `sidebar-opened`
  $('#wrapper').toggleClass("sidebar-opened");
  // Remove magin left
  sidebar.toggleClass('ml-0');
});

/* CSS */

body {
  overflow-x: hidden;
}


/* Sidebar */

#sidebar {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
  padding: 15px;
  width: 250px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

#content {
  -webkit-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

.sidebar-opened #content {
  margin-left: 250px;
}

@media (max-width: 992px) {
  #sidebar {
    margin-left: -251px;
  }
}

@media (min-width: 992px) {
  #content {
    margin-left: 250px;
  }
}


/* Hamburger Menu */

.nav-trigger {
  cursor: pointer;
  width: 45px;
  height: 45px;
  padding: 1rem;
  display: inline-block;
  z-index: 999;
  position: absolute;
  right: -45px;
  top: 0;
}

.nav-trigger:hover .hamburger {
  transition: transform 50ms;
  transform: scale(.95);
}

.nav-trigger .hamburger {
  position: relative;
  width: 45px;
  height: 45px;
  transition: transform 500ms ease-in-out;
}

.nav-trigger .hamburger::before,
.nav-trigger .hamburger::after,
.nav-trigger .hamburger .hamburger-icon {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background: #222;
  transform-origin: 100% 50%;
  transition: transform .5s;
}

.nav-trigger .hamburger::before {
  top: 5px;
}

.nav-trigger .hamburger::after {
  top: 17px;
}

.nav-trigger .hamburger .hamburger-icon {
  width: 25px;
  top: 11px;
  transform-origin: 50% 50%;
}

.nav-trigger.is-active .hamburger::before,
.nav-trigger.is-active .hamburger::after,
.nav-trigger.is-active .hamburger .hamburger-icon {
  background: #222;
}

.nav-trigger.is-active .hamburger::before {
  transform: translate3d(-5px, 0px, 0) rotateZ(-45deg);
}

.nav-trigger.is-active .hamburger .hamburger-icon {
  transform: rotateY(-90deg);
}

.nav-trigger.is-active .hamburger::after {
  transform: translate3d(-5px, 5px, 0) rotateZ(45deg);
}


/* Navbar */

.navbar-link {
  padding: .5rem 1rem;
  display: block;
  color: #fff
}

.navbar-link:hover {
  background-color: #eeeeee;
  color: #02131f;
  text-decoration: none;
}

i:hover {
  color: #fff;
}


/* Content */

.bg-golden {
  background-color: #02131f;
  color: #fff
}

.bg-fullscreen {
  background-image: url(https://via.placeholder.com/1280x720.png/DCDCDC/fff);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  position: relative;
  background-attachment: scroll;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div id="app">
  <div class="main-container" id="wrapper">
    <div class="d-flex vh-100">

      <!-- Sidebar -->
      <aside id="sidebar" class="side-panel d-flex flex-column h-100 bg-golden">
        <!-- d-lg-none will hide the button on medium and large screens -->
        <a id="navTrigger" class="d-lg-none nav-trigger" role="button" title="sweet hamburger">
          <span class="hamburger">
       <span class="hamburger-icon"></span>
          </span>
        </a>
        <h5 class="sidebar-heading mt-5">AYMAN TARIG</h5>
        <ul class="navbar-nav bd-navbar-nav py-5">
          <li class="nav-item"><a class="navbar-link" href="#">HOME</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ABOUT</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">ARTICLES</a></li>
          <li class="nav-item"><a class="navbar-link" href="#">CONTACT</a></li>
          </li>
        </ul>
        <div id="footer" class="mt-auto">
          <small class="">Copyright ©2019 All rights reserved | Ayman Tarig</small>
          <p class="pt-4">
            <i class="fab fa-facebook-f p-2"></i>
            <i class="fab fa-google-plus-g p-2"></i>
          </p>
        </div>
      </aside>

      <!-- Content -->
      <div id="content" class="w-100">
        <!-- seciton 1 -->
        <div id="background" class="bg-fullscreen h-100">
          <div class="container p-5 d-flex h-100">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
                <h6 class="text-center text-secondary pb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 2 -->
        <div class="section-2 bg-warning" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
        <!-- seciton 3 -->
        <div class="section-3 bg-info" style="height: 1000px">
          <div class="container p-5 d-flex h-100 text-center">
            <div class="row justify-content-center align-items-center">
              <div class="col-12">
                <h2 class="display-4">Another section</h2>
                <h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
                  officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Ok that's fine, but I've noticed one small problem , the text on the div with id footer is overlapping with the list items above it on some screens. — Ayman Tarig, Mar 29 '19 at 05:59
And the sidebar is not fixed on it's position when scrolling — Ayman Tarig, Mar 29 '19 at 06:00
You didn't mention you need the sidebar fixed :) I've updated the answer, please check it out. — awran5, Mar 29 '19 at 08:49
It's good now , but the text still overlapping on the side bar — Ayman Tarig, Mar 29 '19 at 10:05
It works fine for me, I've added bootstrap class `py-5` to the nav list which adds equal top/bottom padding. don't resize your screen to test it, try to use [chrome dev tool](https://www.atlantic.net/hipaa-compliant-wordpress-hosting/how-to-test-responsive-design-device-mode-chrome-developer-tools/) instead. — awran5, Mar 29 '19 at 10:31
@awran5 how do i make the sidebar overlap other content, so that the other div won't shrink — sanoj lawrence, Oct 22 '19 at 05:11
@sanojlawrence You need to use width instead of margin, Check this https://codepen.io/awran5/pen/vYYxyMO — awran5, Oct 23 '19 at 03:32

score 1 · Answer 2 · answered Mar 28 '19 at 08:20

1

If you are targeting mobile devices with @media (max-width: 540px), then add display: none in the .side-panel definition.

Else, add a new media query

@media (max-width: 375px) {
  .side-panel {
    position: absolute;
    display: none;
  }
}

answered Mar 28 '19 at 08:20

varun agarwal

1,491
6
9

This will just hide it , I want to make a button to show it when the user click on it – Ayman Tarig Mar 28 '19 at 08:22
@AymanTarig Do you have a button already to handle that in regular case? If yes, then you won't have much to do, else you will have to initially hide the button and in the `@media (max-width: 375px)` query, you can define the button to show up. – varun agarwal Mar 28 '19 at 08:44

Hide sidebar on medium and small screen devices

2 Answers2