Sidenav not fixed on large screens

Topic: Sidenav not fixed on large screens

orthlieb pro asked 6 years ago

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> &nbsp; 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">&nbsp;
              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">&nbsp;
              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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&nbsp;<strong>repent</strong> for them, and
            <strong>reveal vulnerably&nbsp;</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

orthlieb pro answered 6 years ago

0 0 Best answer

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?

Add comment

Marta Szymanska staff pro premium answered 6 years ago