Modif the interline in nav

Question

Hi I would like to know if you can tell me how to modify the interline in nav bar

extract navmenu.razor

            @if (expandSubNavFollow)
            {
                <ul class="nav flex-column">
                    <li class="nav-item px-3" style="list-style-type: none;">
                        <NavLink class="nav-link" href="actionprojet/projetp1">
                        <span aria-hidden="true" align="right"></span>Actions List
                    </NavLink>
                    </li>
                    <li class="nav-item px-3" style="list-style-type: none;">
                        <NavLink class="nav-link" href="etude">
                        <span aria-hidden="true" align="right"></span>ECR
                    </NavLink>
                    </li>
                    <li class="nav-item px-3" style="list-style-type: none;">
                          <NavLink class="nav-link" href="notificationpage">
                        <span aria-hidden="true" align="right"></span>Notification
                        </NavLink>
                    </li>
                    <li class="nav-item px-3" style="list-style-type: none;">
                         <NavLink class="nav-link" href="cmmpage">
                           <span aria-hidden="true" align="right"></span>CMM
                         </NavLink>
                    </li>
                </ul>               
    

thanks in advance

Answer 1

Hi @sblb

I want to reduce the height interline between actionlist et ecr e.g

You are using the Asp.net core template to create the application and directly add your nav bar using the default NavMenu.razor page, right?

If that is the case, try to use F12 developer Elements tools to check the html element and the CSS, you can see the issue relates the .nav-item class, by default, it will set the height property as 3rem.

You can check the NavMenu.razor.css file:

Then, to modify the interline, you can change the height property as below:

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 1rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

After that the result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion