0

I've followed this post accepted answer to vertical align my navbar links with my logo.

But my SignIn link also follow the vertical size and span to the full 50px of the navbar height: enter image description here

How can I set a normal height to my Sign In button?

Thanks.

HTML:

<!-- /navbar -->
<nav class="navbar navbar-static-top bg-faded">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header"
                        aria-controls="navbar-header">
                    &#9776;
                </button>
    <!-- Logo -->
    <a class="navbar-brand" href="/en/">
        <img class="img" height="50px" src="/static/images/logo.png"/>
    </a>
    <div class="collapse navbar-toggleable-xs" id="navbar-header">
        <ul class="nav navbar-nav">
            <!-- logged-in nav items -->
            <!-- <a class="nav-item nav-link " href="/en/product/">Product</a> -->
            <!-- <a class="nav-item nav-link " href="/en/pricing/">Pricing</a> -->
            <!-- <a class="nav-item nav-link " href="/en/clients/">Clients</a> -->
            <a class="nav-item nav-link " href="/en/about/">About Us</a>
        </ul>
        <!-- to designers: I am not sure about the 'float: right' style -->
        <ul class="nav navbar-nav" style="float: right">
            <!-- ... -->
            <a class="nav-item btn btn-primary" href="/en/accounts/login/">Sign In</a>
        </ul>
    </div>
</nav>

And CSS:

.navbar {
  background-color: white;
  border-bottom-color: lightgray;
  border-bottom-style: solid;
  border-bottom-width: thin;
}

.nav-item {
 line-height: 50px;
}
Community
  • 1
  • 1
bixente57
  • 1,328
  • 4
  • 14
  • 29

1 Answers1

0

You are applying the CSS class nav-item which sets line-height: 50px to "Sign in" button. Simply remove it like so:

<a class="btn btn-primary" href="/en/accounts/login/">Sign In</a>

That will make the button height normal. But you ll still have to add something like a top margin to vertically align the button with other links and logo.

.navbar-nav .btn {
    margin-top: 10px; // Adjust the actual number of pixels accordingly
}

However you HTML code is also no quite valid. If the hackish code was not intentional you should refer Bootstrap Docs to correctly apply their HTML structures and CSS classes.

Sasindu Mendis
  • 346
  • 2
  • 7