How to collapse sidenav when clicking a SmoothScroll button

Topic: How to collapse sidenav when clicking a SmoothScroll button

Devon Grenfell free asked 7 years ago

I have the hidden sidenav and fixed navbar working. I am building a single-page site with the buttons in the sidenav simply triggering SmoothScroll and scrolling to that specific point on the page.My issue is that when I click one of the links in my sidenav it does not collapse the sidenav like it does when loading a separate page. How could I trigger the transforming(sliding) function when clicking on these links in the sidebar. \'ve been digging around in the bootstrap css files but it's getting quite confusing.

My issue is that when I click one of the links in my sidenav it does not collapse the sidenav like it does when loading a separate page. How could I trigger the transforming(sliding) function when clicking on these links in the sidebar? I've been digging around in the bootstrap css files but it's getting quite confusing.

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi,

OK, fine. But side-nav is a pro components so if you have a free version it won't work.

Best,

Marta

Devon Grenfell free commented 7 years ago

Oh, I see. Thanks, Devon

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi, could you also tell me what is the exact version of MDB you have? You can find this in README.txt file. Best, Marta

Devon Grenfell free commented 7 years ago

MDB Pro 4.4.1

Marta Wierzbicka staff commented 7 years ago

Hi, send me to m.szymanska@mdbootstrap.com your order ID, please. Best, Marta

Devon Grenfell free commented 7 years ago

I don't believe I have an order ID. I have not bought the Pro package. The version it gave me in the README.txt file of the free download was "MDB Pro 4.4.1".

Add comment

Devon Grenfell free answered 7 years ago

0 0 Best answer

<header>

<ul id="slide-out" class="side-nav sn-bg-1 custom-scrollbar" style="transform: translateX(-100%);">

<li>
<div class="smooth-scroll logo-wrapper waves-light waves-effect waves-light">
<a href="#home-section"><img src="img/MetroTrack Logo.png" class="img-fluid flex-center" id="slider-logo"></a>
</div>
<div class="smooth-scroll slider-title"><a href="#home-section"><h1>MetroTrack</h1></a></div>
</li>


<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a 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 waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>


<li>
<ul class="smooth-scroll step-nav">
<li><a href="#choose-section" class="waves-effect">1. Choose your Train <i class="fa fa-hand-pointer-o"></i></a>
</li>
<li><a href="#track-section" class="waves-effect">2. Track your train <i class="fa fa-eye"></i></a>
</li>
<li><a href="#share-section" class="waves-effect">3. Share train location <i class="fa fa-map-marker"></i></a>
<hr>
</li>
</ul>
</li>

<div class="sidenav-bg mask-strong"></div>
</ul>


<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">

<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>

<div class="breadcrumb-dn mr-auto">
<p>MetroTrack</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
</ul>
</nav>

</header>

Please insert min. 20 characters.

<!DOCTYPE html>  <html lang="en" class="gr__mdbootstrap_com"><head><meta http-equiv="Content-Type" content="text/html; 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>MetroTrack</title>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  <link href="./Material Design Bootstrap Template_files/compiled.min.css" rel="stylesheet">  <link href="css/mdb.min.css" rel="stylesheet">  <link href="./Material Design Bootstrap Template_files/style.css" rel="stylesheet"> </head> <body class="hidden-sn mdb-skin" data-gr-c-s-loaded="true">  <header>  <ul id="slide-out" class="side-nav sn-bg-1 custom-scrollbar" style="transform: translateX(-100%);">  <li> <div class="smooth-scroll logo-wrapper waves-light waves-effect waves-light"> <a href="#home-section"><img src="img/MetroTrack Logo.png" class="img-fluid flex-center" id="slider-logo"></a> </div> <div class="smooth-scroll slider-title"><a href="#home-section"><h1>MetroTrack</h1></a></div> </li>   <li> <ul class="social"> <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a 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 waves-effect waves-light"> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li>   <li> <ul class="smooth-scroll step-nav"> <li><a href="#choose-section" class="waves-effect">1. Choose your Train <i class="fa fa-hand-pointer-o"></i></a> </li> <li><a href="#track-section" class="waves-effect">2. Track your train <i class="fa fa-eye"></i></a> </li> <li><a href="#share-section" class="waves-effect">3. Share train location <i class="fa fa-map-marker"></i></a> <hr> </li> </ul> </li>  <div class="sidenav-bg mask-strong"></div> </ul>   <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">  <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div>  <div class="breadcrumb-dn mr-auto"> <p>MetroTrack</p> </div> <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-effect waves-light"><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> </ul> </nav>  </header>

Devon Grenfell free commented 7 years ago

Hi @Marta, So above is my header section. Under is the Transform function along with the classes necessary for making the sidebar slide out. I'm assuming I should make use of similar classes or target that Transform function in my sidebar navigation links (under ) in order to cause the sidebar to minimise when I click them?

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

Hi, could you paste here any demo of your website with this issue? I'll try to help you. Best, Marta

Devon Grenfell free commented 7 years ago

Hi Marta, You can find it below. Thanks, Devon

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Devon Grenfell

12Support score
1Questions 1Answers 0Snippets