Adding an external link to a nav bar using bootstrap

Question

Is it possible to include an external link in a nav bar utilizing bootstrap? When I wrap the Menu item text in an a link tag, the link doesn't work...am I missing something? Specifically, I would like to add an external link to a navigation menu in which the other items just link to areas on the page.

Answer 1

I had the same problem; I just redirect to external link with JQuery as follows:

HTML:

<ul class="nav">
    <li><a href="http://www.google.com" class="external">External</a></li>
    <li>...</li>
</ul>

JQuery:

function changePage(event) {
    if($(event.target).hasClass('external')) {
        window.location.href = $(event.target).attr('href');
        return;
    }
    //...
}
$(function () {
    $('.nav li').click( changePage );
}

Answer 2

I just tried this and didn't find any problem with this code in webkit:

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://google.com" target="_blank">Google</a></li>
                <li><a href="http://yahoo.com" target="_self">Yahoo</a></li>
            </ul>
        </div>
    </div>
</nav>

JSFiddle: http://jsfiddle.net/62DJW/1/ (note that external links with target="_self", the default target, does not load in a JSFiddle, but I confirmed it locally).

Can you include your example HTML / any custom CSS for your nav bar? There should be no reason to have to override anything with JQuery or JS.