How to close toggle when next list is toggled - javascript

This is a multi-child dropdown menu, Actually I am trying to toggle a menu one at a time (i.e. only selected menu will show other should close).
Here is my code
HTML
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JS:
$(document).ready(function{
$(".dropdown-submenu a.test").on("click", function(e){
$(this).next("ul").toggle();
e.stopPropagation();
e.preventDefault();
});
});
CSS:
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
This didn't close after another menu toggles and the third level of submenu didn't flexible for the first answer.
thanks,


You need to get closest ul where click event has occur then using .not() exclude it from hiding and then simply use next("ul").toggle(); to show dropdown menu .
Demo code :
$(document).ready(function() {
$(".dropdown-submenu a.test").on("click", function(e) {
//get closest `li`-> ul
var selector = $(this).closest(".dropdown-submenu").find("ul");
//hid all other li and ul
$(".dropdown-submenu ul").not(selector).not(this.closest('ul')).hide()
$(this).next("ul").toggle(); //show this a-> next ul
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Master<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-A<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">A1-CHILD</a></li>
<li><a tabindex="-1" href="#">A2-CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-B<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">B1-CHILD</a></li>
<li><a tabindex="-1" href="#">B2CHILD</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">MENU-C <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">C1-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C1-A</li>
<li>C1-B</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">C2-CHILD <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>C2-A</li>
<li>C2-B</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Related

Problems with multi level bootstrap dropdown

As you can see in my snippet; the dropdowns show vertically downwards. Here are my queries.
How do I make my sub menu show to left or right rather than vertically downwards?
As of now this menu is disappear only if I click on the caret sign again. This can be tiresome from UX perspective. So I added the three commented lines that will make it dropdown disappear when clicked anywhere in documented; But on subsequent clicks the dropdown wont work. I know why it wont work but I cant find a way around.
Also multi level dropdowns are bringing an extra layer of complication i.e if it was just one dropdown we can show and hide as we wish. Since there are multiple dropdowns, the code just hides/unhides haphazardly.
Please suggest a way forward.
PS: Kindly provide a solution with bootstrap 3 and not 4.
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
//document.addEventListener("click", function () {
// $('.dropdown-menu:visible').addClass('hide');
// });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

I modified a few css properties on your dropdown menu, first I set top:0; so that the dropdown would appear at the top of the parent element. Then I set left:25%; this would make the dropdown menu appear a few spaces on the left of the parent element.
For the subsequent dropdowns, I set left:100%; so that they would appear on the right of the parent dropdown.
Instead of adding the class 'hide' everytime you want to close it, modify its css instead;
$('.dropdown-menu:visible').css('display','none');
I also added a code wherein it would hide all the other submenus if the clicked element isn't inside a multilevel dropdown.
Run the snippet;
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
// the parent dropdown-submenu which is a li tag
var clickedDropdown = $(this).parent();
// the parent of the li tag which is a ul tag
var parentDropdown = $(this).parent().parent();
if (!parentDropdown.hasClass("multi-level")) {
// if the clicked element has a parent dropdown, hide all other submenus
$(".dropdown-menu").each(function() {
if ($(this).parent()[0] != clickedDropdown[0]) {
$(this).css("display", "none");
}
});
}
e.stopPropagation();
e.preventDefault();
});
document.addEventListener("click", function() {
$('.dropdown-menu:visible').css('display', 'none');
});
.dropdown-menu {
left: 25% !important;
top: 0 !important;
}
.dropdown-menu .dropdown-menu {
left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a tabindex="-1" href="/#">Laughing</a></li>
<li><a tabindex="-1" href="/#">Out</a></li>
<li><a tabindex="-1" href="/#">Loud</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="/#">Just</a></li>
<li><a tabindex="-1" href="/#/1">Another</a></li>
<li><a tabindex="-1" href="/#/1">Sub</a></li>
<li><a tabindex="-1" href="/#/1">Menu</a></li>
</ul>
</ul>
</li>
</ul>
</nav>

Multi- level dropdown using BootStrap-4 navbar goes out of screen when dropsdown

i just can't get this to work.I uses BS4 for responsiveness. my navs are right aligned in the navbar. I tried so many things to position the submenu at the left of the parent menu... but then it does not display submenu. the same problem arises when Sub-submenu dropdowns
HTML code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Style Sheets Attaches Here-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/multi-navbar.css">
<!-- Style Sheets Ends Here-->
</head>
<body>
<nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
<img src="assets/logo.jpg" class="rounded" alt="Logo" style="width:40px;">
<a class="navbar-brand" href="#"> NavBar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarNavDropdown" class="navbar-collapse collapse justify-content-end">
<ul class="navbar-nav nav-pills nav-fill">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown1</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
<li>
<a class="dropdown-item" href="#">menu1</a>
</li>
<li>
<a class="dropdown-item" href="#">menu2</a>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown2</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">menu1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">menu2/a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Another</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub-submenu1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub-submenu1</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Subsubmenu2</a>
</li>
<li>
<a class="dropdown-item" href="#">Subsubmenu2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown3</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu ">
<a class="dropdown-item dropdown-toggle" href="#">menu1</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a class="dropdown-item" href="#">Submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Yet Another</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 1</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub1-submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub1-submenu 2</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">Sub2-submenu 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Sub2-submenu 2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Register</a>
</li>
</ul>
</div>
</nav>
<!-- Navbar completed Here-->
<!-- Javascript Loads Here-->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS - multi-navbar.css
.navbar-nav li:hover > ul.dropdown-menu {
display: block;
}
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;left:100%;margin-top:-6px;
}
/* rotate caret on hover */
.dropdown-menu >li > a:hover:after {
text-decoration: underline;
transform: rotate(-90deg);
}
These are the codes i used other than Bootstrap-4
Please help me

Change the parent dropdowns to dropdown-menu-right and the CSS to position the submenu on the left instead of right...
.dropdown-submenu>.dropdown-menu {
top:0;left:-100%;margin-top:-6px;
}
https://www.codeply.com/go/DznMvv8PhP
Also make sure the HTML is properly structured (the code you posted is not).
Related: Bootstrap 3 dropdown sub menu missing

multiple drop downs appearing at the same time

I have a drop-down list, the problem is, when I try to open one list after another, the first one still remains unclosed. How can I close one list while opening another
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i> CATEGORY</p>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

You can't use toggle for multiple accordion menu style.
I have updated your HTML design with some classes for your accordion design. Add following codes in your file.
CSS
.closed{display:none;}
.opened{display:block;}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<p class=" dropdown-toggle" type="" data-toggle="dropdown" style="padding: 15px 0px;font-size: 24px;"><i class="fas fa-bars"></i> CATEGORY</p>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu opened">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu opened">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu closed">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu closed">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
jQuery
$(function(){
$('.dropdown-submenu a.test').on("click", function(e){
var ul = $(this).next('ul');
if(ul.hasClass('opened')){
ul.removeClass('opened').addClass('closed');
}else{
ul.addClass('opened').removeClass('closed');
}
if($(this).parents('ul').length == 1){
$(this).parents('ul').find('ul').not(ul).addClass('closed').removeClass('opened')
}
e.stopPropagation();
e.preventDefault();
});
});
demo : https://jsfiddle.net/zsyajqt8/10/

Navbar dropdown menu doesnot show the content when the navabar is collapsed

i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->

Your content probably has a container .container. Also wrap your navbar with this.

Categories