Topic: i can not able to make "sidebar-layouts v.7"
Hardik velani priority asked 4 weeks ago
Expected behavior
Actual behavior
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....
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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