I am new to bootstrap and i have been designing a taxi website . I have a issue with it where the whole container of the website is more towards the right side of the screen , its not in the center of the screen.
I guess the problem may be with jumbotron . The size of the backgroud image is
1400x562 . how can i fix it?
Preview of the website(http://threeguys.us/works/employee.html)
index.html
<div class="container">
<div class="jumbotron">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="images/logo/logo.png" width="250px" height="70px"></a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><img src="images/navigation_hover/home.png" width="100px" height="70px"></li>
<li><img src="images/navigation/rates.png" width="100px" height="70px"></li>
<li><img src="images/navigation/employee.png" width="140px" height="70px"></li>
<li><img src="images/navigation/contact.png" width="140px" height="70px"></li>
</ul>
</div>
</div>
</nav>
<div class="call_button">
<button type="button" class="btn btn-default">call us</button>
</div>
</div><!--jumbotron end-->
</div><!--container end-->
style.css
.jumbotron
{
background: url(images/car/car.png) no-repeat ;
background-size: 100%;
height: 562px;
width: 1400px;
padding-top: 0px;
}
.navbar {
/* height: 70px; */
background-color: transparent;
border:0px;
}
.navbar-brand {
padding-top: 15px;
}
Several options:
Place the class='jumbotron' outside the class='container';
The class='container' has a specific width (1170px) by default.
so you want your structure to be:
<div class='jumbotron'>content here</div>
<div class='container'>content here</div>
OR
Adjust the width of the 'container' class. Try 75%. I would recommend doing this outside bootstrap or even inline on the tag like:
<div class='container' style='width:75% !important'>
Hope this helps.
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
I want to make a navbar that scrolls with the site.
Now, if I just wanted that, I'd just add .navbar-fixed and call it a day.
However, I want that only on desktop.
On mobile, I want it to stay at the top.
Is there a way I can do that?
I've looked into jQuery for this, but everybody says I should use media queries for this (to which I do agree).
The code for my navbar is very simple with no additional CSS.:
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
so tl;dr:
On desktop: make it like it's having .navbar-fixed.
On phone: make like it doesn't have .navbar-fixed.
You have 2 solutions for this .
1. Using CSS media queries .
1.a. First make your navbar fixed using position:fixed , and then under
767px ( which is mobile ) change it to position:relative or
absolute depending on what you want.
See snippet below or > jsFiddle
.content {
height:200px;
width:100%;
background:red;
}
.navbar {
position:fixed;
width:100%;
top:0;
left:0;
}
#media only screen and (max-width: 767px) {
.navbar {
position:relative;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
1.b. You can also make a media query for desktop only.
See snippet below or > jsFiddle
.content {
height: 200px;
width: 100%;
background: red;
}
#media only screen and (min-width: 767px) {
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
}
<div class="navbar">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
2. Use jQuery for this and add class navbar-fixed in html and remove it when on mobile. See below or > jsFiddle
var wWidth = $(window).width()
if ( wWidth < 767) {
$(".navbar").removeClass("navbar-fixed-top")
}
.content {
height: 200px;
width: 100%;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="navbar navbar-fixed-top">
<nav>
<div class="nav-wrapper container">
<a href="#" class="brand-img img-responsive" wp-home-url wp-home-url-set="href" wp-home-url-scheme="relative">
<img src="https://www.finlaydag33k.nl/wp-content/uploads/2016/08/logo-FDG-300-01-300x300.png">
</a>
<ul id="nav-mobile" class="right">
<li>
<i class="material-icons">menu</i>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
</div>
using #Mihai T's (I don't know how to tag people here on SO) post as inspiration and a bit of a guide, I managed to get a working solution:
#media only screen and (max-width: 767px)
{
.navbar-fixed nav
{
position: relative;
}
.navbar-fixed
{
position: relative;
height: 56px;
z-index: 998;
}
}
Thanks for the help :D
This question already has answers here:
Mysterious whitespace in between Bootstrap2 Navbar and row underneath
(2 answers)
Closed 5 years ago.
I am creating a website with bootstrap, and I encountered a problem when I created a featured image with a parallax effect. It seems that something is creating a space between the navigation bar (Bootstrap) and the featured image.
.parallax {
background-image: url("../images/aboutHeader.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax h2 {
color: white;
font-size: 4em;
text-align: center;
padding-top: 100px;
}
<!-- NAVBAR
================================================== -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/headerWhite.png" alt="Bird's Aerial Imaging LC" style="height:100%">
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="active">About</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- FEATURED IMAGE =============================================================== -->
<section style="height:250px;">
<div class="parallax">
<h2>About Us</h2>
</div>
</section>
What I understood from you that you mean the white vertical space between the parallax div and the navbar and my answer will depend on that, if your problem is different please let me know.
Your solution is all about removing:
1) The margin property from the "h2":
.parallax h2 {
margin-top: 0;
}
2) The padding property from the "navbar":
.navbar {
padding-bottom: 0;
}
Hope it works with you!
You can add position:absolute; top:0; to your section tag. That will definitely remove the space...
It could also be because of default margin or padding around the section. Try to add margin:0; padding:0; to that
I am developing a bootstrap website that uses trianglify to generate background images for my hero div. I want text to go in the hero image, but it keeps pushing my image down.
HTML
<div>
<div id="heroImageContainer">
<div class="row">
<div class="col-lg-1 col-centered">
<p>Centered Text</p>
<p>more text</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Joshua</a>
</div>
<div>
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
CSS
/*Universals*/
.col-centered{
float: none;
margin: 0 auto;
}
/*************/
#heroImageContainer{
width:100%;
height:400px;
}
Javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.2.0/trianglify.min.js"></script>
<script type="text/javascript">
var something = document.getElementById('heroImageContainer');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
width: dimensions.width,
height: dimensions.height
});
heroImageContainer.appendChild(pattern.canvas());
</script>
Here is a working Fiddle of the problem
Fiddle
How about position the canvas and then add a z-index on to the content so it places the text infront
canvas{
position:absolute
}
.col-centered{
float: none;
margin: 0 auto;
z-index:10;
}
I have a little problem with aligning the navbarmenu with the pagecontent so it fits herizonal perfect. Right now it looks like this picture:
As you can see i want the page content be 950px (white space) and the grey outside is an overall background-color. I have only tried to create fullsize pages, so is this the right way to do it, with the width: 950px;? or is there a smarter way to force it to 950px at fullscreen for all pages?
What i'm trying to do, is to make it look like this page (the layout):
You can see fullsize page at: This page
As you can see the navbarmenu fits and a aligned with the page content and even if you try to resize it.
Code (_Layout):
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<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>
<div class="row">
<div class="navbarunder">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
CSS file:
.indexpage {
background-color: white;
height: 500px;
margin-left:auto;
margin-right:auto;
}
#media (min-width: 1000px) {
.indexpage {
width: 950px;
}
}
.navbar-inverse {
background-color: white;
border-width: 0px;
border-bottom: thin solid #95a5a6;
}
.navbarunder {
font-variant: small-caps;
border-top: thick solid #003665;
border-width: 8px;
}
Hope someone can tell me what i should look at, because i have tried everything what i know..
I believe container-fluid on your navigation div is the culprit, as discussed in the accepted answer to Container-fluid vs .container
You might want to consider using one of the Bootstrap examples like Sticky Footer Navbar. View source on that page and you can grab the parts you want and begin tweaking that HTML to fit your needs.