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>
Related
I am having an issue with my bootstrap 3 dropdown menu, specifically when its on the hamburger version of the menu. The following actions are happening:
Once a menu item is selected, all items in the ul remain highlighted, the next time you open the menu.
When the page is viewed on a mobile device, the menu doesnt disappear once a menu item is selected.
I have tried a couple of different scripts, similar to this Github topic but I thinks I am placing the script in the wrong place. I have made a few different changes to try get it to work but I cant figure it out. I have taken the source from w3schools topic.
Any help would be greatly appreciated to fix this issue.
Thanks in advance.
Here is the navbar code I am using:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Had to add some jQuery to it, and it worked.
Will make slideUp transition smoother as soon as I get the chance.
Just adding and removing few classed worked.
And on toggle, you get the removed classes back. So not to worry about that.
Place the below code in your html before your <html>
<script>
JqUery text
</script>
$(".dropdown-menu").click(function() {
$(".navbar-collapse").removeClass("in");
$(".navbar-toggle").addClass("collapsed");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I am attempting to use Bootstrap to build a navbar for my website. I am have tried to use the toggling feature that allows the menu to be more accessible on mobile devices. When I zoom in to 200% on my browser, it toggles fine and works great. When I connect to my site on my phone however, it fails to automatically toggle.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="index.php"><i class="fa fa-server"></i> Server List</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>Servers</li>
<li class="dropdown">
Purchase<b class="caret"></b>
<ul class="dropdown-menu">
<li>Highlighted Spot</li>
<li>Advertising</li>
</ul>
</li>
<li>Support</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>My Servers</li>
<li>Favorites</li>
<li>My Profile</li>
<li>Settings</li>
</ul>
</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
I've tried everything I've found online to no avail, so I greatly thank anyone who helps me out with this!
I've just installed bootstrap 3 but the collapsing menu doesn't work;
The menu looks fine in a desktop screen but scaling the hole thing down the menu button doesn't show up..
Here is the code for the menu:
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id=".nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Assuming that you've put the jquery library , and after you've put the js file of bootstrap , I can think that the problem is with the data-target.
You're targeting the element with the id "nav-collapse", and you have ".nav-collapse" as id, so you need to take off that dot.
<div id="menu">
<div class="navbar navbar-static-top" role="navigation">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target="#nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="/"><img class="top-logo" src="img/hotels.nl_.jpg" alt="Hotels.nl"></a>
<div id="nav-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Inloggen <span class="sr-only">(current)</span></li>
<li>Contact</li>
<li class="dropdown">
Taal <span class="caret"></span>
<ul class="dropdown-menu">
<li>Nederlands</li>
<li>English</li>
<li>German</li>
</ul>
</li>
<li class="dropdown">
Valuta<span class="caret"></span>
<ul class="dropdown-menu">
<li>Euro</li>
<li>Dollar</li>
<li>Pond</li>
</ul>
</li>
</ul>
</div>
</div>
</div><!--End container-->
</div><!--End fixedtop-->
Here's a fiddle, and I changed some classes and some stuff to make the menu visible. Because if you didn't have the right CSS for it, it's pretty messed up like this.
And Note that you should always refer to the bootstrap docs , and try to stick to their methods to make your menu or anything else works perfectly fine.
And I saw that you've put the class "pull-right" for the menu , there's a class called "navbar-right" that works better that just pulling the menu to the right I think.
I have this navbar. It works great in regular screen width, but when collapsed, the mobile navbar button doesn't work. I've tried to find any unclosed divs and other issues but can't identify any. Thanks in advance for any help! Apologies for the beginner question
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-brand" href="#">
<div class="text-center">
<img alt="nav" src="/assets/navbar.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<h4>
<ul class="nav navbar-nav navbar-left">
<!-- <li> Help </li>-->
<li> Buy </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> Search </li>
<li class="dropdown">
My purchases<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> My profile </li>
<li class="divider"></li>
<li> Items bought </li>
<li> Items sold </li>
<li class="divider"></li>
<li> Purchase history </li>
</ul>
</li>
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li> Edit my profile </li>
<li> Manage my profile </li>
<li class="divider"></li>
<li class="dropdown-header">GOODBYE </li>
<li> <a data-method="delete" href="/users/sign_out" rel="nofollow">Logout</a> </li>
</ul>
</li>
</div><!-- /.navbar-collapse -->
</nav>
</h4>
Clean-up your HTML and it should work fine. There are several missing close tags (/ul, /div) and the /h4 is closed at the end.
http://bootply.com/ytu2dul2yw
I have a navbar in a desktop site, but I want it in mobilesite like a sidebar.
How to convert the navbar to sidebar in the mobile site?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Site name
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="home">Home <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>page 1</li>
<li>page 2</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>username</li>
</ul>
</div>
</div>
</div>