SideNav

Topic: SideNav

RoffDaniel pro asked 6 years ago

Hey. I can't normally configure the SideNav. I have the Pro version, connected everything as written on the page SideNav, but I press the button and the panel comes out, don't know what the problem is. Help please!

Ollie Vincent pro commented 6 years ago

Hi, Please be detailed and show an example of the problem

RoffDaniel pro commented 6 years ago

Here: https://youtu.be/OPYsnneMG64

Add comment

Ollie Vincent pro answered 6 years ago

0 0 Best answer

Hi,

I'm assuming you are using MDB 4.5? This is the latest version. If not - then please upgrade.

You could be missing the JavaScript in the footer to initialise the sliding sidnav. Make sure your classes match.
<pre>
    // SideNav Button Initialization
    $(".button-collapse").sideNav();
    // SideNav Scrollbar Initialization
    var sideNavScrollbar = document.querySelector('.custom-scrollbar');
    Ps.initialize(sideNavScrollbar);</pre>
If that still does not work - copy this code into a new file for testing and add the JavaScript too.
<div>
<pre><header>

<ahref="#"data-activates="slide-out"class="btn btn-primary p-3 button-collapse"style="z-index:1080;">

<iclass="fa fa-bars"></i>

</a>

<divid="slide-out"class="side-nav"style="transform: translateX(0%);"style="z-index: 9999;">

<ulclass="custom-scrollbar">

<li>

<divclass="logo-wrapper waves-light waves-effect waves-light">

<ahref="#">

<imgsrc="https://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">

</a>

</div>

</li>

<li>

<ulclass="social">

<li>

<ahref="#"class="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm gplus-ic">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<li>

<formclass="search-form"role="search">

<divclass="form-group md-form mt-0 pt-1 waves-light waves-effect waves-light">

<inputclass="form-control"placeholder="Search"type="text">

</div>

</form>

</li>

<li>

<ulclass="collapsible collapsible-accordion">

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-chevron-right"></i> Submit blog

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">Submit listing</a>

</li>

<li>

<ahref="#"class="waves-effect">Registration form</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-hand-pointer-o"></i> Instruction

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">For bloggers</a>

</li>

<li>

<ahref="#"class="waves-effect">For authors</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-eye"></i> About

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">Introduction</a>

</li>

<li>

<ahref="#"class="waves-effect">Monthly meetings</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-envelope-o"></i> Contact me

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

</ul>

</div>

</li>

</ul>

</li>

</ul>

<divclass="sidenav-bg mask-strong"></div>

</div>

<navclass="navbar fixed-top navbar-toggleable-md pl-5 navbar-expand-lg unique-color scrolling-navbar double-nav">

<divclass="float-left">

<ahref="#"data-activates="slide-out"class="button-collapse">

<iclass="fa fa-bars"></i>

</a>

</div>

<divclass="breadcrumb-dn mr-auto">

<p>Material Design for Bootstrap</p>

</div>

<ulclass="nav navbar-nav nav-flex-icons ml-auto">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-envelope"></i>

<spanclass="clearfix d-none d-sm-inline-block">Contact</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-comments-o"></i>

<spanclass="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-user"></i>

<spanclass="clearfix d-none d-sm-inline-block">Account</span>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"href="#"id="navbarDropdownMenuLink"data-toggle="dropdown"

aria-haspopup="true"aria-expanded="false">

Dropdown

</a>

<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</nav>

</header></pre>
</div>

Please insert min. 20 characters.

Hi, I'm assuming you are using MDB 4.5? This is the latest version. If not - then please upgrade. You could be missing the JavaScript in the footer to initialise the sliding sidnav. Make sure your classes match.

    // SideNav Button Initialization
    $(".button-collapse").sideNav();
    // SideNav Scrollbar Initialization
    var sideNavScrollbar = document.querySelector('.custom-scrollbar');
    Ps.initialize(sideNavScrollbar);

If that still does not work - copy this code into a new file for testing and add the JavaScript too.

<header>

<!-- SideNav slide-out button -->

<ahref="#"data-activates="slide-out"class="btn btn-primary p-3 button-collapse"style="z-index:1080;">

<iclass="fa fa-bars"></i>

</a>

<!-- Sidebar navigation -->

<divid="slide-out"class="side-nav"style="transform: translateX(0%);"style="z-index: 9999;">

<ulclass="custom-scrollbar">

<!-- Logo -->

<li>

<divclass="logo-wrapper waves-light waves-effect waves-light">

<ahref="#">

<imgsrc="https://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">

</a>

</div>

</li>

<!--/. Logo -->

<!--Social-->

<li>

<ulclass="social">

<li>

<ahref="#"class="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm gplus-ic">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<!--/Social-->

<!--Search Form-->

<li>

<formclass="search-form"role="search">

<divclass="form-group md-form mt-0 pt-1 waves-light waves-effect waves-light">

<inputclass="form-control"placeholder="Search"type="text">

</div>

</form>

</li>

<!--/.Search Form-->

<!-- Side navigation links -->

<li>

<ulclass="collapsible collapsible-accordion">

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-chevron-right"></i> Submit blog

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">Submit listing</a>

</li>

<li>

<ahref="#"class="waves-effect">Registration form</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-hand-pointer-o"></i> Instruction

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">For bloggers</a>

</li>

<li>

<ahref="#"class="waves-effect">For authors</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-eye"></i> About

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">Introduction</a>

</li>

<li>

<ahref="#"class="waves-effect">Monthly meetings</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-envelope-o"></i> Contact me

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ulclass="list-unstyled">

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

</ul>

</div>

</li>

</ul>

</li>

<!--/. Side navigation links -->

</ul>

<divclass="sidenav-bg mask-strong"></div>

</div>

<!--/. Sidebar navigation -->

<!-- Navbar -->

<navclass="navbar fixed-top navbar-toggleable-md pl-5 navbar-expand-lg unique-color scrolling-navbar double-nav">

<!-- SideNav slide-out button -->

<divclass="float-left">

<ahref="#"data-activates="slide-out"class="button-collapse">

<iclass="fa fa-bars"></i>

</a>

</div>

<!-- Breadcrumb-->

<divclass="breadcrumb-dn mr-auto">

<p>Material Design for Bootstrap</p>

</div>

<ulclass="nav navbar-nav nav-flex-icons ml-auto">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-envelope"></i>

<spanclass="clearfix d-none d-sm-inline-block">Contact</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-comments-o"></i>

<spanclass="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-user"></i>

<spanclass="clearfix d-none d-sm-inline-block">Account</span>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"href="#"id="navbarDropdownMenuLink"data-toggle="dropdown"

aria-haspopup="true"aria-expanded="false">

Dropdown

</a>

<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</nav>

<!-- /.Navbar -->

</header>

RoffDaniel pro commented 6 years ago

Thank you! Buy i have another problem, i don't what do with this =( https://imgur.com/JbqlKkT

Ollie Vincent pro commented 6 years ago

You don't want the margin? Surely you can remove this in the CSS... If you share your project I can have a look at it first hand - which is always better :)

RoffDaniel pro commented 6 years ago

Thank you! The problem was a padding, and i fix himself!)

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: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

RoffDaniel

Pro User 76Support score
17Questions 7Answers 0Snippets