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

Topic: How can I make a side bar hide after reaching a certain breakpoint?

.jodadev. pro asked 6 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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi,

In mdb.js file in this line var SN_BREAKPOINT = 1440; change 1440 to 2000. Safe the file and minify.
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

.jodadev. pro commented 6 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 6 years ago

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

.jodadev. pro commented 6 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>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="../css/bootstrap.min.css" rel="stylesheet">  <link href="../css/mdb.min.css" rel="stylesheet">  <link href="../css/TestingCSS.css" rel="stylesheet"> </head> <body>  <header>  <a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a>  <div id="slide-out" class="side-nav fixed purple darken-4 custom-scrollbar"> <ul class="custom-scrollbar list-unstyled">  <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>   <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>   <li> <form class="search-form" role="search"> <div class="form-group waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li>   <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>  </ul> </div>  </header>   <main class="mt-5">  <div class="container-fluid mt-5">  <div class="row mt-5">  <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>  </div>  </div>  </main>  </pre>   <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>  <script type="text/javascript" src="../js/popper.min.js"></script>  <script type="text/javascript" src="../js/bootstrap.min.js"></script>  <script type="text/javascript" src="../js/mdb.min.js"></script>  <script> var sideNavScrollbar = document.querySelector('.custom-scrollbar'); Ps.initialize(sideNavScrollbar); </script>  <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>

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>
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
 <link href="../css/bootstrap.min.css" rel="stylesheet">
 
 <link href="../css/mdb.min.css" rel="stylesheet">
 
 <link href="../css/TestingCSS.css" rel="stylesheet">
</head>

<body>

<header>

<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a>

<div id="slide-out" class="side-nav fixed purple darken-4 custom-scrollbar">
 <ul class="custom-scrollbar list-unstyled">
 
 <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>
 
 
 <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>
 
 
 <li>
 <form class="search-form" role="search">
 <div class="form-group waves-light">
 <input type="text" class="form-control" placeholder="Search">
 </div>
 </form>
 </li>
 
 
 <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>
 
 </ul>
</div>

</header>

<main class="mt-5">

<div class="container-fluid mt-5">

<div class="row mt-5">

<div class="col-12 col-sm-12 col-md-12 mb-4">

</div>

</div>

</div>

</main>

</pre>


<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>

<script type="text/javascript" src="../js/popper.min.js"></script>

<script type="text/javascript" src="../js/bootstrap.min.js"></script>

<script type="text/javascript" src="../js/mdb.min.js"></script>

<script>
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
</script>

<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>

Please insert min. 15 characters.

Ollie Vincent pro commented 6 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.

.jodadev. pro commented 6 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 Wierzbicka staff commented 6 years ago

Which code editor do you use?

.jodadev. pro commented 6 years ago

Visual Studio 2017

Ollie Vincent pro commented 6 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

.jodadev.

Pro User 41Support score
15Questions 1Answers 1Snippets