I've got a nasty little problem I can't solve. I need to add an tall image to a bootstrap navbar (navbar-fixed-top, if possible). The image is in the navbar-brand. Let's say that the image is 350px high, and the navbar 60px. That causes the background of the navbar to fill the space to the bottom of the image.
I need that image to stick out of the navbar and to have to text under it flow around it. If I use an absolute position for the image, it will be where I want it, but it will lay on top of the text. That's not good. I need the text to float around it.
How do I solve this one?
Not sure if this is what you're looking for, or why you'd want to do this exactly, but this is my take on it:
I'd put the image in the body of the page, unless there's good reason to leave it in the header? This allows you to set properties for the surrounding text more effectively.
One note - the image you're using is a complete raster image, therefore, text won't wrap around the exterior of it like print layout will in an inline image in a magazine or newspaper for example. So if that's what you're looking for, you'd need to start with different image assets.
I chose to address this question as if you wanted the text to wrap around the image rectangle only.
Also, I abandoned your css, and commented out two calls in the body to js files I didn't have locally, so that could impact the outcome.
Final note - because this image overlaps the header, I'd recommend doing something like a "pull-right" on the navbar so it doesn't get overlapped by the logo image.
The following HTML should be all you need to see the results - I'm just grabbing jQuery and Bootstrap from CDNs, should work for you as well. Let me know if you have any questions on it.
<!DOCTYPE HTML>
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.navbar-brand {
position: relative;
top: -130px;
left: -60px;
margin: 0 0 25px 0;
padding: 0;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<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="https://www.bitballoon.com//images/posts/grunt-logo.png"></a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<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">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div><!-- col-xs-8 -->
</div><!-- row -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<a class="navbar-brand" href="#"><img src="https://www.bitballoon.com//images/posts/grunt-logo.png"></a>
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- not sure what this is... removing ..................
<script src="js/docs.min.js"></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
..... don't have this script, removing .................
<script src="js/ie10-viewport-bug-workaround.js"></script>
-->
</body>
</html>
Related
I am trying to create a page with a fixed navigation bar at the top of the page. What I need is something like this.
As we can see in above linked page, the content of the page starts after giving priority to the navbar. But in my case, the content starts right from the beginning of the page. It is like the navbar is placed on top of the other content.
You can see the JsFiddle demo here.
In the demo page, I have not added anything new. It contains the source of the page which is linked earlier in this question.
this is my navbar and the other div which have been put inside the body section of the page.
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse 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">
.......
</button>
<a class="navbar-brand" href="#">Bootstrap theme</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<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">
.......
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container theme-showcase" role="main">
.....
</div>
Why can't I see my page as needed. Have I missed something in my code?
In the Bootstrap template they have this css code
body {
padding-top: 70px;
padding-bottom: 30px;
}
and this code is used in theme.css file which is not included in your html.
You can resolve this by adding only the code above in your CSS code
or you can link to theme.css file in your HTML code
Add CSS:
body {
padding-top: 70px;
}
You can see this by inspecting the element here. It do exist in css.
https://getbootstrap.com/examples/navbar-fixed-top/
I'm having a bit of a problem with the Bootstrap nav I've placed on a website I'm making.
When collapsed on smaller screens, the drop down navigation menu doesn't span 100% of the screen - It looks as if there's a 1px gap on either side of the menu and I can't seem to figure out how to fix this.
** EDIT **
Due to bad markup in my original post - I've updated this (still having probelems, but this represents my problem better) at JSFIDDLE
<div class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="fa fa-bars fa-2x"></span> Menu</button>
<span class="logo"> Logo</span>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Book A Repair </li>
<li>About </li>
<li>How it Works </li>
<li>Testimonals </li>
<li>Contact </li>
</ul>
</div>
</div>
It's happening because of the Bootstrap margin on the .navbar-collapse.. which is a negative margin of 15px. Just move it out a pixel on each side:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}
Bootply
i have tried multiple solutions to my problem but i guess the unique structure of my project designs , require unique solution to fit the video in a box and keeping it responsive.
here is the snapshot of what i want to achieve:
mock up image
now this is the link of my code :
http://new.loversorlosers.com see the black box where i want to put responsive video.
so far i have tried different examples available on SO and other tutorial websites, but none are working . my guess is this is happening because of unique position of video embed.
currently i am trying this jQuery approach but even this is not working on different screen sizes: StackOverflow example position of element over background
i am using bootstrap 3 & bootswatch framework.
thanks for your help
I found this youtube video that will walk you thru the steps. Create a folder, download bootstrap, extract the files in your new folder paste in the following code https://www.youtube.com/watch?v=oAPdNKTrBYA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
h1 {
color: red;
}
h2 {
color: black;
}
h3 {
color: red;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<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>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end of navbar wrapper -->
<div class="container">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<p class="panel-title">Responsive video Embed 16by9</p>
</div><!-- end of panel heading -->
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-dfnKTY_dfc" allowfullscreen></iframe>
</div>
</div><!-- end of panel body -->
</div><!-- panel closes out here -->
</div>
</div><!-- container -->
</div>
<div class="col-md-6">
<h1> Attention All<br>Lovers..</h1>
<h2>Join Todd Bridges</h2>
<h3>For Lovers or Losers</h3>
<h2>the Game Show
And Receive a 3 Day, 2 Night stay
In the Entertainment Capital
of the World </h2>
<h2>The best part is it
Won't Cost you a dime!!! </h2>
<div class="btn btn-default"> Click Here Now Reserver Your Seat!!!</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Starting out with Bootstrap 3 and just getting used to it.
I've copied the navbar from the Bootstrap 3 docs becuase it has the exact functionality that I want and why invent the wheel hey.
I want to put a Jumbotron after the header but I want it to be full width, so according to the docs I don't enclose it in a container div.
The problem is that when I omit the container div it slides back under the header but I want it to start where the header ends. If I put it inside a container it sits nicely under it.
Can someone show me where I'm going wrong and how to fix it without making some hack div that pushes it down. Many thanks.
I want to keep the container in the header tag becuase I don't want these elements stretching to the sides.
<!-- Docs master nav -->
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
<img src="imagenes/logo.png" />
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-right pull-down">
<li class="">
Menu
</li>
<li class="">
Galería
</li>
<li class="">
Calendario
</li>
<li class="">
BH Musicos / Talentos
</li>
<li class="">
Blog
</li>
<li class="">
Contacto
</li>
</ul>
</nav>
</div>
</header>
<div class="jumbotron">
<h1>Hello World</h1>
<p>Testing one two three</p>
</div>
If you look at the "Fixed to top" section on the navbar docs, there's an alert urging you to add padding to the body:
Body padding required
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core
Bootstrap CSS.
Adding a container inside the jumbotron will also fix this.
I'm creating a Site using Twitter Bootstrap 2.0.4 + bootstraps responsive.css. What I don't know is: Is it possible to have a logo appearing at the top left of the site and the navbar appearing on the right of the logo (but fixed at top)? While changing Sizes, the Logo should then appear on top of the navbar.
Would be really nice to get an answer for I haven't found anything helpful yet.
Greetings,
Dominik
edit: Here's a picture describing what I want to achieve: http://i.imgur.com/HX3ZM.png
Logo on the left, then navbar.
Okay, I got it. I used the fixed navbar, which didn't work as expected. You have to use a static navbar. Then you could just use the row / scaffolding system from bootstrap.
Example code for a logo left from the navbar:
<div class="row-fluid">
<div class="span3">
<p><img src="/sites/img/your_logo.png" alt="Logo" class="responsive-logo"></p>
</div>
<div class="span9">
<div class="navbar">
<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>
<div class="btn-group pull-right">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i> Username
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Profile</li>
<li class="divider"></li>
<li>Sign Out</li>
</ul>
</div>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div><!-- end navbar -->
</div><!-- end span8 -->
</div><!-- end row -->
To make my Logo responsive, I added the following css rules:
.responsive-logo {
max-width: 100%;
height: auto;
border: 0;
padding-top: 10px;
}
Yes, sure—you will need to re-structure your document to place (for example) a div with the span4 class above the navbar.
Below that, have the navbar code and remove the branding elements (which usually house your logo). My assumption leads me to believe you want something like this:
If you can be a bit more specific about what you want, and/or provide the relevant parts (HTML) of your site, I can likely give some more direction.