CODEWITHSUNDEEP
cssbootstrap-4
Philippe Haumesser
Philippe Haumesser

Reputation: 647

Bootstrap NAVBAR item t on the left of dropdown list

this is my code:

<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <a href="{% url 'index' %}" class="navbar-brand my-0 mr-md-auto font-weight-normal">App</a>
    <a href="{% url 'index' %}" class="navbar-brand my-0 mr-md-auto font-weight-normal">App</a>
        <nav >
            {% if user.is_authenticated %}

                    <a class="nav-link" href="#">Link 1</a>

            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ user.username }}</a>
                            <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="{% url 'listingfournisseur' %}">Update fournisseur list</a>
                                <a class="dropdown-item" href="{% url 'updatepayables' %}">Eletronic Payment</a>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item" href="{% url 'listingclient' %}">Update Clients list</a>
                                <a class="dropdown-item" href="{% url 'account_logout' %}">Log Out</a>
                            </div>
                </li>
            </ul>
            {% else %}

            <a class="p-2 text-dark" href="{% url 'account_login' %}">Log In</a>
            <a class="btn btn-outline-primary" href="{% url 'account_signup' %}">Sign Up</a>
            {% endif %}
        </nav>
</div>

I m tring to have link1 item just on the left of dropdown. I don t understand why it is up to dropdown ?

this is what I see: enter image description here

thanks for help

Upvotes: 0

Views: 50

Answers (1)

zerbene
zerbene

Reputation: 1502

In you nav add the CSS property display: flex and you will have it one next to the other. But after you will just have to play with the size because an tag don't have "padding" but tag have top, left and bottom "padding".

<nav class="b">
  <div><a href="#home">ets</a></div>
  <div><ul><a href="#news">test</a></ul></div>
</nav>

<style>
.b{
 display:flex;
}
</style>

Upvotes: 2

Related Questions