I using bootstrap to do a small project, I'm trying to do a dropdown and using a arrow to show that there is something under, but im having problem trying to align the text left and the arrow right.
it is possible to align the text left and the image right
this is how it looks now
Busines > |
|
|
Is there a way to make it look like this:
Busines > |
|
|
code:
<a href="#Business" class="expander">Business <span
class="glyphicon glyphicon-chevron-right pull-right"
style="float:right; margin-right:3px; font-size:0.7em; "></span></a>
Part of the menu code:
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Left Navigation</span>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse">
<nav id="leftNav" role="navigation">
<ul class="leftnavigation">
<li>
Business <span class="glyphicon glyphicon-chevron-right pull-right"> </span>
<ul id="Business">
<li>Administrative </li> .........
What display property are your anchors set to? Try setting the a.expander to display: inline-block, and give it a width. That should float your chevron glyph to the right.
Also, no need to inline-style it with float: right, as that's what bootstrap pull-right does. (redundant CSS).
Hope that helps!
If you want align right arrow inside element than this element has to be width enough.
If element display style is inline (default for a tag) you cannot align anything inside.
E.g. if you will add display: block to your a tag or display: inline-block; width: 100%
Othervise your a will not take full width of parent element
<a href="#Business" class="expander" style="display: inline-block; width: 100%">Business
<span class="glyphicon glyphicon-chevron-right pull-right" style="float:right; margin-right:3px; font-size:0.7em; "></span>
</a>
Related
I have two navbars on my page. The first one is working, but the second one is not.
I have the following code for the 2nd one:
<nav class="navbar navbar-default">
<!-- <div class="container-fluid"> -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<span class="hidden-md hidden-lg"><a class="navbar-brand" href="#"> PRODUCTS >> </a></span>
<button type="button" class="navbar-toggle1 collapsed" data-toggle="collapse" data-target="#cat-nav-mega">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="cat-nav-mega">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
SCOTTCREW'S OWN SILICONE MOLDS <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu megamenu" role="menu">
<li>
The actual working page can be seen at (The site is currently in development and not a live site):
https://www.scottcrewcandlesupply.com/agoracart55/agora.cgi?keywords=books#
Can anyone tell me why the navigation doesn't show at medium and how I
can fix this?
Thanks!
on you main css class you have this :
your cat navbar will be hidden if screen size is blower than 1200px based this css code on responsive.css :
#media (max-width:1200px)
{
.navbar-collapse.collapse
{
display: none!important;
}
}
so your first navbar has a responsive css and is visible only if screen is more than 1200px.
and about second navbar :
if only screen is more than 768px, it would be shown in style.css
#media (min-width: 768px) {
navbar-toggle1 {
display: none;
}
So there is a gap between this two #media size , and there will be no navbar if screen is more than 768px and less than 1200px.
Anyway for fixing the navbar you asked do these steps:
1-
.navbar-toggle1 { // at style.css line 68
display: none;
}
2- add hidden-lg to this :
<`a href="#" class="navbar-brand hidden-lg"> PRODUCTS >> </a>`
3- and hidden-lg to this
<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
class="navbar-toggle1 collapsed hidden-lg">
4- remove hiden-md and add a new class name like navbarNew
finaly they they have to be like blow:
<span class="navbarNew"><a href="#" class="navbar-brand hidden-lg">
PRODUCTS >> </a></span>
And
<button type="button" data-toggle="collapse" data-target="#cat-nav-mega"
class="navbar-toggle1 collapsed hidden-lg">
And it would works Fine:)
I have a Bootstrap menu in Wordpress like this:
<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>
</div>
I am using a version 3.0.3 "bootstrap.min.js" file. I would like to know how to blur the page content once the nav collapses, removing blur after hiding. I am already using a transparent background for the nav when collapses.
Thanks!
You can create a new div set to position:absolute and size of the whole page.
Add the blur effect to its class.
I want my facebook icon to aligned in center(horizontally not vertically, so that it comes between my collapse button and twitter icon). I tried text-align but it isn't working..! Any other way I can do it ?
My relevant HTML code
<button type="button" style="float:left;" 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>
<ul>
<li class="horiz1">
<img src="img/facebook.png" style="width:28px;" >
</li>
<li class="horiz">
<img src="img/twitter.png" style="width:35px;" >
</li>
</ul>
My relevant CSS code
.horiz { display: inline; float: right;}
.horiz1 { display: inline;}
I tried text-align but it isn't working..
Where did you tried?
Apply that property to ul tag, like...
ul {
text-align: center;
}
http://jsfiddle.net/gmolop/ovwnw90u/
use margin-top to make it come down a little.
Edited: Try using this :
.horiz
{
margin:0 auto;
display:inline;
float:right;
}
Set the Heights of the images equal to get them centered.
When trying to adjust to Bootstrap 3, I have encountered the following problem.
When I click on the button named F, I would like Home and Not Home to show up, but it does not at the moment.
This is the video I am learning from.
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
<a class= "navbar-brand">Jackdh</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> F
</button>
<div class ="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li>Home</li>
<li>Not Home</li>
</ul>
</div>
</div>
</div>
I'm pretty sure that you simply forgot to add bootstrap.js and also jquery.
With that included, everything works for me.
#op (original poster)
Marcel's answer gave me a clue so I checked my script tag
<script src="bootstrap.min.js"></script>
I forgot to add the bootstrap javascript folder "js/"
With this script tag everything works fine.
<script src="js/bootstrap.min.js"></script>
# Marcel - I couldn't vote up your answer due to lack of reputaion!
You forgot to add navbar-header div after container, Try this one !
`
Brand
<button type="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>`
I am having issues with <select> elements lining up in a bootstrap nav bar. I want the text from "Search for" all the way to the "Go!" button to be vertically aligned. It looks as if the button and selection elements are the same height, so I want them to be flush on the top and bottom.
Here's the code:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<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="brand" href="#">Project</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home"></i> Home</li>
</ul>
<form class="navbar-search pull-right">
<div>Search for
<select class="span2">
<option>Things</option>
</select> in
<select class="span2">
<option>City, NY</option>
</select>
<button type="button" class="btn btn-primary">Go!</button>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
Here's a jsFiddle with an example. http://jsfiddle.net/jefe317/EjS6f/2/
Both Firefox and Chrome show similar results
Rohit's answer kind of works but can leave the text off center a little. You can also remove the margin-bottom from the select:
select[class*="span"] {
margin-bottom: 0;
}
That should even everything out.
http://jsfiddle.net/EjS6f/5/
Demo
Hi #Jeff Lange Now define your button margin-top:0; and add to vertical-align:top;
As like this
.btn.btn-primary{
margin-top:0 !important;
vertical-align: top;
}
Demo
I had a similar problem but I fixed it with:
<select class="span2 navbar-btn">
<option>Things</option>
</select> in
<select class="span2 navbar-btn">
<option>City, NY</option>
</select>
<button type="button" class="btn btn-default navbar-btn">Go!<button>