How can I make a side bar hide after reaching a certain brea

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: How can I make a side bar hide after reaching a certain breakpoint?

.jonathan. pro asked 7 years ago

Hello, So a fixed side bar here at mdb has a breakpoint when screen reaches 1440px and after that it gets fixed. But after it gets fixed at 1440px can I make it hide and go back to toggle again at a specific further breakpoint? like say 2000px? Thanks.

Marta Szymanska staff pro premium answered 7 years ago

Hi,
  1. In mdb.js file in this line var SN_BREAKPOINT = 1440; change 1440 to 2000. Safe the file and minify.
  2. In sass/mdb/pro/_variables.scss file in this line $sidenav-breakpoint: 1440px !default; change 1440px to 2000px. Safe the file and after that minify mdb.css file.
Best, Marta

.jonathan. pro commented 7 years ago

But if I do that wouldn't that mean that it won't go fixed at 1440px? I do want the side bar to go fixed at 1440px. What I want to do is the side bar to be non-fixed from 0px to 1199px, then fixed from 1200px to 1999px, and then non-fixed again at 2000px and over. Any idea how can I achieve this? Thanks.

Ollie Vincent pro commented 7 years ago

Change the breakpoint to 1199px and then style it out at 2000px with different classes

.jonathan. pro commented 7 years ago

But do you know what code I'll need to write in order to style it out at 2000px with different classes like you said? Here is a sample code: 1) HTML <pre><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Title</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="../css/mdb.min.css" rel="stylesheet"> <!-- Your custom styles (optional) --> <link href="../css/TestingCSS.css" rel="stylesheet"> </head> <body> <!--Double navigation--> <header> <!-- SideNav slide-out button --> <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a> <!-- Sidebar navigation --> <div id="slide-out" class="side-nav fixed purple darken-4 custom-scrollbar"> <ul class="custom-scrollbar list-unstyled"> <!-- Logo --> <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li> <!--/. Logo --> <!--Social--> <li> <ul class="social"> <li><a href="#" class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a href="#" class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a href="#" class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a href="#" class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li> </ul> </li> <!--/Social--> <!--Search Form--> <li> <form class="search-form" role="search"> <div class="form-group waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li> <!--/.Search Form--> <!-- Side navigation links --> <li> <ul class="collapsible collapsible-accordion"> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="#" class="waves-effect">Submit listing</a> </li> <li><a href="#" class="waves-effect">Registration form</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="#" class="waves-effect">For bloggers</a> </li> <li><a href="#" class="waves-effect">For authors</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="#" class="waves-effect">Introduction</a> </li> <li><a href="#" class="waves-effect">Monthly meetings</a> </li> </ul> </div> </li> <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li><a href="#" class="waves-effect">FAQ</a> </li> <li><a href="#" class="waves-effect">Write a message</a> </li> <li><a href="#" class="waves-effect">FAQ</a> </li> <li><a href="#" class="waves-effect">Write a message</a> </li> <li><a href="#" class="waves-effect">FAQ</a> </li> <li><a href="#" class="waves-effect">Write a message</a> </li> <li><a href="#" class="waves-effect">FAQ</a> </li> <li><a href="#" class="waves-effect">Write a message</a> </li> </ul> </div> </li> </ul> </li> <!--/. Side navigation links --> </ul> </div> <!--/. Sidebar navigation --> </header> <!--/.Double navigation--> <!--Main layout--> <main class="mt-5"> <!--Main container--> <div class="container-fluid mt-5"> <!--Grid row--> <div class="row mt-5"> <!--Grid column--> <div class="col-12 col-sm-12 col-md-12 mb-4"> <img style="height: 400px; width: 100%" src="https://mdbootstrap.com/img/Photos/Others/images/76.jpg" class="img-fluid" alt=""> </div> <!--Grid column--> </div> <!--Grid row--> </div> <!--Main container--> </main> <!--Main layout--> </pre> <!-- SCRIPTS --> <!-- JQuery --> <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="../js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="../js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="../js/mdb.min.js"></script> <!-- Scrollbar Initialization --> <script> var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </script> <!-- SideNav Options --> <script> $('.button-collapse').sideNav({ edge: 'left', // Choose the horizontal origin closeOnClick: true // Closes side-nav on clicks, useful for Angular/Meteor }); </script> </body> </html> 2) CSS: <pre>header, main, footer { padding-left: 240px; } @media only screen and (max-width : 992px) { header, main, footer { padding-left: 0; } }</pre>

Ollie Vincent pro commented 7 years ago

You could create 2 instances of the same nav, give them separate classes and hide/show them using media queries. I dont know if it is possible in mdb.js to have (essentially) two breakpoints.

.jonathan. pro commented 7 years ago

@Marta What do you mean by minify?? I changed the breakpoint number in mdb.js but after that you said "save the file and minify". I tried searching for "var SN_BREAKPOINT" on the min file to change it too but nothing pops up in the search bar. Can you explain to me what process I need to minify it? can you please be specific? Thank you.

Marta Szymanska staff pro premium commented 7 years ago

Which code editor do you use?

.jonathan. pro commented 7 years ago

Visual Studio 2017

Ollie Vincent pro commented 7 years ago

If you install the css minify add on (extension). Open your CSS file. hit F1 on your keyboard and search for 'minify'. Select and it will minify your css file
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
.jodadev.
Pro User
41Support score
15Questions 1Answers
0Snippets likes 1Snippets