How to collapse sidenav when clicking a SmoothScroll button

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: How to collapse sidenav when clicking a SmoothScroll button

Devon Grenfell 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.

Marta Szymanska staff pro premium answered 7 years ago

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

Devon Grenfell commented 7 years ago

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

Devon Grenfell answered 7 years ago

<!DOCTYPE html> <!-- saved from url=(0095)https://mdbootstrap.com/previews/docs/latest/html/navigation/side-nav-hidden-navbar-fixed.html# --> <html lang="en" class="gr__mdbootstrap_com"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Required meta tags always come first --> <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> <!-- 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="./Material Design Bootstrap Template_files/compiled.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="css/mdb.min.css" rel="stylesheet"> <!-- My Custom Styles --> <link href="./Material Design Bootstrap Template_files/style.css" rel="stylesheet"> </head> <body class="hidden-sn mdb-skin" data-gr-c-s-loaded="true"> <!--Double navigation--> <header> <!-- Sidebar navigation --> <ul id="slide-out" class="side-nav sn-bg-1 custom-scrollbar" style="transform: translateX(-100%);"> <!-- Logo --> <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> <!--/. Logo --> <!--Social--> <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> <!--/Social--> <!--Search Form--> <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> <!--/.Search Form--> <!-- Side navigation links --> <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> <!--/. Side navigation links --> <div class="sidenav-bg mask-strong"></div> </ul> <!--/. Sidebar navigation --> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav"> <!-- SideNav slide-out button --> <div class="float-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div> <!-- Breadcrumb--> <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> <!-- /.Navbar --> </header> <!--/.Double navigation-->

Devon Grenfell 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?

Marta Szymanska staff pro premium answered 7 years ago

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 commented 7 years ago

MDB Pro 4.4.1

Marta Szymanska staff pro premium commented 7 years ago

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

Devon Grenfell 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".

Marta Szymanska staff pro premium answered 7 years ago

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 commented 7 years ago

Oh, I see. Thanks, Devon

FREE CONSULTATION

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

Closed

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Devon Grenfell
12Support score
1Questions 1Answers
0Snippets likes 0Snippets