I am trying to make a navbar like seen on: http://getbootstrap.com/examples/navbar/
I have the code below:
<head>
<meta charset='UTF-8' />
<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css' rel='stylesheet' />
</head>
<body class='container'>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="navbar-header">
<a class="navbar-brand" href="#">BLARG</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">TEST</li>
</ul>
</div>
</nav>
<title>Splatter</title>
<div class="page-header">
<h1><%= #title %></h1>
</div>
<%= yield %>
But I get something like this:
Any ideas what I am totally messing up
You were referencing Bootstrap v2 stylesheet in your head for v3 code and then had to clean the HTML markup.
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' />
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
Blarg
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li>Test
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
</body>
using
<nav class="navbar bg-transparent ...">...</nav>
works and then working with other css classes to fully adapt the look you want . Here is a cheat sheet to help you get started cheat sheet inside the cheat sheet is a list of css classes. The code above works fully for making the navbar work the way you want just add the css class
bg-transparent
to any of the following elements to make them transparent. So adding the following works
<nav class="navbar bg-transparent navbar-inverse navbar-fixed-top" >
<div class="navbar-header">
<a class="navbar-brand" href="#">BLARG</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">TEST</li>
</ul>
</div>
</nav>
will make the navbar fully transparent :)
Usually when I see a Bootstrap component in the documentation, and I want to replicate it, I just do CTRL+U in Chrome (or whatever shortcut you have for source viewing in your browser) and copy the code and paste it in my favorite editor and then I have that component. In your case, the mark up would be:
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
Note that the nav element is wrapped in a container element, that's what you don't want to be doing really. I'd rather just leave nav as a direct child of body.
JS Fiddle
Related
I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste code from the W3Schools examples and the Bootstrap website. I don't know what else to do. Please help.
This is the W3Schools example code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
This is example code from the Bootstrap website:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Both do not work. And yes, I've triple checked my <link> and <script> tags.
Edit: here is my CodePen
First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<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="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As someone said - remove bootstrap 4 from loaded CSS files and it will work
I have tried everything to get my nav bar to appear along with my about and home page.
When I use the following code, even though I am certain my css is working, I cannot get a nav bar to appear. All that happens is my 'about' link goes to the far right, and my 'home' goes to the left, but there is no nav bar to be seen.
Does anyone know why my nav bar css is not activating? Even though all of the other bootstrap css is functional?
<!DOCTYPE html>
<html>
<head>
<title>Attempting to get nav bar to work</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../Bootstrap/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../Bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class='navbar navbar-default'>
<a href='../' class='navbar-brand'>
Home
</a>
<ul class='nav navbar-nav navbar-right'>
About
</ul>
</div>
</body>
</html>
Okay, so this is what I get from Bootstrap and it is totally different from what you have got:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Check out the snippet in full screen.
Yes I'm new and yes this is probably not even a real problem, but it still bugs me...
This is what i got...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet & Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>
<div class="navbar">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<!-- JavaScript -->
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
And this is what i get...
What have i missed? (I'm running this in Chrome using the Brackets (node.js based) live preview)
EDIT1:
#Nhan I want the smallest possible bit of html that's still valid in the scenes of bootstrap. I.e. The least amount of rows that still change appearance if i exclude the bootstrap.css. I'm not looking for a specific "look" i just want to learn the fundamentals of bootstrap, from the ground up (I.e. i have no interest in a flying start / ctrl+c, ctrl+v).
You're missing about 90% of the navbar related structure. From: http://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Bootstrap is almost certainly fine, you just need to provide it with the correct working materials to style. I put your navbar code into a bootstrap page I know works and got the exact same output you're seeing due to the lack of appropriate styles and structure.
I see what you mean. Below is the minimal markup required to implement a Bootstrap navbar:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- navbar-default: default colour scheme -->
<nav class="navbar navbar-default">
<!-- Bootstrap container -->
<div class="container">
<!-- Toggle menu on smaller screen sizes (mobile) -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"> + </button>
<!-- Bootstrap collapse, work with the button above -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Link list -->
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
I am new to bootstrap.
This is the design I am trying to make:
As you can see the navbar is on top op the background image.
This is what I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
<style>
.navbar-default {
background: none;
border: none;
}
body{
height:100%;
}
html{
background: url('sun.jpg') no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position: 0 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
</div>
</nav>
</body>
</html>
gives:
I don't know how to put it on the image itself instead of above.
short sidequestion: what makes it that the picture from vimeo makes it look so much better than the image I use from the sun? on my image you can see all the pixels etc... Is this due to the fact that it might be a too small image and that it has to be stretched a lot to fit the whole page?
EDIT:
this is what I tried but didn't work
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>ask a question!</li>
<li>learn</li>
<li>contact</li>
</ul>
<style>
.navbar{
background:transparent;
}
</style>
</div>
</nav>
Bootstrap 4
The Navbar has no background color, so it's transparent by default. Just remember to use navbar-light or navbar-dark so the link colors work with the contrast of the background image. Display of the toggler is also based on navbar-(dark or light).
https://www.codeply.com/go/FTDyj4KZlQ
<nav class="navbar navbar-expand-sm fixed-top navbar-light">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 3
Use navbar-fixed-top and then change the CSS to make it transparent. Here's an example of a custom transparent navbar.
http://www.codeply.com/go/JNy8BtYSem
<nav id="nav" class="navbar navbar-fixed-top" data-spy="affix">
<div class="container">
<div class="navbar-header">
Brand
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
Link
</li>
</ul>
</div>
</div>
</nav>
This question is only to make the transparent Navbar. To change style after scrolling or at some Navbar position see: Animate/Shrink NavBar on scroll using Bootstrap 4
You need to remove the background from your nav-bar:
.navbar-default {
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
html,
body {
height: 100%;
background: red;
}
.navbar-default {
background: none;
border: none;
}
</style>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<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=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Just take the backgound image in Body and then use this code
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Username</li>
</ul>
</div>
</div>
</div>
<div class="wide">
<div class="col-xs-5 line"><hr></div>
<div class="col-xs-2 logo">Logo</div>
<div class="col-xs-5 line"><hr></div>
</div>
<div class="container">
<div class="text-center">
<h1>Content</h1>
</div>
</div>
Also used styling style="opacity:0.6;" in Navbar div
The background colour is set on the .navbar-default class so make sure your css is using that class to target turning the bar transparent. e.g.
.navbar-default{background-color: transparent;}
As Turnip states, this needs to be applied after the bootstrap styles in your <head>
If you really want to force it whilst you are getting it to work add the following attribute to your <nav> element
style="background-color: transparent;"
So your nav element looks like this:
<nav class="navbar navbar-default" style="background-color: transparent;">
However, it obviously better to have this within a CSS file, rather than as inline HTML
.navbar{
background:transparent;
}
This will make your background transparent.
So, I'm brand new to all of this. This is my first ever actual project with HTML/CSS, so please keep that in mind. Constructive criticism is always welcome, as it will only help me become better.
Now that that's out of the way, my issue:
So, I'm using Bootstrap because it's easy to use and from my experience so far is somewhat user friendly. I can't for the lift of me however figure out how to move my dropdown button to the right-hand side of my navbar.
Here's the code for my navbar (again, sorry if it's trash. New to this):
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
If you want, there is a live version here: http://www.avc-gaming.us/avc
I've tried adding "pull-right" to the UK 111 dropdown <ul> but that didn't do anything. When I added "pull-right" to the Donate button, all it did was swap places with the UK 111 dropdown.
Any ideas?
The pull-right works like it should. But because the width of ul.nav navbar-nav is just taking up the space of it's content it's not working like you want. If you'll put a width of for example 90% on ul.nav navbar-nav you will see it aligns right.
You can just add bootstrap's own class pull-right. I have a example here!
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid pull-right">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
You have to move <li> of UK 111 to separate <ul> and add 'pull-right' class to it along with other classes that you are using for styling your list.
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
If you want to move All of them to the right of the page put Float:right in line <ul class="nav navbar-nav"> like so:
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" style="float:right">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
OR
If you want to move just the last one then set Width:96% on line <ul class="nav navbar-nav"> and float:Right on your last dropdownlist <li class="dropdown">
<div id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<a class="navbar-brand" href="">AVC Gaming</a>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav" style="Width:96%">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Ban Appeal</li>
<li>Registration</li>
</ul>
</li>
<li class="button">Donate</li>
<li class="dropdown" style="Float:right">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums</li>
<li>Arma 2</li>
<li>Arma 3</li>
</ul>
</li>
</ul>
</div>
</div>
Bootstrap 3 provides this functionality. Please refer to the Docs for a complete example and specifically for right aligned links: Component Alignment
About Pull-right and Navbars
Align nav links, forms, buttons, or text, using the .navbar-left or
.navbar-right utility classes. Both classes will add a CSS float in
the specified direction. For example, to align nav links, put them in
a separate <ul> with the respective utility class applied.
These classes are mixin-ed versions of .pull-left and .pull-right, but
they're scoped to media queries for easier handling of navbar
components across device sizes.
Component Alignment
Right aligning multiple components Navbars currently have a limitation
with multiple .navbar-right classes. To properly space content, we use
negative margin on the last .navbar-right element. When there are
multiple elements using that class, these margins don't work as
intended.
See complete working example Snippet at FullPage.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav id="navbar" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<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="">AVC Gaming</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Forums <span class="caret"></span>
<ul class="dropdown-menu">
<li>Ban Appeal
</li>
<li>Registration
</li>
</ul>
</li>
<li class="button">Donate
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
UK 111 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Forums
</li>
<li>Arma 2
</li>
<li>Arma 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>