Topic: Sidenav not fixed on large screens
Side nav not fixed on larger devices. Is there a missing class I need to add or is this a bug?
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/splash/splash-icon.png">
<link rel="apple-touch-startup-image" href="img/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image" href="img/splash/splash-screen@2x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="640x1096" href="img/splash/splash-screen@3x.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash/splash-screen-ipad-landscape" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash/splash-screen-ipad-portrait.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)" />
<link rel="apple-touch-startup-image" sizes="1536x2008" href="img/splash/splash-screen-ipad-portrait-retina.png" media="(device-width: 768px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" sizes="1496x2048" href="img/splash/splash-screen-ipad-landscape-retina.png" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
<title>Normal To Noble</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="node_modules/@fortawesome/fontawesome-pro/css/all.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="fixed-sn white-skin">
<!-- You write code for this content block in another file -->
<!-- Adds the nav macro -->
<!-- params = { icon: 'fas fa-crown', title: 'Courageous Conversation', id: 'courageous' } -->
<header>
<!-- Sidebar navigation -->
<div id="slide-out" class="side-nav fixed">
<ul class="custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light waves-effect waves-light">
<a href="index.html"><img src="img/logo-stacked.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!-- Side navigation links -->
<li>
<a href="normal-to-noble.html">
<i class="fal fa-arrow-circle-right"></i>
Normal To Noble
</a>
</li>
<li>
<a href="courageous.html">
Courageous
</a>
</li>
<li>
<a href="comforting.html">
Comforting</a>
</li>
<li>
<a href="connecting.html">
Connecting</a>
</li>
<li>
<a href="collaborating.html">
Collaborating</a>
</li>
<li>
<a href="conciliatory.html">
Conciliatory</a>
</li>
<li>
<a href="prayers.html">
Prayers</a>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse ml-0 pr-2">
<i class="fas fa-bars"></i>
</a>
</div>
<!-- Breadcrumb-->
<div class="ml-2 mr-auto navbar-text navbar-light">
<i class="fas fa-chess-knight"></i> Normal To Noble
</div>
</nav>
<!-- /.Navbar -->
</header>
<!--- Content for this page -->
<main class="pt-5 mx-0">
<!-- params = { cards: 'comforting-great', titles: [ '1. What can you be grateful for', ...] } -->
<!-- Nav tabs -->
<div class="classic-tabs">
<ul class="nav tabs-white tabs-text mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link waves-light active show" data-toggle="tab" href="#normal-to-noble-panel-1" role="tab">
<i class="fas fa-fire"></i>
<span class="d-none d-md-block">
Normal</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-light " data-toggle="tab" href="#normal-to-noble-panel-2" role="tab">
<i class="fas fa-chess-knight"></i>
<span class="d-none d-md-block">
Noble</span></a>
</li>
</ul>
<div class="tab-content border-right border-bottom border-left rounded-bottom pt-2">
<div class="tab-pane fade in show active" id="normal-to-noble-panel-1" role="tabpanel">
<h4>The Normal Cycle</h4>
<img class="w-100" src="img/normal-to-noble/normal.png" alt="The Normal Cycle" />
<p>This diagram shows the states that we go through on a normal cycle, represented by the circle on the left. It usually starts with a
<strong>desire</strong>
<a href="https://www.biblegateway.com/passage/?search=James+4%3A1-11&version=NLT">James 4:1-11</a> but it meets
<strong>resistors</strong>, things that come against the desire. They might be physical or financial limitations or it could simply be your spouse, who in your opinion, is not cooperating.
<a href="https://www.biblegateway.com/passage/?search=James+4%3A6&version=NLT">James 4:6</a>
</p>
<p>
This leads to
<strong>conflict</strong> with usually predictable results. When we work from our desires and our flesh we often do and say things that we regret later.
<a href="https://www.biblegateway.com/passage/?search=Proverbs+13%3A10&version=NLT">Proverbs 13:10</a>
</p>
<p>
When we realize that we’ve stepped outside of God’s boundaries we feel
<strong>guilty</strong>.
<a href="https://www.biblegateway.com/passage/?search=Leviticus+5%3A17&version=NLT">Leviticus 5:17</a>
</p>
<p>
This causes us to
<strong>blame</strong> others in order to feel better about ourselves but this is a fallacy. It really doesn’t make us feel better at all.
<a href="https://www.biblegateway.com/passage/?search=Proverbs+14%3A3&version=NLT">Proverbs 14:3</a>
</p>
<p>
At this point we have a
<strong>decision</strong>: we can continue on the normal cycle of judgment
<a href="https://www.biblegateway.com/passage/?search=Genesis+3%3A10&version=NLT">Genesis 3:10</a> or be courageous and take the noble path.</p>
<p>If we follow the normal cycle, we feel
<strong>ashamed</strong> for our actions, our guilt, and our blaming.
<a href="https://www.biblegateway.com/passage/?search=Proverbs+11%3A2&version=NLT">Proverbs 11:2</a>
</p>
<p>
We enter into
<strong>condemnation</strong> where we beat ourselves up for our behavior.
<a href="https://www.biblegateway.com/passage/?search=Proverbs+29%3A23&version=NLT">Proverbs 29:23</a>
</p>
<p>
We get
<strong>apathetic</strong>: “Things will never change.”, “I’m not good enough”, “I don’t deserve better”, “Why bother?” and sit
<strong>helplessly</strong> focused our on own discomfort and shortcomings.
</p>
<p>This leads to
<strong>regret</strong>, where we mull over our actions and choices and what we could have done differently.</p>
<p>We then
<strong>fear</strong> that things won’t change, that we’ll be trapped, and that there is no way out.
<p></p>This then leads to a
<strong>desire</strong> to change things again, starting the cycle over.</p>
<p>
<b>That is the Normal Cycle.</b>
</p>
</div>
<div class="tab-pane fade in " id="normal-to-noble-panel-2" role="tabpanel">
<h4>The Noble Path</h4>
<img class="w-100" src="img/normal-to-noble/joymountain.png" alt="The Noble Path" />
<p>The noble path requires courage to
<strong>recognize reality</strong>: what the facts are, what your desires are, and whether they are Godly.</p>
<p>It requires us to
<strong>receive reproof</strong> for those things that we are responsible for, to <strong>repent</strong> for them, and
<strong>reveal vulnerably </strong>what we really need and what our fears and weakness are.</p>
<p>This means that we need to
<strong>surrender</strong> our outcome (the desire) and trust God to deliver.</p>
<p>Taking this path consistently with your spouse will show that you have
<strong>willingness</strong> to understand and change where appropriate, a deep intimate
<strong>understanding</strong> of your spouse, leading to greater
<strong>love</strong>,
<strong>peace</strong> in your household, and
<strong>joy</strong> in each other and God.</p>
<p>
<b>That is the Noble Path.</b>
</p>
</div>
</div>
</div>
</main>
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Your application script -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Add comment
Hi,
in mdb.js change this line:
const SN_BREAKPOINT = 1440;to for example:
const SN_BREAKPOINT = 1023;and save. Best, Marta
It looks like it does show up at > 1441px which is bigger than an iPad Pro turned landscape? I think the Apple standard is that you must have a fixed sidenav for iPad/iPad Pro landscape. Any way to change the threshold?
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: 4.5.9
- Device: Laptop
- Browser: Chrome
- OS: Mac OS X
- Provided sample code: No
- Provided link: No