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
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>
I'm having problems extending the navbar-right in Bootstrap. I need it to fit all the elements in it. Here is what's going on:
I can't get the profile image and the username to display separately. I've tried "clear: both" and the normal stuff. When I extend the size of the UL, it breaks the parent DIV. When I try to extend the size of the LI, it doesn't do anything. Here is my code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<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="#"><img src="images/logo.png" class="logo"> <span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Files</li>
<li class="active">Sharing</li>
<li>Recent</li>
<li>Deleted</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><img src="images/Search.svg"> </li>
<li><img src="images/Notification.svg"> </li>
<li><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile"></li>
</ul>
</div><!--/.nav-collapse -->
</nav> <!-- End Fixed Nav -->
Can anyone help me?
Add <div class="container-fluid"> after <nav> and adjust the name and picture alignment with margin.
Try this
check demo here
HTML:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#"><span class="site-title">Privy Personal</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Files</li>
<li class="active">Sharing</li>
<li>Recent</li>
<li>Deleted</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-user"></i> </li>
<li><i class="fa fa-user"></i> </li>
<li><span class="username">Tony Stark</span><img src="http://placehold.it/25x25" class="profile img-circle"></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed Nav -->
CSS:
.username {
margin-right: 5px;
}
.profile {
margin-top: -7px;
}
I hope it helps you :)
<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.
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.
I'm trying to make a navbar using bootstrap to my own needs, but have stumbled upon a problem.
I want the first two links from the left (home and menu glyphicons) to not collapse when window is sized down. The rest would collapse.
Screenshot link
enter link description here
Here is my code
<template name="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>
<li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav">
<li class="{{activeRouteClass 'home' 'newPosts'}}">
New
</li>
<li class="{{activeRouteClass 'bestPosts'}}">
Best
</li>
{{#if currentUser}}
<li class="{{activeRouteClass 'postSubmit'}}">
Submit Post
</li>
<li class="dropdown">
{{> notifications}}
</li>
{{/if}}
</ul>
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}}
</ul>
</div>
</div>
</nav>
</template>
Move them into a separate <ul> object without the nav navbar-nav classes in order to disable this behaviour.