I am trying to insert an image above a navbar, but I it is not working for me. Here is my html:
<div class="wrapper" />
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
and my css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 250px;
}
Anytime I add a div or any content, it is pushed to the top of the page. I can add padding, but when I start to resize the screen it breaks and leaves a gap in the image and the navbar. Any help would be great.
<div /> means <div> in HTML 5 and not <div></div> as it does in XHTML. Div's are not valid self closing tags.
Ref
Demo
<div class="wrapper"></div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active">
<a class="brand" href="#">Home</a>
</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
The issue is /> at the end of .wrapper, because it is not allowed (depending on your doctype). Remove it and give it </div> like the other divs, I think it's going to work.
Related
I want my page to be in a class="container" but I want the header (the blue and grey column) also in the class but I want the blocks to give the background to the whole row. So the blue and grey color needs to be over the whole width. I was wondering if there is some way to get that?
The question:
Is there a way to get the grey and blue block to be the full width so the color is the full width but the text is just like it is now. The div has a class="container"
Try this,
<div class="header">
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Community</li>
<li>Groepen</li>
<li>Trainingen</li>
<li>Support</li>
<li>Profile</li>
<li>Inloggen</li>
</ul>
</div>
</nav>
</div>
<div class="subheader">
<div class="container">
<ul class="breadcrumb">
<li>Home</li>
</ul>
</div>
</div>
<div class="middle-section">
<div class="container">
</div>
</div>
I'm making the navbar of my Website with the following code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="images/logo.png" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
The problem is that the logo image is big (225x225 pixels), and I would like to set it to the default size of the navbar. But the opposite happens, i.e the navbar adapts to the size of the logo (and becomes very big).
I did not find any feature in bootstrap to do this ? Any idea ?
Thank you
navbar-fixed-top has a fixed height 50px, so you can directly style an image by setting e.g. max-height: 40px to it and margin: 5px to center image.
.navbar-header img {
height: 40px;
margin: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<img src="http://lorempixel.com/225/225" class="img-circle">
</div>
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li> Liens </li>
<li> Login </li>
<li> Signup </li>
</ul>
</div>
</nav>
I had the same problem sometime back and this is what I did . Hope this works for you
.brand{
max-height: 30px;
}
<a href="link/location/here" class="img-circle">
<img class="brand" src="img/logo.png">
</a>
I have a problem that I can not make navigation block visible if(its fixed)
styles:
<div class="main_nav">
<div class="container">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-2">
<a href="#" style="text-decoration: none;">
<h1 class="navbar-brand company_title" href="#">Tourer</h1>
</a>
</div>
<div class="col-xs-9">
<div class="navigation">
<ul class="nav navbar-nav navbar-right top_nav">
<li><a id="nav_about" href="javascript: void(0);">About</a></li>
<li><a id="nav_how_it_works" href="javascript: void(0);">How it works</a></li>
<li><a id="nav_features" href="javascript: void(0);">Features</a></li>
<li><a id="nav_footer" href="javascript: void(0);">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
.main_nav {
width: 100%;
z-index: 1000;
position: fixed;
background: url('../images/gradient.png');
padding-top: 30px;
min-width: 1280px !important;
Screen:
http://i.stack.imgur.com/Zljz4.png
I cannot scroll to see the right part of my nav.
Please help me.
The fixed position is always relative to viewport. Hence, min-width: 1280px !important; automatically assumes that your width:100% will be ignored when the screen is smaller than 1280px. Try remove the min-width declaration.
Already try other solutions from this community, but nothing seams to work!!
I want to horizontally center the menu. The "logo" is left align on top of it.
Here is the code (no changes to css that matter to this):
<nav class="navbar navbar-default navbar-fixed-top">
<div class="col-lg-2">
</div>
<div class="col-lg-8">
<img class="logo" src="images/logo.png" />
<ul class="nav nav-pills">
<li>
<a href="#"><img src="images/menu/123.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/456.png" />
</a>
</li>
<li>
<a href="#"><img src="images/menu/789.png" />
</a>
</li>
</ul>
</div>
<div class="col-lg-2">
</div>
</nav>
Edit: This solved the problem
ul {
width: 825px;
margin: auto;
}
Try changing this <div class="col-lg-8"> to this <div class="col-lg-8 col-lg-push-2 center-block">
Get rid of the two empty <div class="col-lg-2">
Try out this codes,
Bootstrap Centered Navigation
Bootstrap Centered Menu
well, solved:
ul {
width: 825px;
margin: auto;
}
It's the first time I'm using twitter bootstrap.
I wanted to limit the size to 940 px, and for that I used the span12 class.
But it doesn't seems to be working. Whole content is spread wide across the page.
What do I do to fix it ?
Here's the code :-
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
The navbar is fixed at the top of the page. Even though the span12 has a width:940px since the navbar is affixed to the top, it takes 100% width.
To fix this apply the width to .navbar-fixed-top as below
.navbar-fixed-top{
margin: 0 auto; //to align horizontally in center
width: 940px;
}
The easiest way will be to put a <div class="container">, a <div class="row">, and a a <div class="span12"> inside the fixed navbar. Since the navbar is position: fixed;, it's removed from the normal flow of the page. You'll need to define the containment inside the navbar. After that it hardly seems worth keeping it nested in the original ones, so may as well make them siblings. So, like this:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar-inner">
<ul class="nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12">
<!-- page content -->
</div>
</div>
</div>
You may need to adjust the specific nesting, but this should fix the immediate issue.