Question

I am trying to build a topbar that has some links on the left and to the right, there will be a Login Link which would open the Login Form in a DropDown. I also want that the Login form should behave like a selected Tab when clicked (or when the dropdown is open)

My code looks like this :-

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container">
        <ul class="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Section1</a></li>
            <li><a href="#">Section2</a></li>
        </ul>

        <ul class="nav nav-tabs pull-right signin-menu">
            <li class="dropdown" data-dropdown="dropdown"><a href="#" data-toggle="dropdown" class="login-link dropdown-toggle">Login</a>
                <ul class="dropdown-menu" id="signin-dropdown">
                    <li>
                        <form>....</form>
                    </li>
                </ul>
            </li>   
        </ul>           
    </div>
</div>

I’ve got 2 lists, one of them to the right as I wanted it to behave like tabs. My problem is that I can’t remove the little arrow that points to the Login Link when the dropdown is open. I want it to look like a selected Tab with dropdown below it, without the pointing arrow.

Also, the tab looses it’s rounded corners when selected. I am sure it’s a CSS issue but not sure where to look for it..

Any ideas?

P.S. I am on BootStrap v2.0.1

Answer 1

The arrow is added by the bootstrap by using a pseudo-element, you can negate that feature on the “login” portion of your code by targeting that unique class you added, to leave the default behavior untouched for other menu elements. This way also makes for a no-fuss bootstrap update.

You can remove the dropdown arrow on the login box by adding display:none to the corresponding pseudo-class like so:

CSS

.signin-menu .dropdown-menu:before {
    display: none;
}

.signin-menu .dropdown-menu:after {
    display: none;
}

Quick Demo, edit here.