Bootstrap: Link styled as Button in Navbar is too big

[1st]

Hello!

When I insert <button> to navbar-nav - all works fine. But when I try to insert <a class="btn btn-default navbar-btn"> - I see too big button.

Please fix this bug in the next release of the best web UI framework!

    <!-- Fixed navbar -->
    <header class="navbar navbar-default navbar-fixed-top" role="banner">
    <!-- <div class="navbar navbar-default navbar-fixed-top"> -->
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".top_menu.navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">SITE.com</a>
            </div>
            <div class="top_menu collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="btn btn-success navbar-btn">Sign in 2</a></li>
                    <li><a href="/register">Registration</a></li>
                    <li><button type="button" class="btn btn-success navbar-btn">Sign in</button></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    <!-- </div> -->
    </header>

Sign in - looks good.
Sign in 2 - looks bad :-(

Thanks.
Anton

[mdo]

We've covered this quite a lot—don't apply button classes to navbars. We don't support that.

[1st]

Guys, I am sorry, but it's not natural approach - it's hack. Why I can't use button link in navbar? I need to have link that follow me to login page. and this should be displayed as button. If it isn't work yet - you can fix it. But it's not good to say "somewhere we described that <A> can't be a button". I showed real example when I need to use link instead of button.

I understand that maybe it's hard to implement button styles in navbar. But it's flexibility - you can implement as more freedom for developers as you can.

I deleted class navbar-btn for link - but my buttons shown not good. Please see attachment (as before - "Sign in 2").

[juthilo]

Just FYI, I think a.navbar-btn works just fine outside of navbar-nav lists.

[1st]

@juthilo You are correct. If I place <a class="btn btn-success navbar-btn">Sign in 2</a> outside the navbar-nav than button shown correct. The issue only with button that placed inside navbar-nav.

[bassjobsen]

I just read: "don't apply button classes to navbars. We don't support that"....... but <button class"nav-btn"> should work and supported ?

(@juthilo) In this case will it be wrong to add a button in stead of <a class="btn btn-success navbar-btn"> inside the navbar-nav, like:

<ul class="nav navbar-nav navbar-right">
  <li><a href="#">Link</a></li>
  <li><button type="button" class="btn btn-default navbar-btn">Sign in</button></li>
</ul>

When doing this the button don't getting the same padding as an anchor, see:

Same question for button-group

<ul class="nav navbar-nav navbar-right">
    <li>
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle navbar-btn" data-toggle="dropdown">
              Dropdown
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <li><a href="#">Dropdown link</a></li>
              <li><a href="#">Dropdown link</a></li>
            </ul>
          </div>
    </li>
</ul>   

Inside the navbar-nav the carret don't have the right style. Before @grid-float-breaking the dropdown also acts different when inside or outside the navbar-nav.

Inside the navbar-nav:

Outside:

[KrisSiegel]

I just ran across this issue. Pretty disappointing it's a continued issue that won't be addressed. If you want a button that has an href you use an anchor with the appropriate styles I don't see any reason why this wouldn't be addressed (and if there is a good reason it's certainly not communicated well at all nor with the proper way to do so).

[JSurf]

Here is a workaround for people searching for a navbar button that works like a href:

<form action="logout"><button class="navbar-btn btn btn-default" href="logout">Logout</button></form>

[julienbornstein]

Hack : <a> is not valid, but you can use <button> with onclick()
<button onclick="javascript:location.href='https://www.exemple.com';">