This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 5 years ago.
I just switched to bootstrap 4 and reworking all my html and scss to work with it and I cant seem to find how to put a group of nav-items on the right side of the navbar. This is my navbar code:
<nav class="navbar navbar-full navbar-dark bg-primary">
<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<%= link_to "Living Recipe", recipes_path(sort_attribut: "popularity", sort_order: :desc), class: "navbar-brand" %>
<div class="collapse navbar-toggleable-sm" id="navbarResponsive">
<ul class="nav navbar-nav float-md-left">
<li class="nav-item">
<%= form_tag(recipes_path, :method => "get", id: "search-form", class: "form-inline") do %>
<%= text_field_tag :search, params[:search], placeholder: "Search Recipes", class: "form-control col-md-8" %>
<% end %>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Browse</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<%= link_to "Popular", recipes_path(sort_attribute: "popularity", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Newest", recipes_path(sort_attribute: "created_at", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Most Updated", recipes_path(sort_attribute: "most_active", sort_order: :desc), class: "dropdown-item" %>
<%= link_to "Most Saved", recipes_path(sort_attribute: "save_count", sort_order: :desc), class: "dropdown-item" %>
</div>
</li>
</ul>
<ul class="nav navbar-nav float-md-right">
<% if user_signed_in? %>
<li class="dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<%= current_user.displayname.present? ? "D-ring" : current_user.firstname %>
</a>
<div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
<%= link_to "Profile", user_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Recipe Box", user_saved_recipes_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Add Recipe", new_recipe_path, class: "dropdown-item" %>
<%= link_to "Submitted Recipes", user_path(current_user.id), class: "dropdown-item" %>
<%= link_to "Sign Out", destroy_user_session_path, :method => :delete, class: "dropdown-item" %>
</div>
</li>
<% else %>
<li class="nav-item">
<%= link_to "Create Account", '', data: {:'toggle' => 'modal', :'target' => '#signupModal'}, class: "nav-link" %>
</li>
<li class="nav-item">
<%= link_to "Login", '', data: {:'toggle' => 'modal', :'target' => '#loginModal'}, class: "nav-link" %>
</li>
<% end %>
</ul>
</div>
</nav>
And this is the screenshot of what it looks like
TL;DR:
Create another <ul class="navbar-nav ml-auto"> for the navbar items you want on the right.
ml-auto will pull your navbar-nav to the right where mr-auto will pull it to the left.
Tested against Bootstrap v4.5.2
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
<style>
/* Stackoverflow preview fix, please ignore */
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link">Left Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link">Left Link 2</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">Right Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown on Right</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action with a lot of text inside of an item</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
</body>
</html>
As you can see additional styling rules have been added to account for some oddities in Stackoverflows preview box.
You should be able to safely ignore those rules in your project.
As of v4.0.0 this seems to be the official way to do it.
EDIT: I modified the Post to include a dropdown placed on the right side of the navbar as suggested by #Bruno. It needs its left and right attributes to be inverted. I added an extra snippet of css to the beginning of the example code.
Please note, that the example shows the mobile version when you click the Run code snippet button. To view the desktop version you must click the Expand snippet button.
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
Including this in your stylesheet should do the trick.
In last versions, it is easier. Just put a ml-auto class in the ul like so:
<ul class="nav navbar-nav ml-auto">
This should work for alpha 6. The key is the class "mr-auto" on the left nav, which will push the right nav to the right. You also need to add navbar-toggleable-md or it will stack in a column instead of a row. Note I didn't add the remaining toggle items (e.g. toggle button), I added just enough to get it to formatted as requested. Here are more complete examples https://v4-alpha.getbootstrap.com/examples/navbars/.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="nav navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link on the Right</a>
</li>
</ul>
</div>
</nav>
</body>
I have a working codepen with left- and right-aligned nav links that all collapse into a responsive menu together using .justify-content-between on the parent tag: https://codepen.io/epan/pen/bREVVW?editors=1000
<nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Acme</a>
<div class="collapse navbar-collapse justify-content-between" id="navbar">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Ball Bearings</a>
<a class="nav-item nav-link" href="#">TNT Boxes</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</nav>
In Bootstrap 4 alpha-6 version, As navbar is using flex model, you can use justify-content-end in parent's div and remove mr-auto.
<div class="collapse navbar-collapse justify-content-end" id="navbarText">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
This works like a charm :)
With Bootstrap v4.0.0-alpha.6: Two <ul>s (.navbar-na), one with .mr-auto and one with .ml-auto:
<nav ...>
...
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Left Link </a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Right Link </a>
</li>
</ul>
</div>
</nav>
In my case, I was looking for a solution that allows one of the navbar items to be right aligned. In order to do this, you must add style="width:100%;" to the <ul class="navbar-nav"> and then add the ml-auto class to your navbar item.
Here and easy Example.
<!-- Navigation bar-->
<nav class="navbar navbar-toggleable-md bg-info navbar-inverse">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
<div class="navbar-nav ml-auto " style="width:100%">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Training</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
Related
I am new to bootstrap , how can i add name and image in right of navbar as shown in image. On hovering of image logout should be display, how can i do it using bootstrap in mvc project
Refer to bootstrap navbar
Below is a demo:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
UserName
<img class="img-thumbnail rounded-circle" style="width: 50px; height: 50px;" src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg">
</form>
</div>
</nav>
Result:
<nav>
...
<span class="float-right">
UserName
<img class="img-thumbnail rounded-circle" src="..." alt="">
</span>
</nav>
I am using vueJS and Bootstrap tabs and can't get them to work properly. I can visit tab 1, tab 2, tab 3, tab 4, but then I can't go back to tab 1.
I can also go 1, 3, but then not 1 and 2. I can basically only go to the right
As these tabs are in a v-for loop, I add ids to each of them.
I have zero error/warning, each ID is unique.
<nav class="navbar navbar-expand-lg " style="width:100%;">
<div class=" navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" :id="'myTab'+form.id_item" role="tablist" style="display: flex; width:100%">
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a active" :id="'infosGenform-tab'+form.id_item" data-toggle="tab" :href="'#infosGenform'+form.id_item" role="tab" aria-controls="infosGenform" aria-selected="true">infosGenform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a " :id="'inscrform-tab'+form.id_item" data-toggle="tab" :href="'#inscrform'+form.id_item" role="tab" aria-controls="inscrform" aria-selected="true">inscrform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a" :id="'machineform-tab'+form.id_item" data-toggle="tab" :href="'#machineform'+form.id_item" role="tab" aria-controls="machineform" aria-selected="true">machineform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a " :id="'comform-tab'+form.id_item" data-toggle="tab" :href="'#comform'+form.id_item" role="tab" aria-controls="home" aria-selected="true">comform</a>
</li>
</ul>
</div>
</nav>
<div class="tab-content" :id="'myTabContent'+form.id_item">
<div class="tab-pane fade show active itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel" aria-labelledby="infosGenform-tab">
1
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel" aria-labelledby="inscrform-tab">
2
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel" aria-labelledby="machineform-tab">
3
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel" aria-labelledby="comform-tab">
4
</div>
</div>
Is it something you already experienced?
Thanks a lot
I would avoid using jQuery and use vuejs instead to navigate tabs. Here is my approach.
In your tab navigation add this #click.prevent="showTab(1)". The .prevent is to prevent default action of going to another page. In your other navigation do the same i.e #click.prevent="showTab(n)".
This means you will have to add a new vuejs method showTab(value)like below.
showTab(value){
this.tab = value
}
In your tab content use vuejs show v-show="tab == 1" Find the full code below.
<template>
<div>
<nav class="navbar navbar-expand-lg " style="width:100%;">
<div class=" navbar-collapse">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" :id="'myTab'+form.id_item" role="tablist" style="display: flex; width:100%">
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a active" :id="'infosGenform-tab'+form.id_item" #click.prevent="showTab(1)" role="tab" aria-controls="infosGenform"
aria-selected="true">infosGenform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a " :id="'inscrform-tab'+form.id_item" #click.prevent="showTab(2)" role="tab" aria-controls="inscrform"
aria-selected="true">inscrform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a" :id="'machineform-tab'+form.id_item" #click.prevent="showTab(3)" role="tab" aria-controls="machineform"
aria-selected="true">machineform</a>
</li>
<li class="nav-item nav-evt-li">
<a class="nav-link nav-evt-a " :id="'comform-tab'+form.id_item" #click.prevent="showTab(4)" role="tab" aria-controls="home"
aria-selected="true">comform</a>
</li>
</ul>
</div>
</nav>
<div class="tab-content" :id="'myTabContent'+form.id_item">
<div v-show="tab == 1" class="tab-pane fade show itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel"
aria-labelledby="infosGenform-tab">
1
</div>
<div v-show="tab == 2" class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel"
aria-labelledby="inscrform-tab">
2
</div>
<div v-show="tab == 3" class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel"
aria-labelledby="machineform-tab">
3
</div>
<div v-show="tab == 4" class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel"
aria-labelledby="comform-tab">
4
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
tab: 1
}
},
methods: {
showTab(value){
this.tab = value
}
}
}
</script>
I hope this answer will help.
I am have scaffolded a NavBar in a .Net Core application using Bootstrap 4. It looks like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-toggleable-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
Because there are numerous items in the Menu, I have changed navbar-toggleable-sm to navbar-toggleable-lg so that the hamburger menu appears at a wider media breakpoint and "Login" does not sit on top of the menu at widths smaller than lg. While this works fine for displaying the hamburger menu, the "Login" menu item continues to show as the media width is being narrowed until the small size is reached.
How can I ensure that the _Login disappears under the hamburger menu at media widths of smaller that lg?
Currently there is no class name called navbar-toggleable-lg in bootstrap 4.3.1. It has been replaced with navbar-expand-lg. So remove navbar-toggleable-lg.
Now if you use navbar-expand-lg then you also have to use d-lg-inline-flex flex-lg-row-reverse instead of d-sm-inline-flex flex-sm-row-reverse.
So your full navbar code should be as follows:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Home/Home">MyApp</a>
<button class="navbar-toggler " type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-lg-inline-flex flex-lg-row-reverse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-light" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
</ul>
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 4</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 5</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" asp-area="" asp-page="/Index">Item 6</a>
</li>
</ul>
<partial name="_Menu" />
</div>
</div>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I am looking for an example of using Fontawesome and the Navbar components of Bootstrap 4 so that I have a text description and an icon next to each other.
Well, see Bootstrap 4 - Glyphicons migration? in the first place. You can also simply load Font Awesoms' CSS from CDN:
The links in the navbar are just "normal" anchors (a) so you can add the icon inside them:
<a class="nav-link" href="#">
Features<i class="fa fa-bell-o"></i></a>
Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#"><i class="fa fa-stack-overflow"></i>Navbar</a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home"></i>
Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features<i class="fa fa-bell-o"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-btc"></i>
Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-user-plus"></i>
About</a>
</li>
</ul>
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
<button class="btn btn-success-outline" type="submit"><i class="fa fa-search"></i>
Search</button>
</form>
</nav>
To add a search icon in the placeholder of the search form, see: Use Font Awesome Icon in Placeholder
I'm using twitter bootstrap on my site and when I collapse the window partially, this happens!
If I collapse the window further, then the desired button appears and the links disappear.
Q) Why is this happening? I want the nav links to collapse at this window width, leaving the button. Nav code below:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/" style="font-size: 24px;">My brand name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="<%= GetCssClassNavItemHome() %>">Home</li>
<li class="<%= GetCssClassNavItem("/about") %>">About</li>
<li class="<%= GetCssClassNavItem("/services") %>">Services</li>
<li class="<%= GetCssClassNavItem("/project") %>">Projects</li>
<li class="<%= GetCssClassNavItem("/prices") %>">Prices</li>
<li class="<%= GetCssClassNavItem("/blog") %>">Blog</li>
<li class="<%= GetCssClassNavItem("/contact") %>">Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right nav-pills">
<li>
<a target="_blank" href="http://www.linkedin.com/">
<i class="fa fa-linkedin fa-2x"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
The problem is the padding applied in the class .container - 15px both left and right. If you reduce the padding, the problem goes away.
If you add another class to the div.container - in this example, say lesspadding:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container lesspadding">
etc.
and then apply different padding to the new class, like so:
.lesspadding {
padding-left: 10px;
padding-right: 2px;
}
Bootply here