CODEWITHSUNDEEP
bootstrap-4
Vamsi
Vamsi

Reputation: 151

How to avoid white space after logo for navbar?

.navcolor {
    background-color: #ffffff !important;
}

.logoWidth {
    height:  100% !important;
    width:   23.1% !important;
    margin: -1% 0% 0% 23.3% !important;
    padding: 0% 0% 0% 0% !important;
}
<nav class="navbar navbar-expand-lg navbar-light navcolor bg-light">
    <a class='space' href="https://dev.jillako.com/en/flights">
        <img class='logoWidth' src="/assets/logo.png" alt="">
    </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Flights</a>
            <a class="nav-item nav-link" href="#">Hotels</a>
            <a class="nav-item nav-link" href="#">Offers</a>
          </div>
        </div>
</nav>

I am trying to create a Navbar with bootstrap 4, so first I put a logo inside the anchor tag. Next I started keeping Home, About Us, like that But white space is coming between anchor tag and home? How to resolve this problem please help me with this issue?

Upvotes: 1

Views: 36

Answers (1)

Sai Manoj
Sai Manoj

Reputation: 3849

You can specify width:**px to your navbar-logo <img> and you can use class="ml-auto" to align list to the right side 

      <nav class="navbar navbar-expand-lg navbar-light navcolor bg-light">
            <a class='space' href="https://dev.jillako.com/en/flights">
                <img class='logoWidth' src="/assets/image.jpg"
                    style="width:100px">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav ml-auto">
                    <a class="nav-item nav-link active" href="#">Flights</a>
                    <a class="nav-item nav-link" href="#">Hotels</a>
                    <a class="nav-item nav-link" href="#">Offers</a>
                </div>
            </div>
        </nav>

Upvotes: 1

Related Questions