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.
Related
I am currently redesigning a website who has a two row responsive navbar , but now get stuck.
#media (min-width: 767px) {
.nav.navbar-nav {
float: right;
}
}
<div class="navbar navbar-default navbar-fixed-top">
<div class="collapse navbar-collapse ">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
</ul>
</div>
</div>
If the screen is wider than 767px it looks like this (which looks precisely what I want (check first image)...but..
when the screen is smaller than 767px (second image), the navigation menu looks like this and that is not what I want. "Community" and "global" should be displayed below under store, but how can I fix that
I would just add duplicate menu options, meaning hide the first one on tablet/phone and show the second one on tablet/phone, as so: (check bottom of second navigation for adjustment)
<div class="navbar navbar-default navbar-fixed-top">
<!-- hide this nav on tablet/phone ****************************** -->
<div class="collapse navbar-collapse hidden-sm hidden-xs">
<ul class="nav navbar-nav">
<li class="community"><strong>Community</strong></li>
<li class="global"><strong>Global</strong></li>
</ul>
</div>
<div class="navbar-header">
<div id="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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<a class="brand" href="#"><img src="IMAGE/Oppo_green.png" height="24" width="150" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><strong>Home</strong></li>
<li class="dropdown">
<strong>Products</strong>
<ul class="dropdown-menu">
<li>Smartphones</li>
<li>Accessoires</li>
</ul>
</li>
<li><strong>ColorOS</strong></li>
<li class="dropdown">
<strong>About</strong>
<ul class="dropdown-menu">
<li>Press</li>
</ul>
</li>
<li class="dropdown">
<strong>Support</strong>
<ul class="dropdown-menu">
<li>FAQ</li>
<li>Contact</li>
</ul>
</li>
<li><strong>Stores</strong></li>
<!-- ****************************************************** -->
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Community" -->
</li>
<li class="visible-sm visible-xs">
<!-- link here (or dropdown) for "Global" -->
</li>
</ul>
</div>
</div>
I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?
My HTML code is:
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</div>
</body>
I have created a JSFiddle for this: https://jsfiddle.net/DTcHh/9394/
Add the following classes: hidden-xs (class="navbar-brand hidden-xs") and pull-left (class='navbar-toggle pull-left")
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container"> MyName
<button class="navbar-toggle pull-left" 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">
<li class="active">ABOUT ME<span class="sr-only">(current)</span>
</li>
<li>RESUME
</li>
<li>PROJECTS
</li>
<li>BLOG
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
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 do apologize but I am a beginner and I cannot figure out how to position my logo in the navbar and make everything line up correctly.
I cannot figure out how to make my logo go from this to this one
thank you for your help
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
<a href="/" id="logo">
</a>
<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 class="active">Home
</li>
<li>How it Works
</li>
<li>Order Now
</li>
<li>About Us
</li>
<li class="dropdown">
<ul class="dropdown-menu">
Social Media <b class = "caret"></b>
<ul class="dropdown-menu">
<li>Twitter
</li>
<li>Facebook
</li>
<li>Google+
</li </div>
</ul>
</ul>
</div>
</div>
</div>
Try changing this:
<a class="brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
To this:
<a class="navbar-brand" href="easychip.html">
<img src="images/images/chipfixx.png">
</a>
I looked at the source code of my own bootstrap website and I'm pretty sure it should work.
I am designing with Opera Mobile Simulator, and am using bootstrap to design, but the drop down navigation doesn't work.
I do not know if the problem is with the simulator or with bootstrap.
I would appreciate all help... Thanks. Here are the codes for the menu
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand">School Portal</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Dashboard</li>
<li class="dropdown">
</b>
<ul class="dropdown-menu">
<li>Register Student</li>
<li>All Students</li>
</ul>
</li>
<li class="dropdown">
Teachers <b class="caret"></b>
<ul class="dropdown-menu">
<li>Register Teacher</li>
<li>All Teachers</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>