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.
Related
When adding an additional line of display in the header, the expanded header overlays the body. It doesn't seem that straightforward to compensate for this since the bootstrap does all of the styling behind the scenes.
This is the normal view:
When the expanded header is displayed, you can see a line of the body is overlaid.
In the second picture, a line of the body is overlaid. What do I need to do to compensate for the expanded header? I would like to be able to compensate for a variable sized header rather than just add < br/ > elements which will only work for a specific sized header.
Razor page code as requested in comment:
<body>
<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>
</div>
<div class="navbar-collapse collapse">
#<div Class="navbar-text navbar-left">
#Model.HelpTitle <br /> #Model.Message
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required:=False)
</body>
In the code above, the difference between a single line or double line display in the header is dependent on these 2 fields.
#Model.HelpTitle
#Model.Message
If there is no message, then there is a single line. If there is a message, then there are 2 lines and the header expands down into the body.
I don't understand the 2nd comment below to use relative position, so if someone could explain, that would be great.
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 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>
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>`