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.
Related
I'm just starting to refactor a site to use Bootstrap and I'm trying to get an image logo to be the first thing to the far left on the navbar and then next to it will be my menu. However using the code below it will display the logo where expected but the text "PBS" in the case is displayed below the image. Am I missing a css style? BTW, not sure if the server side hyperlink has anything to do with it but I'm using it because the homepage link will be different based on being logged in as a User or an Admin. I'm setting that link in the load of the masterpage.
<div class="navbar navbar-inverse navbar-fixed-top">
<div>
<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>
<asp:HyperLink ID="hlBrandLogo" CssClass="navbar-brand" runat="server"><img src="images/logo.png" /> PBS</asp:HyperLink>
</div>
Seems like you missed to make the both inline, It has nothing to do with bootstrap you can do it with below css
#hlBrandLogo
{
display:inline
}
img
{
float:left;
}
try this and for ref check, Hope this helps.
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>
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.
Bootstrap newbie here. I'm trying to break down my bootstrap template into multiple segments (i.e. title, footer, left nav, and main content) for re-usability and ease of updating.
The problem I have is when I try to import the external HTML file using the object tag, it messes up the CSS layout.
<object name="foo" type="text/html" data="title.html"/>
When I don't use the object tag, it displays fine. However, if I strip out the "container" div into "title.html" and link it back in using the object tag, it fails. Is there a way to prevent that?
Here's a sample and the screenshots on what I'm trying to do:
<body>
<!-- start: Header -->
<header class="navbar">
<div class="container">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".sidebar-nav.nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="main-menu-toggle" class="hidden-xs open">
<i class="fa fa-bars"></i></a>
<a class="navbar-brand col-lg-2 col-sm-1 col-xs-12" href="index.html">
<span>Home Portal Link</span></a>
</div>
</header>
</body>
Screenshot 1: Failed page when use object tag
Screenshot 2: Working page - not using the object tag
Any advice is appreciated!
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>`