<nav class="navbar navbar-findcond navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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="">
<img alt="null">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Products
</li>
<li class="active">About
</li>
<li class="active">Testimonials
</li>
<li class="active">Order
</li>
<li class="active">Contact Us
</li>
</ul>
</div>
</div>
</nav>
<section id="products">
<div></div>
</section>
I change my section class="products" to section id="products", and when I click it, nothing happen.
The reason why I used id is because the active navbar is not showing. I'm using findcond navbar bootstrap.
You can use like this
<section id="products" class ="products">
Since I don't know about back-end operations, cannot sure about it. I trust some operations are done by that css class products.
Related
When I press the menu item on the top right side of my webpage it doesn't collapse. I have checked my code and it seems to be okay.
The website with the problem is: www.kemnet.be
I have tried putting everything in the block and made minor changes to my jquery and CSS.
I have this from a theme and added the original code to my site for testing but the dropdown still doesn't show.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</button>
<a class="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
I don't receive any error messages tho.
I just replaced <i class="fa fa-bars"></i> with classic way.
<header class="navbar navbar-inverse navbar-fixed-top opaqued" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="bounce-in no-display animated bounceIn appear" href="index.html"></a> <img src="images\white.png">
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Praktisch </li>
<li>Onze Visie</li>
<li>Ons Team</li>
<li>Ons Aanbod </li>
<li>Nieuws</li>
<li>Contact</li>
<li><a class="border" href="https://www.mtc-it4.be/patient/index.html#/appointments/day/bjNkcWkyQmFRMkpDVTRFNndleFgzSlRvdC9TSU1YOXdJWklnQ2ZtMDhjcEJCYWl6RlREMWxyOGlZY2FSUk10WQ==" target="_blank">Maak een afspraak</a></li>
</ul>
</div>
</div>
</header>
https://jsfiddle.net/v61aeg5r/1/
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>
I am trying to use bootstrap Navbar-collaps menu for my Mobile.site.master page but it seems to be having problems, the button is where I want it its just on click the menu doesn't actually open and I don't know why any help would be amazing. The code is posted below if you need anything else please let me know.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<ul class="nav navbar-nav navbar-right">
<li>
Fixed Link
</li>
</ul>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
</div>
</div>
You should use an ID in your menu div <div class="collapse navbar-collapse" id="MenuID"> and call it in your button data-target="#MenuID"
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#MenuID" 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>
<div class="collapse navbar-collapse" id="MenuID">
<ul class="nav navbar-nav">
<li class="active">L1 <span class="sr-only">(current)</span></li>
<li>L2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Fixed Link</li>
</ul>
</div>
</div>
</nav>
You can see the result here bootply
one change in your code you forget href " second link
<ul class="nav navbar-nav">
<li>L1</li>
<li>L2</li>
</ul>
your code is working now
may be you included this file ?
bootstrap.css
jquery library
bootstrap.js
https://jsfiddle.net/k60f4x3c/
I had to reinstate a backup of my project and while using Github it deleted one of the JS files needed to make the dropdown work, there wasn't actually an error in my code just some of it had gone missing.
I followed spring security tutorials but all of them are giving status of login in the page, not in navbar like usually websites do.
I wanna show username in navbar after user logs in and logut button,
I am using sitemesh and navbar is separate page, I have no idea how to show globally logout button,here is my navbar.jsp page.
Thanks.
<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="#">GSYS</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Resources</li>
<li>Groups</li>
<li >Sign Up</li>
<li >Sign Up</li>
</ul>
</div>
</div>
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