Central logo that overlaps navbar bootstrap [duplicate] - html

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%;
}

Related

Opaque NavBar Overlapping H1 and content

Ok so figured out the first problem.... now my navbar brand isn't expanding. It seems to be stuck at one size and its added a scroll bar to accommodate. How to I get the whole navbar to move over for the brand?
.navbar {
position: relative;
display:inline-block;
overflow: auto;
background: #f4f4f4;
opacity: .6;
width: 100%;
padding: 5px 8px;
z-index: 9999;}
.navbar-brand {
color:black;
font-weight: bold;
font-size: 300%;}
.navbar a {
float: left;
display: block;
text-align: center;
overflow: auto;
padding: 5px 8px;}
.navbar a:hover{
background-color:#ede2d4;}
<nav class="navbar navbar-expand-lg navbar-light fixed-top justify-content-between">
<div class="container-fluid">
<a class="navbar-brand" href="#">Hello</a>
<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 mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item">
<a class="nav-link" href="facts.html">Facts</a></li>
<li class="nav-item">
<a class="nav-link" href="chart.html">Chart</a></li>
<li class="nav-item">
<a class="nav-link" href="video.html">Video</a></li>
<li class="nav-item">
<a class="nav-link" href="jokes.html">Jokes</a></li>
</ul>
<div>
<form class="navbar-form navbar-left form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
<h1>Testing Page </h1>
It could easily be because you have fixed-top on the first line of your <nav>. That is absolutely fine but the very next item beneath the Nav ... Which is your <h1>... That might now need margin-top the same height in pixels as the navbar (even a few more pixels wouldn't hurt).
Do you see what's happening? fixed-top is letting the content flood underneath the navbar, adding margin to the top of <h1> will bring it all back down the page a little.
<h1 style="margin-top:50px">Testing Page</h1>
Alternatively add margin-bottom to the Navbar.
There also seems to be a stray </header> closing tag immediately after the Nav

I'm trying to fix my logo in the center of the navbar

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%);
}

Bootstrap custom file input bugs on navbar overflow

I coded a navbar which is fixed-top.
When I scroll, if there is body content passing through it, it must be hidden.
It works, but when I use the bootstrap custom class for files fields, there is a bug. The file field is not hidden when it overlaps the navbar.
I reproduced the problem here:
html
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!-- Bootstrap custom file input -->
<div class="container">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
css
html, body{
padding-top: 30px;
}
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.navbar .bg-primary{
border: 1px solid black;
}
And the demo : https://jsfiddle.net/kiuega/u3z8be4c/3/
Do you know what the problem is?
EDIT: I just noticed that the same thing happened when we use FullCalendar (https://fullcalendar.io/docs), it's the same thing!
Change the Navbar "z-index" to 2 or more.. its better to make the z-index to 9999 (Extreme Value) that means it always top the top of the content..
otherwise if there is any other div or section that have greater z-index than the navbar then that div or section overlape the navbar..
.navbar {
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}

Twitter bootstrap padding not working

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.

Vertically centering navbar-collapse button

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);
}