I am using Bootstrap Beta 4 and I found that nav overlaps my column div, what I might have done wrong here?
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
if you remove the class fixed-top from your nav element it will stop the overlap.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light"><!--Removed fixed-top-->
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
Alternatively you could add some css to override the positioning of the nav element. (This way you don't have to remove the fixed-top class from your nav)
<style>
.fixed-top{
position:relative
}
</style>
Hope this helps :-)
Related
Here I given d-flex and justify-content-between class in the parent tag of a and div . but I cannot understand why its not working here..
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse" id="navbarScroll">
<h1>Right</h2>
</div>
</div>
</nav>
so with your supplied code, you just need to add justify-content: flex-end to the .navbar-collapse section.
To complete your provided code sample, you would just add the bootstrap class justify-content-end to the right hand second, shown below
<div class="container d-flex justify-content-between">
<a class="navbar-brand" href="#">
<img width="100%" height="50" src="icons/Logo.png">
</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
<h1>Right</h1>
</div>
</div>
Shown in this codepen
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 4 years ago.
I am working with the Bootstrap 4 default navbar and I just want to add a collapsing menu that is positioned on the right, not the left, when not collapsed.
I have tried adding text-right and float-right, but neither are actually moving the menu to the right.
Here is a bootply showing the issue.
Here also is a snippet, since StackOverflow wants me to use one, though I don't think it'll be wide enough to show the non-collapsed menu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse float-right">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
Add ml-auto class to ul tag containing menu
<ul class="nav navbar-nav ml-auto">
<li class="active nav-item">
Homes
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
The element .collapse.navbar-collapse requires .justify-content-end class as it is positioned with flex (display: flex) and takes full remaining width of your navbar.
The other answers with .ml-auto are perfectly valid. The difference between these two is that .justify-content-end will make all elements inside navbar-collapse stick to the right, whereas .ml-auto will only do the same for the ones inserted after your ul.nav.nav-bar, so the ones on the left can still stick to the left. You can choose the one most appropriate to you, and feel free to combine these two for more sophisticated layouts.
Your updated Boolply can be found here.
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse justify-content-end">
<ul class="nav navbar-nav">
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
add .navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;} in your style sheet. thanks
.navbar-expand-md .navbar-collapse{
flex-direction: column-reverse;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" ></script>
<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-md">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav ml-auto"> <!-- here -->
<li class="active nav-item">Home
</li>
<li class="nav-item">About
</li>
<li class="nav-item">Contact
</li>
</ul>
</div>
</div>
</div>
I'm new to flex, and my boss wants me to use only flexbox for this! the problem is I am trying to get the nav menu to show in it's own row, but it keeps wrapping to be right next to the search icon, etc. I have it in it's own row in the code, so I don't know why it's appearing side by side
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="d-flex flex-row w-100">
<div class="flex-column">
company logo here
</div>
<div class="flex-column">
<a class="navbar-brand" href="#">
company name here
</a>
</div>
<div class="flex-column justify-content-end">
search icon here
</div>
<div class="flex-column justify-content-end">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="d-flex flex-row w-100">
<div class="flex-column justify-content-start">
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
You just need to add a CSS rule :
.navbar-expand-lg > .container {
flex-wrap:wrap
}
Fiddle
I assume that you mean that the button of the menu keeps appearing next to the search icon. That's because the button is in the same row as the search icon. You are right that the menu itself is in its own row, but the button is not.
I'd like to achieve the following result:
Requirements:
Image should be responsive
Fixed-top navbar has to stay
No vertical scrolling
Footer has to stay, too (preferably on the bottom)
I spent the whole day trying to figure out it without results.
I tried this approach:
https://codepen.io/Codewife_101/pen/rpvdPq
but 'align-self-center' caused the vertical scrolling in my website.
It doesn't look good, in particular on mobile devices.
I VERSION:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Red Logo Website</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
<!--Material Design Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!--adding Roboto different styles-->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-self-center">
<img src="img/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2017 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I also tried this approach:
https://codepen.io/Codewife_101/pen/eyVxre
II VERSION:
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<img src="https://s3-us-west-1.amazonaws.com/all-images-public/red_logo.svg" class="img-fluid" alt="Red logo">
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo"> RedDesign LLC</p>
</div>
</div>
</footer>
It doesn't center vertically. I'm open to any suggestions/solutions.
Anyone? I would be very grateful for any tips.
At first glance, my question looks like a duplicate, but when you look deeper, you'll see my situation varies. Besides, my reputation is too low to write comments on somebody else's question.
use CSS
css property position:fixed then
your header
div id = "NAVBAR"
and your footer too
div id = "FOOTER"
In your css:
#NAVBAR{
bottom:0
}
#FOOTER{
top:0
}
you must set the height off the body accoding to you screen resolution for you to not have an scrolling effect.
Please try this, it revolves around dynamic height thanks to calc and vh(viewport height)
nav, footer{
max-height: 50px;
}
body,html, section{
height: 100%;
}
section{
display: flex !important;
justify-content: center;
align-items: center;
}
section img{
object-fit: contain;
height: calc(100vh - 150px) !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default navbar-fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
<ul class="navbar-nav nav">
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
</ul>
</nav>
<section>
<img src="http://www.tandemconstruction.com/sites/default/files/styles/project_slider_main/public/images/project-images/IMG-Residence-1_0.jpg" alt="" class="img-fluid">
</section>
<footer class="navbar navbar-default navbar-fixed-bottom text-center">
<p class="text-muted navbar-brand">Copyright © 2018 RedDesign LLC</p>
</footer>
I fixed your code. Below is the working version.
The problem was a simple beginner mistake: You had the image in a row but not in a column. Bootstrap rows and columns are designed to work together. So, whenever you create a .row you must create at least one .col inside that row. That usually fixes all of the problems.
Here's the working version of your code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
<div class="container">
<img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="red-logo">
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav2"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav2">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link font-weight-bold" href="">Brand Name</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 1. JUMBOTRON -->
<section id="showcase">
<div class="container" style="height: 100vh;">
<div class="row h-100">
<div class="col align-self-center">
<img src="https://picsum.photos/440/" class="img-fluid mx-auto d-block">
</div>
</div>
</div>
</section>
<!--FOOTER-->
<footer id="main-footer" class="text-center fixed-bottom">
<div class="container">
<div class="row">
<div class="col">
<p class="text-muted">Copyright © 2018 <img src="img/navbar_red_logo.32x32.png" class="img-fluid" alt="logo"> RedDesign LLC</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
.sub-navbar {
background-color: #002b31;
height:57px;
font-size: 13px;
margin-top: 175px;
}
This is my CSS file ,
And this is my HTML file
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav ">
<div *ngIf="nav.link == currentLink">
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
Here is what it looks like the sub menu because menu is okay / Photo
i found a solution :D - weekend
<div class="container-fluid ">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav " *ngIf="nav.link == currentLink">
<!--<div *ngIf="nav.link == currentLink" >-->
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
<!--</div>-->
</ul>
</div>
</nav>
</div>
the problem was in the tag with the ngIf