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);
}
Related
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%);
}
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;
}
Im trying to get Navigation Link styles like this
In the mobile View active link should be like this =>
For now Using border and border color i got this =>
Respective mobile view
Any solution for get the expected results?
The current code
<nav class="navbar navbar-expand-lg navbar-light ">
<a class="navbar-brand" href="#">
LOGO
</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 justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link " href="#">Home</a>
</li>
<li class="nav-item" >
<a class="nav-link" >Services</a>
</li>
<li class="nav-item" >
<a class="nav-link" >About</a>
</li>
<li class="nav-item" >
<a class="nav-link" >Contact</a>
</li>
</ul>
</div>
</nav>
sass for active link
.navbar-nav > .active a
color: $nav-active-color !important
.navbar-nav > .active
border-top: 3px solid $nav-active-color !important
This would be a good use for the :before or :after psuedo classes, but without having any of your code to go off of I can only offer this vague suggestion.
As well, worth seeing the accepted answer here on a thread about nesting pseudo classes just in case you run into one of the outlined issues.
From there, you could add some keyframes and smooth out the transition to make a pretty seamless hover animation.
div {
width: 350px;
height: 100px;
background: lightgray;
position: relative;
margin: 20px;
}
div:before {
content: '';
width: 60px;
height: 4px;
background: gray;
position: absolute;
top: -4px;
}
<div></div>
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.
I am trying to make a topbar and a sidebar.
This is the code for my top navbar:
<header>
<nav class="navbar navbar-expand-md fixed-top">
<img src="logo.svg" />
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-right ">
<img src="avatar.png">
<li class="nav-item dropdown ">
<a class="nav-link ">Hello</a>
</li>
</ul>
</div>
</nav>
</header>
And then my sidebar :
<div class="container-fluid">
<nav class="col-sm-3 col-md-2 d-none d-sm-block sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item collapsed active" data-toggle="collapse" data-target="#home" >
<a class="nav-link active" href="#"> <img src="homeIcon.png" /> Home <span class="sr-only">(current)</span></a>
</li>
<ul class="sub-menu collapse " id="home">
<li class="nav-item "><a class="nav-link" href="#" > FirstMember</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Second</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Third</a></li>
<li class="nav-item "><a class="nav-link" href="#"> Fourth</a></li>
</ul>
<li class="nav-item">
<a class="nav-link" href="#"><img src="secondElement.png" /> Second Element</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><img src="" /> History</a>
</li>
</ul>
</nav>
<app-home></app-home>
So in app.component.html I am writing my sidebar and navbar, and then is the content.
The issue is that in the topbar.. the where the logo stands, takes the whole row, which then pushes the button and the Hello on the next row.
Only the image inserted is smaller, but when I hover in the a href, it's in the whole row.
How do I fix this ?
And also, every element on the sidebar has an image as an icon, is it better that when the screen gets smaller, the text gets removed and only icons show, or do I make the sidebar appear as a dropdown on the top in smaller screens?
I am using angular5 and bootstrap4.
This is the css :
/* Move down content */
body {
padding-top: 5.5rem;
background-color: #F4F4F4;
}
.navbar {
background-color: #fff;
}
.nav.nav-link a {
color: #;
}
.sidebar {
position: fixed;
top: 69px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 0;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
border-right: 1px solid #eee;
background-color: #
}
.sidebar li{
padding-left: 5px;
}
.sidebar .nav {
margin-bottom: 20px;
}
.sidebar .nav-item {
width: 100%;
}
.sidebar .nav-item+.nav-item {
margin-left: 0;
}
.sidebar .nav-link {
border-radius: 0;
}
.flex-column a {
color: #fff;
}
.dropdown{
font-weight: bold;
color:#;
}
.nav-pills .active{
background-color: ;
font-weight:bold;
}
.nav-pills .nav-link.active {
background-color: ;
color: #1C2058;
}
I am using:
angular/cli: 1.5.0
Angular: 5.0.1
Node:8.9.1
bootstrap: ^4.0.0-alpha.6,
jquery: ^3.2.1,
From your example your anchor isn't using .navbar-brand and instead uses .navbar-left, which if I remember is Bootstrap v3. I can't find navbar-left as a class in v4 documentation:
<a class="navbar-brand" href="#">
<img src="logo.svg" />
</a>
You're also using nav-item for the dropdown, which is also incorrect it should be nav-link dropdown. I would get a new copy of your navbar from the v4 documentation and see if it works when you paste it in.
If it does, but just doesn't work in your application it might be due to ViewEncapsulation so you need to make sure your styles are either globally available (styles.scss) or they are in your navbar components SCSS file (navbar.component.scss or example.component.scss)
All you have left now is to comment out your custom CSS, and paste a fresh copy of the v4 navbar directly from the docs with no changes. That should work immediately. Then slowly start applying the custom changes until it breaks starting with just your branding.