I am trying to position my content under my navbar and when I add the padding-top: 60px; it works but pushes the navbar down. I also need the background to be at the top of the page behind the navbar. How can I fix this? The content for the page including the navbar AND background are pushed down but I need the navbar and the background at the top of the page and only the content pushed down.
body {
padding-top: 65px;
margin: 0;
width: 100%;
}
#header {
background-color: grey;
opacity: .7;
width: 100%;
height: 80px;
position: fixed;
z-index: 1000;
}
#logo a {
font-size: 30px;
font-weight: bold;
color: rgb(255, 255, 255);
font-family: 'DIN 1451 Std Engschrift';
margin-top: 5px;
}
#slide1 {
width: 100%;
background: url('sunrise.png') 50% 0 no-repeat fixed;
background-size: cover;
color: #ffffff;
height: 700px;
margin: 0;
padding: 40px 0 260px 0;
}
.content {
margin: 0 auto;
width: 1000px;
}
<div id="header">
<div class="content">
<nav id="nav" class="navbar navbar-expand-lg">
<div id="logo">
<a class="navbar-brand" href="#">Navbar Logo</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="logo">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<a class="nav-item nav-link" href="#slide3">How it Works</a>
<a class="nav-item nav-link" href="#slide4">For Landlords</a>
<a class="nav-item nav-link" href="#">F.A.Q</a>
<a class="nav-item nav-link" href="#pricingslide">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<body>
<div id="slide1">
<div class="content">
<h1 id="headline">Use Your Rent To Buy A Home</h1>
<p id="subtitle">Build a credit history, create a down payment,<br> all by just making rent payments thru LikeHome</p>
<h3>Find out how soon you can become a homeowner?</h3>
<%= render '_how_much_buying_form.html.erb' %>
</div>
</div>
</body>
</html>
Do this work for you?
body {
margin: 0;
width: 100%;
}
#slide1 {
background: url('http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg') 50% 0 no-repeat fixed;
background-size: cover;
color: #ffffff;
height: 700px;
padding: 40px;
margin-top: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<nav id="nav" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div id="logo">
<a class="navbar-brand" href="#">Navbar Logo</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#slide3">How it Works</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#slide4">For Landlords</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">F.A.Q</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricingslide">Pricing</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="slide1">
<h1 id="headline">Use Your Rent To Buy A Home</h1>
<p id="subtitle">Build a credit history, create a down payment,<br> all by just making rent payments thru LikeHome</p>
<h3>Find out how soon you can become a homeowner?</h3>
</div>
First of all you need to correct the HTML markups. All html contents must be inside tag. Wrap the elements in a body tag, and create another div or section for contents followed by the header. And give padding to that div.
Related
This question already has answers here:
Bootstrap NavBar with left, center or right aligned items
(14 answers)
Closed 1 year ago.
Hi I am trying to get my navbar to look like this:
But I cant seem to figure out how to get the image to be on top of the navbar. I am using bootsrap 5. I havent added any css to the navbar yet is there some property i can use to bring it to the front. Thanks, here is the html:
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
<a class="navbar-brand" href="#"><img src="/images/logos/circle-cropped.png" alt=""></a>
<!-- <img src="/images/logos/circle-cropped.png"> -->
</ul>
</div>
</div>
</nav>
</header>
WORKING DEMO HERE
This CSS should help:
.navbar-brand {
flex: 0 1 auto;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 0;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%);
text-align: center;
}
.navbar-brand img {
max-height: 100%;
max-width: 100%;
}
I'm trying to create a quite complex navbar using bootstrap. I wonder wether it is possible to make the dropdown menu floating, so it does not make the navbar big and ugly. The picture is quite self-explanatory:
Code:
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
.menu-item-seleccionado {
color: white !important;
background-color: grey;
padding: 10px !important;
}
.menu-item-sin-seleccionar {
color: white !important;
padding: 10px !important;
}
.titulo-menu {
margin-left: 1%;
color: white !important;
}
#media screen and (max-width: 736px) {
.navbar-expand-lg .navbar-collapse {
flex-basis: auto;
}
.flex-derecha {
width: 250px;
position: absolute;
height: auto;
background: black;
top: 50px;
right: 0;
}
.collapse:not(.show) {
display: none !important;
}
.nav-item
{
width:250px;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
<div class="container-fluid" style="margin: 0; width: 100%;">
<div class="flex-izquierda">
<a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
</div>
<button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="flex-derecha collapse navbar-collapse" id="bar">
<ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
<li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>
<li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>
<!-- Imagen para cambiar el idioma -->
<li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
<img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" alt="">
</a>
</li>
</ul>
</div>
</div>
</nav>
Mobile View
Desktop view
I am making a navbar and I want to fix my logo in the center of the navbar. I did it somehow but when I go to the mobile screen the logo is not exactly in the center and when I press my burger menu the logo moves to down.
How can I fix it please help me?
<nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color:transparent">
<div class="container-fluid">
<a class="navbar-brand neon" routerLink="/home">Shams Ali</a>
<img class="img-fluid mr-auto logo" src="assets/logo.png"/>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="nav-link neon" routerLink="/home">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link neon" routerLink="/project">Projetcs</a>
</li>
<li class="nav-item active">
<a class="nav-link neon" routerLink="/about">About Me</a>
</li>
<li class="nav-item active">
<a class="nav-link neon" routerLink="/contact">Contact Me</a>
</li>
</ul>
</div>
</div>
</nav>
.logo {
margin: 0 auto;
display: block;
position: fixed;
left: calc((100% - 195px) / 2);
z-index: 100000;
}
In fact, you just have to set a top position :
Css :
.logo {
margin: 0 auto;
display: block;
position: fixed;
left: calc((100% - 195px) / 2);
z-index: 100000;
top: 15px;
}
Fiddle: https://www.codeply.com/p/5Cq8gytisY
Try adding that to your styles:
.center {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
When my navbar collapses the burger menu shows up. Whenever I click on it all the content below gets pushed down and leaves me with a messed up homepage.
My Navbar:
<section class="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Film</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
</ul>
</div>
</nav>
</section>
My CSS:
body{
text-align: justify !important;
}
#nav-bar{
position: fixed;
left: 0px;
top: 0px;
width: 100px;
}
.navbar-brand img{
height: 40px;
padding-left: 30;
}
.navbar-nav li{
padding: 0 10px;
}
.navbar-nav li a{
float: right;
text-align: left;
}
.nav-bar ul li a:hover{
color: #000000!important;
}
.navbar{
background: #fff;
}
.navbar-toggler{
border: none!important;
}
.nav-link{
color: #555!important;
font-weight: 600;
font-size: 16px;
}
I have tried using the Z-Index method but no luck so far. Maybe I did something wrong?
https://jsfiddle.net/Lqzs1jdw/8/
Thanks in advance.
You have just make a typo, change the # to . will fix the issue
Example:
.nav-bar{
position: fixed;
width: 100%;
}
https://jsfiddle.net/aslamb/sfoavupd/2/
I have a navbar with a logo that resizes as the user scrolls down.
This also resizes the navbar, making it shorter.
How do I get the collapse-button (#nav-btn) to center vertically regardless of the height of the navbar?
<nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">
<button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span id="hamburger-icon"class="navbar-toggler-icon"></span>
</button>
<div class="nav-container text-center">
<a class="navbar-brand" href="#"><img id="navbar-logo" src="Images/logo.png" style="width:150px"></a>
</div>
<div class="collapse navbar-collapse" id="navbarDiv">
<div>
<ul class="navbar-nav mr-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing" >Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
/***** NAVBAR *****/
.navbar {
font-size: 25px;
padding: 5px;
padding-left: 8vw;
background-color: rgba(31, 31, 31, 0.5)
}
.nav-link {
font-weight: 500;
}
#nav-btn {
border: 1px solid white;
}
One way you can do it is give the #nav-btn absolute position.
Since it's inside a relative positioned element, it's gonna be absolute positioned relative to it's parent.
Now you can give it top: calc(50% - <half-of-it's-own-height>);
it'll position your button in 50% of it's parent and reduce half of it's height to fully vertical align it to center.
example for height 20px:
CSS
#nav-btn {
position: absolute;
height: 20px;
top: calc(50% - 10px);
}