I am using Bootswatch Cosmo to build my website, but the dropdown menu isn't
working. You can view the page live at http://spencermehta.co.uk.
The html is:
<nav 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="#navigationbar">
<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="../">Spencer Mehta</a>
</div>
<div class="collapse navbar-collapse" id="navigationbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Projects
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Spenbot</li>
</ul>
</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://twitter.com/spencermehta" target=_blank>Twitter</a></li>
<li><a href="http://twitch.tv/spencermehta" target=_blank>Twitch</a></li>
<li><a href="http://imraising.com/spencermehta" target=_blank>Donate</a></li>
</ul>
</div>
</div>
</nav>
Make sure that you have added jquery and bootstrap.js files and that their paths are correct.
Related
Good day guys, I had a bit trouble in the collapse navbar. It doesn't align to the right side of the browser when i clicked the collapse button?
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
My Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
Sample output
You must use navbar-header, then you have brand and hamburger icon on the same level and the whole content of your menu below that line. So basically your code should look something like that:
<div class="navbar-header">
My Site
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
Link to live example: http://www.bootply.com/jowa705iHl
Here you can find all the needed documentation: http://getbootstrap.com/components/#navbar
Best of luck :)
You need to wrap the collapse button and brand link in .navbar-header:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
My Site
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Contacts</li>
<li class="dropdown">
Login<b class="caret"></b>
<ul class="dropdown-menu">
<li>Logout</li>
<li>Logout</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
So I have this segment of code which is due for part of my assignment, the aim is to make a functional index page, but I have written this code but cannot find at what point the Menu key refuses to activate the dropdown list. I've tried it on Chrome/Firefox and have issues with both but I cannot find exactly where it is breaking.
Guidance would be much appreciated.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="#">Ristorante Con Fusion</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
Make sure you have included all of Bootstrap's javascript files :
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add the external files. Details are in the Snippet
SNIPPET
/* Changes
line 1
|| Added external link to Bootstrap.css file
=======================
line 47
|| Added external jQuery script file
=======================
line 49
|| Added external Bootstrap.js script file
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<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="#">Ristorante Con Fusion</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<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.6/js/bootstrap.min.js"></script>
What am i trying to achieve is something like this:
https://dl.dropboxusercontent.com/u/109053092/Screen%20Shot%202015-01-21%20at%2014.49.45.png
I am using Bootstrap 3 and I am using the code below to create my nav:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<img src="../assets/images/logo.png" alt="Barcelona226">
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
Exclusive Apartments <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>View All</li>
<li class="dropdown-header">4 Bedroom</li>
<li>Superior</li>
<li>Standard</li>
<li class="divider"></li>
<li class="dropdown-header">3 Bedroom</li>
<li>Superior</li>
<li>Superior Tuset</li>
</ul>
</li>
<li class="active">Exclusive Rooms</li>
<li>Contact and Location</li>
</ul>
</div>
</div>
</nav>
I cant figure out how, any pointers?
Simply try with this CSS for your logo element :
position : absolute;
top : 10px;
Absolute position will take the element out its container.
Check this fiddle
I'm trying to make a menu for smartphones & tablets, but when I create it, it always overflows the content of my website.
The effect I want to achieve is the same as the Twitter Bootstrap website — When you open it with smartphones, you can press the button and the menu rolls down and pulls the content of the website.
Here is my code:
<div class="dropdown">
<button class="navbar-toggle hidden-lg collapsed" data-toggle="dropdown" data-target="navbar-header" type="button">
<span class="glyphicon glyphicon-collapse-down">
</span>
</button>
<div class="col-xs-12 dropdown-menu navbar-inverse" role="menu">
<a class ="divider" href="#">Accueil</a><br />
<a class ="divider" href="#">Centres d'Interets</a><br />
<a class ="divider" href="#">CV</a><br />
<a class ="divider" href="#">Contact</a><br />
</div>
</div>
You can use the example from the documentation as a start:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
...
</div>
</nav>
You can find it here.
Try the below code. Courtesy: http://bootswatch.com Adjust the menu according to your requirements
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<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="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Download <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
In the above code,
<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>
Gives the desired effect when the window size changes in browser or on small screens (Mobiles and tabs).
I have an issue where the Bootstrap 3 navbar when it is converted into a dropdown menu on small devices (see code below). The issue is that once a menu link has been selected, the navbar dropdown doesn't close.
Any pointers where to start looking greatly appreciated.
<nav id="y-navbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-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>
<a class="navbar-brand" href="#"><img class="y-logo" src="images/template-logo.png" alt="logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a class="y-nav-link" data-partial="home.html" href="#"><i class="fa fa-home"></i> Home</a></li>
<li><a id="y-nav-about" class="y-nav-link" data-partial="about.html" href="#">About</a></li>
<li><a class="y-nav-link" data-partial="contact-us.html" href="#">Contact</a></li>
<li><a class="y-nav-link" data-partial="map.html" href="#">Directions</a></li>
<!-- Page Layouts -->
<li class="dropdown">
Layouts <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="y-nav-link" data-partial="feature-boxes.html" href="#"><i class="fa fa-file-code-o"></i> Feature Boxes</a></li>
<li><a class="y-nav-link" data-partial="four-blocks.html" href="#"><i class="fa fa-file-code-o"></i> Four Blocks</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
You can add in a script to let the menu close after click:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') ) {
$(this).collapse('hide');
}
});
See it working here: jsFiddle
Reference here