Topic: How to remove dropdown icons and center align the icon in slim sidenav
Ramognee Technologies pro premium priority asked 8 months ago
All icons are not centered aligned and want to remove dropdown icons
When the page gets refreshed the icon is centred and aligned inside the slim sidenav but immediately it gets shifted to the left which leads to UI issue
To remove the dropdown I used
li .fa-angle-down{
display: none;
}
Any other alternative
Current code snippet
<nav id="side_sidenav" class="sidenav d-flex flex-column align-items-between rounded-end-3" data-mdb-sidenav-init data-mdb-mode="side"
data-mdb-slim="true" data-mdb-slim-collapsed="true" data-mdb-content="#slim-content"
data-mdb-accordion="true" data-mdb-color="warning" data-mdb-hidden="false">
<ul class="sidenav-menu d-flex flex-column h-100">
<li class="sidenav-item text-white">
<a class="sidenav-link p-2" id="slim_toggler">
<img src="light.png" class="me-3"
width="45"><span class="h4 fw-bold m-0" data-mdb-slim="false">TEST</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Dashboard">
<a class="sidenav-link" th:href="@{/}">
<i class="fa-solid fa-house fa-lg"></i><span class="ms-3" data-mdb-slim="false">Dashboard</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="New Project">
<a class="sidenav-link" data-mdb-modal-init data-mdb-target="#create_project_modal">
<i class="fa-solid fa-folder-plus fa-lg"></i><span class="ms-3" data-mdb-slim="false">New Project</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Create Scans">
<a class="sidenav-link">
<i class="fa-solid fa-magnifying-glass-plus fa-lg"></i><span class="ms-3" data-mdb-slim="false">Create
Scans</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="User Settings">
<a class="sidenav-link"><i class="fa-solid fa-user-gear fa-lg"></i><span class="ms-3" data-mdb-slim="false">User
Settings</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-users fa-lg me-3"></i>Create Roles</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-user-lock fa-lg me-3"></i>Permission Control</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-user-plus fa-lg me-3"></i>Create Users</a>
</li>
</ul>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="System Settings">
<a class="sidenav-link"><i class="fa-solid fa-sliders fa-lg"></i><span class="ms-3" data-mdb-slim="false">System
Settings</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-brands fa-codepen fa-lg me-3"></i>Authentication</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-envelope fa-lg me-3"></i>Mail</a>
</li>
</ul>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Integrations">
<a class="sidenav-link"><i class="fa-solid fa-file-code fa-lg"></i><span class="ms-3"
data-mdb-slim="false">Integrations</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link">Jira</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Postman</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">OWASP Zap</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Burpsuite</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Eclipse</a>
</li>
</ul>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Custom Payloads">
<a class="sidenav-link">
<i class="fa-solid fa-layer-group fa-lg"></i><span class="ms-3" data-mdb-slim="false">Custom
Payloads</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Organisation">
<a class="sidenav-link">
<i class="fa-solid fa-sitemap fa-lg"></i><span class="ms-3" data-mdb-slim="false">Organisation</span></a>
</li>
<li class="sidenav-item text-white" data-mdb-tooltip-init title="Information">
<a class="sidenav-link"><i class="fa-solid fa-circle-info fa-lg"></i><span class="ms-3"
data-mdb-slim="false">Information</span></a>
<ul class="sidenav-collapse">
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-file-invoice fa-lg me-3"></i>User Manual</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link"><i class="fa-solid fa-file-zipper fa-lg me-3"></i>Log Files</a>
</li>
</ul>
</li>
<li class="sidenav-item text-white mt-auto" data-mdb-tooltip-init title="Logout">
<a class="sidenav-link" id="logout_btn">
<i class="fa-solid fa-right-from-bracket fa-lg"></i><span class="ms-3" data-mdb-slim="false">Logout</span></a>
</li>
</ul>
</nav>
Kamila Pieńkowska staff answered 8 months ago
What breaks your current code is 'data-mdb-modal-init` in one of the links.
To center icons in sidenav slim you can add:
.sidenav-slim .sidenav-link{
justify-content: center;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: Laptop
- Browser: Chrome
- OS: Kubuntu
- Provided sample code: No
- Provided link: No