Topic: SideNav always visible
I want to use SideNav and at some places in the site, I need to have the SideMenu always displayed (fixed) and with no overlay.In the doc, it's said to use the .fixed class, but it does nothing, the menu is hidden. I used an example found in the doc. The "slim" option doesn't work either, when I click "Minimize menu" nothing happen. Here's the HTML code:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>test</title>
@*<link asp-append-version="true" rel="stylesheet" href="~/css/site.css" />*@
<link href="~/lib/mdbootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/fontawesome/fontawesome-all.css" rel="stylesheet" />
<link href="~/lib/mdbootstrap/css/mdb.css" rel="stylesheet" />
</head>
<body>
<!-- SideNav slide-out button -->
<a href="#" data-activates="slide-out" class="btn btn-primary p-3 button-collapse">
<i class="fas fa-bars"></i>
</a>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed wide sn-bg-1">
<ul class="custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper sn-ad-avatar-wrapper">
<a href="#">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg"
class="rounded-circle"><span>
Anna
Deynah
</span>
</a>
</div>
</li>
<!--/. Logo -->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect arrow-r active">
<i class="sv-slim-icon fas fa-chevron-right"></i>
Submit blog<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect active">
<span class="sv-slim"> SL </span>
<span class="sv-normal">Submit listing</span>
</a>
</li>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> RF </span>
<span class="sv-normal">Registration form</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="sv-slim-icon far fa-hand-point-right"></i>
Instruction<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> FB </span>
<span class="sv-normal">For bloggers</span>
</a>
</li>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> FA </span>
<span class="sv-normal">For authors</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="sv-slim-icon fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> I </span>
<span class="sv-normal">Introduction</span>
</a>
</li>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> MM </span>
<span class="sv-normal">Monthly meetings</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header waves-effect arrow-r">
<i class="sv-slim-icon far fa-envelope"></i>
Contact me<i class="fas fa-angle-down rotate-icon"></i>
</a>
<div class="collapsible-body">
<ul>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> F </span>
<span class="sv-normal">FAQ</span>
</a>
</li>
<li>
<a href="#" class="waves-effect">
<span class="sv-slim"> W </span>
<span class="sv-normal">Write a message</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a id="toggle" class="waves-effect">
<i class="sv-slim-icon fas fa-angle-double-left"></i>Minimize
menu
</a>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg rgba-blue-strong"></div>
</div>
<!--/. Sidebar navigation -->
@*<script asp-append-version="true" src="~/js/main.bundle.js"></script>*@
<script src="~/lib/mdbootstrap/js/jquery.js"></script>
<script src="~/lib/mdbootstrap/js/bootstrap.js"></script>
<script src="~/lib/mdbootstrap/js/popper.js"></script>
<script src="~/lib/mdbootstrap/js/mdb.js"></script>
<script src="~/lib/mdbootstrap/js/modules/sidenav.min.js"></script>
<script src="~/Src/js/test.js"></script>
</body>
</html>
And the javascript:
$(document).ready(function () {
$(".button-collapse").sideNav({
slim: true,
showOverlay: false
});
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
var ps = new PerfectScrollbar(sideNavScrollbar);
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Kiril free commented 4 years ago
OK, my browser windows was opened at a lower resolution than the default breakpoint, so that's why the fixed class didn't worked. Setting the breakpoint to 0 did the trick. BUT the slim option still doesn't work.