Topic: i can not able to make "sidebar-layouts v.7"

Hardik velani priority asked 4 weeks ago


Expected behavior

Actual behaviorside navbar  v.7 not clickable

Resources (screenshots, code snippets, etc.) here I am sharing the full HTML code with internal CSS & internal JavaScript added script. please help me...

testing /* Internal CSS */ @media (min-width: 1400px) { main, header, #main-navbar { padding-left: 240px; } }


<ul class="sidenav-menu px-2">
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-area fa-fw me-3"></i
        ><span>Website traffic</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-pie fa-fw me-3"></i><span>Sales</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link" href="">
      <i class="fas fa-chart-line fa-fw me-3"></i
        ><span>Subscriptions</span></a
      >
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link"
       ><i class="fas fa-cogs fa-fw me-3"></i><span>Settings</span></a
      >
    <ul class="sidenav-collapse">
      <li class="sidenav-item">
        <a class="sidenav-link">Profile</a>
      </li>
      <li class="sidenav-item">
        <a class="sidenav-link">Account</a>
      </li>
    </ul>
  </li>
  <li class="sidenav-item">
    <a class="sidenav-link"
       ><i class="fas fa-lock fa-fw me-3"></i><span>Password</span></a
      >
    <ul class="sidenav-collapse">
      <li class="sidenav-item">
        <a class="sidenav-link">Request password</a>
      </li>
      <li class="sidenav-item">
        <a class="sidenav-link">Reset password</a>
      </li>
    </ul>
  </li>
</ul>

  <!-- Search form -->
  <form class="d-none d-md-flex input-group w-auto my-auto">
    <input
           autocomplete="off"
           type="search"
           class="form-control rounded"
           placeholder='Search (ctrl + "/" to focus)'
           style="min-width: 225px"
           />
    <span class="input-group-text border-0"
          ><i class="fas fa-search"></i
      ></span>
  </form>

  <!-- Right links -->
  <ul class="navbar-nav ms-auto d-flex flex-row">
    <!-- Notification dropdown -->
    <li class="nav-item dropdown">
      <a
         class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
         href="#"
         id="navbarDropdownMenuLink"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <i class="fas fa-bell"></i>
        <span class="badge rounded-pill badge-notification bg-danger"
              >1</span
          >
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuLink"
          >
        <li><a class="dropdown-item" href="#">Some news</a></li>
        <li><a class="dropdown-item" href="#">Another news</a></li>
        <li>
          <a class="dropdown-item" href="#">Something else here</a>
        </li>
      </ul>
    </li>

    <!-- Icon dropdown -->
    <li class="nav-item dropdown">
      <a
         class="nav-link me-3 me-lg-0 dropdown-toggle hidden-arrow"
         href="#"
         id="navbarDropdown"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <i class="flag-united-kingdom flag m-0"></i>
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdown"
          >
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-united-kingdom flag"></i>English
            <i class="fa fa-check text-success ms-2"></i
              ></a>
        </li>
        <li><hr class="dropdown-divider" /></li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-poland flag"></i>Polski</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-china flag"></i>中文</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-japan flag"></i>日本語</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-germany flag"></i>Deutsch</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-france flag"></i>Français</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-spain flag"></i>Español</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-russia flag"></i>Русский</a
            >
        </li>
        <li>
          <a class="dropdown-item" href="#"
             ><i class="flag-portugal flag"></i>Português</a
            >
        </li>
      </ul>
    </li>

    <!-- Avatar -->
    <li class="nav-item dropdown">
      <a
         class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
         href="#"
         id="navbarDropdownMenuLink"
         role="button"
         data-mdb-dropdown-init
         aria-expanded="false"
         >
        <img
             src="https://mdbootstrap.com/img/new/avatars/2.jpg"
             class="rounded-circle"
             height="22"
             alt="Avatar"
             loading="lazy"
             />
      </a>
      <ul
          class="dropdown-menu dropdown-menu-end"
          aria-labelledby="navbarDropdownMenuLink"
          >
        <li><a class="dropdown-item" href="#">My profile</a></li>
        <li><a class="dropdown-item" href="#">Settings</a></li>
        <li><a class="dropdown-item" href="#">Logout</a></li>
      </ul>
    </li>
  </ul>
</div>
<!-- Container wrapper -->

https://mdbootstrap.com/img/new/textures/full/56.jpg'); height: 300px; z-index: -1; "

<div class="pb-2" style="background-color: hsl(0, 0%, 98%)">
  <div class="container">
    <div class="row d-flex justify-content-center align-items-center">
      <div class="col-lg-6 col-md-8 mb-4 mb-md-0 pt-4">
        <img
             src="https://mdbootstrap.com/img/new/avatars/18.jpg"
             class="rounded-circle float-none float-md-start me-4 mb-3"
             alt=""
             style="
                    width: 168px;
                    margin-top: -110px;
                    border: 4px solid hsl(0, 0%, 98%);
                    "
             />
        <h1 class="fw-bold">Anna Doe</h1>
        <p class="text-muted">
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Eveniet assumenda, commodi perferendis libero debitis harum ut
          sed nostrum minima aspernatur. .
        </p>
      </div>

      <div class="col-lg-6 col-md-4 mb-4 mb-md-0 text-center text-lg-end">
        <button type="button" class="btn btn-primary btn-rounded" data-mdb-ripple-init>
          Edit profile
        </button>
      </div>
    </div>
  </div>
</div>

// Internal JS const sidenav = document.getElementById("sidenav-1"); const sidenavInstance = mdb.Sidenav.getInstance(sidenav);

let innerWidth = null;

const setMode = (e) => { // Check necessary for Android devices if (window.innerWidth === innerWidth) { return; }

innerWidth = window.innerWidth;

if (window.innerWidth < 1400) { sidenavInstance.changeMode("over"); sidenavInstance.hide(); } else { sidenavInstance.changeMode("side"); sidenavInstance.show(); } };

setMode();

// Event listeners window.addEventListener("resize", setMode);


Grzegorz Bujański staff answered 1 week ago


I'm not sure if I understand correctly. Do you want Sidenav to always be hidden, regardless of the browser window width?

The code you posted above predicts that Sidenav will behave differently for screens with a width of less than 1400px and differently for screens with a larger width.

If you want Sidenav to be always hidden, you should use the basic example from our documentation and set the hidden option to true


Hardik velani priority answered 2 weeks ago


This snippet is really nice. but on the laptop screen side navbar is initially expanded or we can say "open". I want to make it initially hide in the top left corner on all devices.

What should I have to do; to make it hide initially all the time?


Kamila Pieńkowska staff answered 3 weeks ago


Here is a snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/6285712?view=project#html-tab-view


Hardik velani priority commented 1 week ago

I want to make the initially closed side navbar the same as this page:- https://mdbootstrap.com/docs/standard/

but in this snippet template that you have provided https://mdbootstrap.com/snippets/standard/kpienkowska/6285712?view=project#html-tab-view side nave bar is always open on the laptop screen what should I have to do for make it initially close in the laptop screen. as used in https://mdbootstrap.com/docs/standard/ please guide me....



Please insert min. 20 characters.

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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 8.0.0
  • Device: laptop
  • Browser: chrome
  • OS: windows 11
  • Provided sample code: No
  • Provided link: No