Topic: Can I change the behavior of the left side nav in Admin Template?

Ken Wilson free asked 3 years ago


Is it possible to change when the nav is visible, to be specific I would like to have it become visible at 1600px instead of 1441px.


Bartosz Termena staff answered 3 years ago


Dear @Ken Wilson

You can adjust the content or top nav using @media only screen and

Below is my example:

HTML:

<!--Double navigation-->
<header>
  <!-- Sidebar navigation -->
  <mdb-side-nav #sidenav class="sn-bg-1 fixed" [fixed]="true" [sidenavBreakpoint]="1601">
    <mdb-navbar-brand>
      <!-- Logo -->
      <li>
        <div class="logo-wrapper waves-light">
          <a href="#"
            ><img
              src="https://mdbootstrap.com/img/logo/mdb-transparent.png"
              class="img-fluid flex-center"
          /></a>
        </div>
      </li>
      <!--/. Logo -->
    </mdb-navbar-brand>

    <links>
      <!--Social-->
      <li>
        <ul class="social">
          <li>
            <a class="icons-sm fb-ic"><mdb-icon fab icon="facebook"> </mdb-icon></a>
          </li>
          <li>
            <a class="icons-sm pin-ic"><mdb-icon fab icon="pinterest"> </mdb-icon></a>
          </li>
          <li>
            <a class="icons-sm gplus-ic"><mdb-icon fab icon="google-plus"> </mdb-icon></a>
          </li>
          <li>
            <a class="icons-sm tw-ic"><mdb-icon fab icon="twitter"> </mdb-icon></a>
          </li>
        </ul>
      </li>
      <!--/Social-->
      <!--Search Form-->
      <li>
        <form class="search-form" role="search">
          <div class="form-group md-form mt-0 pt-1" mdbWavesEffect>
            <input type="text" class="form-control" placeholder="Search" />
          </div>
        </form>
      </li>
      <!--/.Search Form-->
      <!-- Side navigation links -->
      <li>
        <ul class="collapsible collapsible-accordion">
          <mdb-accordion [multiple]="false" aria-multiselectable="false">
            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect
                ><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" mdbWavesEffect>Link 2</a></li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect
                ><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
              </mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect
                ><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
              </mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" mdbWavesEffect>Link 2</a></li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

            <!-- Simple link -->
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect
                ><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head
              >
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        </ul>
      </li>
      <!--/. Side navigation links -->
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>
  <!--/. Sidebar navigation -->

  <!-- Navbar -->
  <mdb-navbar
    SideClass="navbar fixed-top navbar-toggleable-lg navbar-expand-lg scrolling-navbar double-nav"
    [containerInside]="false"
  >
    <navlinks class="navbar-container">
      <!-- SideNav slide-out button -->
      <div class="float-left">
        <a (click)="sidenav.show()" class="button-collapse"
          ><mdb-icon fas icon="bars"></mdb-icon
        ></a>
      </div>
      <!--/. SideNav slide-out button -->
    </navlinks>

    <mdb-navbar-brand>
      <!-- Breadcrumb-->
      <div class="breadcrumbs breadcrumb-dn mr-auto">
        <p>Material Design for Bootstrap</p>
      </div>
      <!--/. Breadcrumb-->
    </mdb-navbar-brand>

    <navlinks>
      <ul class="nav navbar-nav nav-flex-icons ml-auto ie-double-nav">
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect
            ><mdb-icon fas icon="envelope"></mdb-icon>
            <span class="clearfix d-none d-sm-inline-block">Contact</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect
            ><mdb-icon far icon="comments"></mdb-icon>
            <span class="clearfix d-none d-sm-inline-block">Support</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link waves-light" mdbWavesEffect
            ><mdb-icon fas icon="user"></mdb-icon>
            <span class="clearfix d-none d-sm-inline-block">Account</span></a
          >
        </li>
        <li class="nav-item dropdown btn-group" dropdown>
          <a
            dropdownToggle
            type="button"
            class="nav-link dropdown-toggle waves-light"
            mdbWavesEffect
          >
            Dropdown
          </a>
          <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>
    </navlinks>
  </mdb-navbar>
  <!--/. Navbar -->
</header>
<!--/.Double navigation-->

<!--Main Layout-->
<main>
  <div class="container-fluid mt-5">
    <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
    <br />
    <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
    <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
    <div style="height: 2000px"></div>
  </div>
</main>
<!--/Main layout-->

styles.scss:

@media only screen and (max-width: 1601px) {
  .double-nav .button-collapse {
    display: block !important;
  }
  .fixed-sn .double-nav,
  .fixed-sn main,
  .fixed-sn footer {
    padding-left: 0;
  }
}
@media only screen and (min-width: 1601.5px) {
  .double-nav .button-collapse {
    display: none !important;
  }
}

Hope it helps!

Best Regards, Bartosz.


Ken Wilson free commented 3 years ago

Thank You Bartosz!


Bartosz Termena staff answered 3 years ago


Dear @Ken Wilson

Use sidenavBreakpoint Input, it allow you to change default sidenav breakpoint, here is an example:

<mdb-side-nav #sidenav class="fixed" [fixed]="true" [sidenavBreakpoint]="1601">

Best Regards, Bartosz.


Ken Wilson free commented 3 years ago

I added the attribute.... and it did successfully hide the side nav. However, this did not adjust the content or top nav as margin on left is still applied if less than 1601


Ken Wilson free commented 3 years ago

if i add the following to my SCSS all works as expected:

@media only screen and (max-width : 1601px) { header, main, footer { padding-left: 0 !important; } .fixed-sn .double-nav, .fixed-sn main, .fixed-sn footer { padding-left: 0 !important; } .double-nav .button-collapse-non-fixed { display: block !important; left: 10px !important; top: 15px !important; font-size: 1.4rem !important; margin-right: 10px !important; margin-left: 10px !important; } .breadcrumbs { margin-left: 0 !important; padding-left: 10px !important; }

}



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.2.0
  • Device: MAC
  • Browser: CHROME
  • OS: OSX
  • Provided sample code: No
  • Provided link: No