How to remove dropdown icons and center align the icon in sl


Topic: How to remove dropdown icons and center align the icon in slim sidenav

Ramognee Technologies pro premium priority asked 6 months ago

Sidenav

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 6 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; }


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
  • 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