I am trying to add 4 navigation buttons at right side. On Clicking which I would be able to navigate to respective divs in the same page.(just like a single page design).
I am adding following lines of codes to create 4 navigation buttons at right side of the page.
<div data-spy="affix" class="offset8 span1 well offset7 small">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
But those lines of codes are not placing my 4 buttons at extreme right. Check snapshot.
Which bootstrap classes can be used to make it place at extreme right side and those should be fixed in position. (responsiveness should be well taken care of).
you can use .navbar-right and also add position: fixed; right: 0;.
that should do the trick
You actually need to use navbar-right, as I found out from here and used in my code:
<div class="navbar-collapse collapse navbar-right" >
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu pull-right" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
HTML
<div data-spy="affix" class="offset8 span1 well offset7 small nav">
<ul class="nav nav-list">
<a class=".move-1" data-target=".home-1-image"> A </a>
<a class=".move-1" data-target=".home-2-image"> B </a>
<a class=".move-1" data-target=".home-3-image"> C </a>
<a class=".move-1" data-target=".home-4-image"> D </a>
</ul>
</div>
CSS
.nav {
position: fixed;
float:right;
margin-right: 0px;
}
Related
When I click the dropdown button the other content under it moves down with it. The I've tried z-index, position:relative; position:static How can I prevent this from happening. I don't want anything to move when the dropdown is clicked. Any ideas?
<div class='whiteBox'>
<div class='newProducts'></div>
<div id="compareInfo">
<div id="comparisionTitle">Title</div>
<div class="divStyle">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="item1DropDown" href="#">item1</a></li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div id="compareBoxes">
<div id="Label">Text under Dropdown</div>
<button class=
"btn btn-compare" id="compareButton" type=
"submit">Submit</button>
</div>
</div>
</div>
#divStyle{
list-style:none;
position:relative;
float:left;
right:240px;
}
You have to set the div you want to have a dropdown menu like this:
list-style:none;
position:relative;
float:left;
And then set your own position for it.
Here is an excellent customizable tutorial on it.
You seem to be missing the dropdown class on your div, and the role field for the li and a tags within your dropdown. Try adding role="presentation" to those.
Like:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"...>...</button>
<ul class="dropdown-menu">
<li role="presentation"><a role="presentation ...>item1</a></li>
</ul>
</div>
This is a simplified version of a typical bootstrap navbar dropdown (in the documention you can see it working in the original navbar)
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
and when it's clicked it toogles display:block and the position is always
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
Since bootstrap highly depends on the it's markup you need to strictly reference the documentation, so I suggest you go over your code to see what's missing.
Here is a link to my markup, which is 100% relient on Bootstrap:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-align-justify menu-icon"></span>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" style="margin-right: 6px;">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user user-icon"></span>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
On codepen: http://codepen.io/dsparry/pen/qEJen
You'll see when you make the window small, the right icon jumps down below the left icon and makes the navbar larger.
I want the navbar and icon position to stay the same when the window is resized. In other words, I don't want anything to change. I've tried to override Bootstrap with custom CSS but haven't been able to figure it out.
Any ideas? What CSS should I include to prevent the icon from jumping down when the window is resized?
you have 2 ul
add classes to first ul : col-xs-6
add classes to second ul : col-xs-6 text-right pull-right
edit: that will break your layout.
You should have one UL with the intended right aligned li with pull-right at the first of the list like :
<ul class="navbar ...">
<li class="pull-right ...">
<li></li>
</ul>
You can get help better if you do a jsfiddle
Using the latest version Bootstrap, I am wanting to replace the branding area text with a logo. On my desktop, it looks perfect, on my iPhone, the logo appears under the small collapse menu, whereas it should be beside it (to the left of it). If I make the logo smaller, it works fine on the iPhone, but the small logo is too small for the desktop site. I thought by adding the img-responsive class to the logo, it would shrink accordingly, but that fails. If you want to replicate this, the logo is 276px wide 40px high.
Everything appears fine on the iPhone in horizontal orientation (it is strictly a problem when viewing in vertical, which is naturally the way most people hold their phone).
Here is the related code (you will notice near the bottom, there is a purchase button, this automatically gets hidden on the iPhone, which would suffice for the logo if there is no other option). Mind, the ultimate solution would be to have the logo shrink based on screen size.
<!-- Fixed navbar -->
<div 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=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Application <b class="caret"></b>
<ul class="dropdown-menu">
<li>Features</li>
<li>Screenshots</li>
<li>Demos</li>
<li class="divider"></li>
<li>Purchase</li>
<li>Licensing Model</li>
</ul>
</li>
<li class="dropdown">
Documentation <b class="caret"></b>
<ul class="dropdown-menu">
<li>Version Info</li>
<li>System Requirements</li>
<li class="divider"></li>
<li>Installation Guide</li>
<li>Integration Guide</li>
<li>Frontdesk Manual</li>
</ul>
</li>
<li class="dropdown">
Support <b class="caret"></b>
<ul class="dropdown-menu">
<li>Knowledgebase</li>
<li>Submit Ticket</li>
<li>View Ticket Status</li>
<li class="divider"></li>
<li>Installation Service</li>
<li>Development Services</li>
</ul>
</li>
<li class="dropdown">
Contact <b class="caret"></b>
<ul class="dropdown-menu">
<li>Presales Questions</li>
<li>Contact Us</li>
</ul>
</li>
<li class="dropdown">
Legal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Privacy Policy</li>
<li>Terms of Use</li>
<li>Site Security</li>
<li class="divider"></li>
<li>Money Back Guarantee</li>
</ul>
</li>
</ul>
<button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button>
</div>
<!--/.nav-collapse -->
This fixes the I-phone issue with the brand logo appearing under the collapsed menu icon. you might have to play with the width a bit depending on your setup:
#media (max-width: 500px) {
.navbar-brand{
width:60%;
}
}
Put your image as a background in css with background-size:cover.
I want to pull right icon glyph in drop down menu like as below
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
2-level Dropdown <i class="icon-arrow-right pull-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>Another action</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
But when I run this code on FireFox (Chrome and IE are oke), "icon-arrow-right" and "2-level Dropdown" aren't same a line . How can I fix it ?
Full code on JSFIDDLE
<a href="#" style="overflow: hidden;">
<span class="pull-left">2-level Dropdown</span>
<span class="icon-arrow-right pull-right"></span>
</a>
jsfiddle
The solution from cetver works well for me.
For the record though, here's another way to get the same results:
http://www.bootply.com/70536
HTML
<i class="icon-arrow-right"></i> 2-level Dropdown
CSS
.icon-arrow-right {
float: right;
margin-top: 2px;
margin-right: -6px;
}
I'm making a website using Twitter's Bootstrap and everything is almost set but I can't figure how to position a search bar into the main menu
Here is the website online
http://testings.coffeecup.com/index1.html
Each time I put it anywhere on the container it screws up either.
EDIT:
I managed to add it:
http://gyazo.com/e76b7cfa8e25b9ef2913d588b28ea894
But I still can't position it on the right.
The css I'm using
.navbar-search {
position: relative;
}
.navbar-search .search-query {
float:right;
}
.navbar-search .icon-search {
position: absolute;
top: 7px;
background-image: url("");
}
Right after the <div class="navbar-inner"> include the search bar <input> with whichever attributes you need .. after just float it to the right and adjust the margins so its centered vertically in the nav-bar.
You have to add the search-bar inside <div class="navbar-inner"> and after <div class="nav-collapse collapse">.
The code for the search bar:
<input id="search" class="span3" type="search" name="search" placeholder="Search">
You can use the pull-right class
i used it in the container
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-search pull-right" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>
<ul class="nav pull-right">
<li>Link</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div>
REsult :