CODEWITHSUNDEEP
htmlcssbootstrap-4
Trần Xuân Huy
Trần Xuân Huy

Reputation: 465

Why my element needs to be clicked on in order for CSS to work?

My element has to be clicked on for CSS to work.

I tried using bootstrap for a nav bar. With 1 logout link on the top right. I used navbar-nav ml-auto for it.

After that, I tried to override spacing of bootstrap by adding margin-right: 50% !important;

When I refresh the page, it is not applied immediately. If I clicked on the link, it will "jump" to the left as I expected.

Here is what I've tried: 

 <nav class="navbar navbar-expand-sm bg-light">
        <!-- Links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Category</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog posts</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Role Management</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">User Management</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">File and Folder Management</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li>
                <a class="nav-item" id="logout-btn" href="#"> Logout </a>
            </li>
        </ul>
    </nav>

CSS: 

* {
    /*display: none;*/
    box-sizing: border-box;
}
 #logout-btn.nav-item {
    margin-right: 50% !important;   
}

Can you help me explain why, or is it my browser's fault? I find it quite weird, already cleared cached.

Upvotes: 0

Views: 49

Answers (1)

Munsheer EK
Munsheer EK

Reputation: 96

Remove css style for logout-btn.nav-item which you override. this get applied to the anchor tag. we need to add margin to the ul tag not to a tag. so we have bootstrap 4 in-built margin classes, so we can make use of it. so remove overrided styles and add mr-4 class to the second ul which contains the logout link.The modified code is given below.

 <nav class="navbar navbar-expand-sm bg-light">
        <!-- Links -->
     <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Category</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Blog posts</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Role Management</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">User Management</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">File and Folder Management</a>
        </li>
     </ul>
     <ul class="navbar-nav ml-auto mr-4">
        <li>
            <a class="nav-item" id="logout-btn" href="#"> Logout </a>
        </li>
     </ul>
</nav>

Upvotes: 1

Related Questions