CODEWITHSUNDEEP
csstwitter-bootstrap
Darryl
Darryl

Reputation: 1541

Form link rendered incorrectly in Twitter Bootstrap Navbar

I'm trying to tweak an existing Twitter Bootstrap navigation bar to include a sign-out item, which is implemented as a form:

<div class='navbar'>
<div class='navbar-inner'>
    <div class='container'>
        <a class='brand'>Test</a>
        <ul class='nav'>
            <li><a>Item 1</a></li>
            <li><a>Item 2</a></li>
            <li><form ><a href="submit()">Sign Out</a></form></li>
        </ul>
    </div>
</div>

The logout link gets rendered differently than the rest of the navigation items. I'm sure this is a simple fix for someone knowledgeable in Twitter Bootstrap, but I'm pretty lost and would appreciate a push in the right direction.

I have a JSFiddle demonstrating the issue here.

Upvotes: 0

Views: 44

Answers (2)

McCheeseIt
McCheeseIt

Reputation: 355

The <form> tag is disrupting the bootstrap CSS if you inspect the bootstrap code you can see the selector for the a styles are only targeting direct descendants of the <li> in the nav

.navbar .nav > li > a

I am not sure the indended application of the form is but a real easy fix is to wrap the entire navbar with the form. 

<form>
    <div class='navbar'><div class='navbar-inner'>
        <div class='container'>
            <a class='brand'>Test</a>
            <ul class='nav'>
                <li><a>Item 1</a></li>
                <li><a>Item 2</a></li>
                <li><a href="submit()">Sign Out</a></li>
            </ul>
        </div>
    </div>
</form>

Upvotes: 1

Dextere
Dextere

Reputation: 301

Try This

<li><a href="submit()">Sign Out</a></li>

remove the form tags

Check here JSFiddle

Upvotes: 0

Related Questions