I'm in trouble with a web page that I would like to get with a two column that are full height and a header with a navbar. But I cannot obtain the effect because the columns scroll under the header.
This is my html
<body>
<nav class="navbar navbar-custom navbar-expand-lg fixed-top py-0">
<a class="navbar-brand" href="#">
<img src="~/images/icona-64.png" width="32" height="32" alt="brand">
brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-4" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-4">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="~/images/icona-64.png" width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="appContainer" class="container-fluid d-flex px-0" style="min-height: 100%;">
<div class="dpPanelSx bg-info vh-100">Panel Sx</div>
<div class="dpPanelDx vh-100">Panel Dx</div>
</div>
<footer>
</footer>
</body>
The CSS
body, html {
height: 100%;
}
/* set custom color for the nav bar*/
.navbar-custom {
background-color: #034c67; /*#213B52;*/
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
.dpPanelSx {
flex: 1;
}
.dpPanelDx {
flex: 1;
}
And I added a javascript to force the height of the column to the height of the body
$(document).ready(setupApplication);
function setupApplication() {
// set the containter size
resizeContainer();
// setup eventlistener
$(window).resize(resizeContainer);
}
function resizeContainer() {
var viewH = document.body.clientHeight;
var viewW = $(window).width();
var headHeight = $('nav').height();
console.log('body: ' + document.body.clientHeight);
console.log('window: ' + window.innerHeight);
try {
$('body').css('padding-top', headHeight);
// $('#appContainer').height(viewH - headHeight);
}
catch { }
}
I definitely not able to obtain my desidered effect.
I need a page that is full size height, can you help please?
Thank you
You probably don't need the javascript to achieve it. I have removed fixed-top on your nav.
body,
html {
height: 100%;
}
/* set custom color for the nav bar*/
.navbar-custom {
background-color: #034c67;
/*#213B52;*/
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255, 255, 255, .8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255, 255, 255, .5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
.dpPanelSx {
flex: 1;
}
.dpPanelDx {
flex: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-custom navbar-expand-lg py-0">
<a class="navbar-brand" href="#">
<img src="~/images/icona-64.png" width="32" height="32" alt="brand"> brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-4" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-list-4">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="~/images/icona-64.png" width="40" height="40" class="rounded-circle">
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="appContainer" class="container-fluid d-flex px-0" style="min-height: 100%;">
<div class="dpPanelSx bg-info vh-100">Panel Sx</div>
<div class="dpPanelDx bg-success vh-100">Panel Dx</div>
</div>
<footer>
</footer>
</body>
I made some changes to create 2 columns on your page. You can implement these to your codes.
Changes in HTML:
<div id="appContainer" class="container-fluid d-flex px-0">
<div class="dpPanelSx bg-info vh-50">Panel Sx</div>
<div class="dpPanelDx vh-50">Panel Dx</div>
</div>
Changes in CSS(Colors were added just to see the columns):
.container-fluid {
columns: auto;
columns: 2;
height: 100%;
}
.dpPanelSx {
column-width: auto;
height: 100%;
text-align: center;
background-color: green;
}
.dpPanelDx {
column-width: auto;
height: 100%;
text-align: center;
background-color: blue;
}
Related
Im trying to expand the size of the dropdown menu but most of all im trying to change the background colour, I can only seem to change the colour of the links and the area around the links.
.navbar a {
width: 125px;
text-align: center;
color: rgb(173, 173, 173);
}
.nav-link:hover {
color: rgb(238, 176, 94);
}
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color: aqua;
}
.dropdown-menu>a:hover {
background-image: none;
background-color: rgb(255, 255, 255);
text-align: center;
}
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
My Projects
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Python.html">Python</a>
<a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
<a class="dropdown-item" href="Website.html">Websites</a>
<a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">My Portfolio</a>
</li>
</ul>
</div>
</nav>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
This is the dropdown menu. I want to colour in the white, and expand the size of the dropdown menu. If this is possible, what should I do?
In your code
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
you used this which makes the .dropdown-item background in aqua color. If you only want the rgba(0,0,0,1) which is a white color in your background, you only need to remove the background-color:aqua from here. And to change the size of your dropdown menu, you can use width CSS property.
if you want to change all the background color to aqua
.dropdown-menu .dropdown-item {
text-align: left;
background-color: aqua;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color : aqua;
}
if you want to change all the color to white
.dropdown-menu .dropdown-item {
text-align: left;
background-color: #fff;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
background-color : #fff;
}
For the background color you just need to set the rule for a .dropdown-menu inside a .nav-item
.nav-item .dropdown-menu {
background-color: aqua;
}
This selector is specific enough to override the BS style for .dropdown-menu.
Then expand the .dropdown-items to take up the full width of the .dropdown-menu as follows:
.dropdown-menu .dropdown-item {
/* ... */
width: 100%;
}
.navbar a {
width: 125px;
text-align: center;
color: rgb(173, 173, 173);
}
.nav-link:hover {
color: rgb(238, 176, 94);
}
.nav-item .dropdown-menu {
background-color: aqua;
}
.dropdown-menu .dropdown-item {
text-align: left;
width: 100%;
}
.dropdown-menu a {
color: rgb(48, 58, 78);
}
.dropdown-menu>a:hover {
background-image: none;
background-color: rgb(255, 255, 255);
text-align: center;
}
<!-- Bootstrap-4 + Fontawesome -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c719673ce3.js" crossorigin="anonymous"></script>
<!-- Body -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="Home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
My Projects
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="Python.html">Python</a>
<a class="dropdown-item" href="PixelArt.html">Pixel Art</a>
<a class="dropdown-item" href="Website.html">Websites</a>
<a class="dropdown-item" href="raspi.html">Raspberry Pi</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="Portfolio.html">My Portfolio</a>
</li>
</ul>
</div>
</nav>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
I'm using bootstrap's responsive navbar, in mobile devices it displays a dropdown menu. This menu, be default, is aligned to the left. I changed this so that is displays to the right. I did achieve this. However, when I test on my iPhone (XR), the dropdown first shows on the left and quickly moves to the right, on its own. How can I stop this?
You can see a small video of what's happening here.
/* Navbar */
.navbar-light .navbar-toggler {
color:rgba(46, 46, 46, 1);
border-color: transparent;
}
.navbar-custom {
background-color: #ffffff;
}
.navbar-custom .navbar-brand img {
width: 75%;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(46, 46, 46, 1);
font-size: 0.9em;
text-transform: capitalize;
font-weight: 600;
border-radius: 0;
}
.navbar-light .navbar-nav .nav-link:hover {
color: #DA3D0D;
text-decoration: none;
}
.navbar-custom-dropdown {
border-radius: 0;
}
.navbar-custom-dropdown li a {
font-weight: 600;
line-height: 2em;
font-size: 0.9em;
}
.navbar-custom-dropdown li a:hover,
.navbar-custom-dropdown li a:focus {
background-color: #ffffff;
color: #DA3D0D;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="index.html">
<img src="images/logo-briones-monolithic.svg" alt="Briones Monolithic">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-custom-link" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">INICIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PROYECTOS</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
GRUPO MONOLITHIC
</a>
<ul class="dropdown-menu navbar-custom-dropdown" aria-labelledby="navbarScrollingDropdown">
<li><a class="dropdown-item" href="#">BRIONES MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">BE MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">ELECTRIC MONOLITHIC</a></li>
<li><a class="dropdown-item" href="#">GRUPO MONOLITHIC</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACTO</a>
</li>
</ul>
</div>
</nav>
<!-- /NAVBAR -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
This question already has answers here:
Bootstrap 5 navbar align items right
(13 answers)
How to align nav items to the right in Bootstrap 5?
(7 answers)
Closed 1 year ago.
We are trying to have our navigation items aligned to the right of our page. We have used a container class as well as align-items-end to no avail. We will admit that this section is pretty hacked together and we don't quite understand everything that's going on. What we're trying to accomplish is to have the top of our page have a cover cover image with our navigation to the right, included in the container, we want a heading and two buttons. We also need our navigation collapse at the small (mobile) breakpoint.
This is our design from Photoshop and what we want our end design to look like.
This is what our current code renders.
What are we doing wrong?
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I've applied justify-content-end to the link wrapper.
See all flex utilities.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark d-flex" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="https://via.placeholder.com/60" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
<!-- Nav end -->
</div>
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I added this code to your CSS:
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
to make the navbar position to the right.
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover, .navbar-dark:focus, .navbar-dark:active{
color: rgba(199, 84, 40, 1)
}
.nav-item, .nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover, .nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover, .nav-link:focus, .nav-link:active {
color: #c75428;
}
#responsive-navbar .navbar-nav{
position: absolute !important;
right: 0;
}
<!-- container with bg img -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<button class="btn btn-tosa" type="submit">Free Estimate</button>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<button type="button" class="btn btn-tosa mx-3">Free Estimate</button>
<button type="button" class="btn btn-outline-tosa mx-3">Our Story</button>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->
I'm trying to put a navbar with a navbar-brand to my website. There is a problem, it looks like my picture prevent my nav-items to go on the top of the window. Here is a picture of the problem :
When I remove the navbar-brand, the items are going at the top (you can try it with my code below).
Here is my code :
.logo_1 {
width:9%;
height: auto;
}
.logo_nom {
width: 14%;
height: auto;
}
.nav {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar-custom {
background-color: #fafafc;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #369d4a !important;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
#media (max-width: 1250px) {
.nav-item:hover {
background-color: #5eb56f;
}
}
.dropdown-item {
color : #369d4a !important;
}
.dropdown-item:hover {
background-color: #5eb56f !important;
color: #2b5c35 !important;
}
#media all and (min-width: 992px) {
.nav .nav-item .dropdown-menu{ display: none; }
.nav .nav-item:hover .nav-link{ color: #fff; }
.nav .nav-item:hover .dropdown-menu{ display: block; }
.nav .nav-item .dropdown-menu{ margin-top:0; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<!-- Début navbar -->
<nav class="nav navbar-expand-lg navbar-custom navbar-dark" aria-label="Eighth navbar example">
<div class="container">
<div class="row" style="margin: 0; padding: 0;">
<a class="navbar-brand">
<img src="logo_no_text.png" alt="Logo" class="logo_1 img-responsive">
<img src="nom_commerce.png" alt="Logo" class="logo_nom img-responsive">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto" >
<li class="nav-item">
<a class="nav-link px-3" href="">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Test 4 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Test 4.1</a>
<a class="dropdown-item" href="#">Test 4.2</a>
<a class="dropdown-item" href="#">Test 4.3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 5</a>
</li>
</ul>
</div>
</div></div>
</nav>
<!-- Fin navbar -->
<!-- Script -->
<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>
</body>
</html>
Add a col-6 div outside your logos.
<div class="col-6">
<a>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_1 img-responsive"
/>
<img
src="https://www.logodesign.net/images/illustration-logo.png"
alt="Logo"
class="logo_nom img-responsive"
/>
<button
class="navbar-toggler navbar-toggle btn_small_screen float-right"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo02"
aria-controls="navbarTogglerDemo02"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
</div>
Because there is a margin in the body by default, here is how you fix it:
html, body {
margin:0;
}
Is there a way to get the parent div ".primaryNav", shown in the example with a red background, to include my horizontal dropdown menu in MD to XL views like it does on mobile view?
Currently, I need to add a margin to the .mainNav class to increase the container height so that the background color and drop shadow align with the bottom of the sub nav and the content below it are pushed down. The issue is that when there isn't a sub nav, then the container is too tall and there is a gap.
The goal is to get the .primaryNav div to grow and include the sub nav automatically, pushing down the main content area
#topNav {
letter-spacing: .06rem;
}
#topNav a.nav-link {
padding: 0.05rem 0.5rem;
color: white;
font-weight: 300;
font-size: 0.75rem;
}
#topNav a.nav-link:hover {
text-decoration: underline;
}
#topNav a.nav-link.wpLink {
font-weight: 800;
font-size: .9rem;
}
.primaryNav {
background-color: red;
}
#mainNav .mainSearch .form-control {
border-left: 0;
}
#mainNav .input-group-text {
background-color: white;
border-right: 0;
padding-right: 0;
}
#media (min-width: 576px) {
#mainNav {
font-size: 1rem;
line-height: 1rem;
font-weight: 800;
}
#mainNav .nav-link {
min-height: 65px;
}
}
#media (min-width: 768px) {
#mainNav {
color: #000;
font-weight: 800;
}
#mainNav .nav-link,
#mainNav .nav-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#mainNav,
#mainNav .collapse,
#mainNav .nav-link {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#mainNav .navbar-nav {
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
}
#mainNav .nav-link span {
-ms-flex-item-align: center;
align-self: center;
}
#mainNav .nav-link:active,
#mainNav .nav-link:focus,
#mainNav .nav-link:hover {
color: black;
border-bottom: 3px solid black;
}
#mainNav .active .nav-link {
border-bottom: 3px solid #0075C9;
}
#mainNav .dropdown {
position: static;
}
#mainNav .dropdown-menu {
display: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
border: none;
padding: 0;
margin: 0;
width: 100%;
border-top: 1px solid grey;
background: white;
}
#mainNav .dropdown-menu.in,
#mainNav .active .dropdown-menu,
#mainNav .dropdown:hover .dropdown-menu {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
#mainNav .dropdown-item {
padding: 1rem 2rem;
width: auto;
}
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus,
#mainNav .dropdown-item.active,
#mainNav .dropdown-item:active {
color: #000;
text-decoration: none;
background-color: #F2F2F2;
}
}
#media (min-width: 1200px) {
#mainNav {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>Bootstrap Starter</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- endbuild -->
</head>
<body>
<!-- Top Navigation -->
<div class="container-fluid bg-primary">
<div class="container px-0">
<nav id="topNav" class="navbar navbar-expand navbar-dark text-white px-0 justify-content-lg-end">
<ul class="navbar-nav d-flex ">
<li class="nav-item d-lg-none">
<a class="nav-link wpLink" href="#">Company</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product Registration</a>
</li>
<li class="nav-item d-none d-sm-block">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- Main Navigation -->
<div class="container-fluid primaryNav m-sm-0 mb-sm-3 p-sm-0 border-bottom border-secondary shadow">
<div class="container px-0 mainNav">
<nav id="mainNav" class="navbar navbar-expand-md navbar-light p-0">
<!-- Logo -->
<a class="navbar-brand d-none d-lg-block order-md-first" href="#">
<img class="img-fluid py-2" src="assets/img/waterpik-shower-heads-logo.png">
</a>
<!-- Search Bar -->
<form class="form-inline order-md-last m-0 my-2 my-md-0 flex-grow-1 flex-lg-grow-0">
<div class="input-group mainSearch w-100">
<div class="input-group-prepend">
<span class="input-group-text"></span>
</div>
<input class="form-control form-control-sm" type="text" placeholder="Search" aria-label="Search">
</div>
</form>
<!-- Toggler -->
<button class="navbar-toggler align-self-center" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navigation -->
<div class="collapse navbar-collapse mx-lg-5" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Home</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item" href="#">Hand Held</a>
<a class="dropdown-item" href="#">Fixed Mount</a>
<a class="dropdown-item" href="#">Dual Head</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>Shop Products 2</span>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1">
<a class="dropdown-item d-md-none" href="#">Shop All</a>
<a class="dropdown-item " href="#">Hand Held 2</a>
<a class="dropdown-item" href="#">Fixed Mount 2</a>
<a class="dropdown-item" href="#">Dual Head 2</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Main Content -->
<main role="main" class="container">
<div class="jumbotron text-center">
<img src="assets/img/logo.png"/>
<h1>Bootstrap 4 Starter Template</h1>
<p class="lead">This example is a quick bootstrap starter template.</p>
<a class="btn btn-lg btn-test" href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" role="button" target="_blank">View Bootstrap 4.1 Docs <i class="fad fa-acorn"></i></a>
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
If you want your horizontal menu to be collapsed in MD to XL breakpoints as it is in mobile, you can use .navbar-expand-* class.
So, replace navbar-expand-md with navbar-expand-xl in #mainNav element.
<nav id="mainNav" class="navbar navbar-expand-xl navbar-light p-0">
Have you tried
<nav id="topNav" class="navbar navbar-expand-xs navbar-dark text-white px-0 justify-content-lg-end">
That should work too keep the burger menu, is that what you are trying to achieve? I could not find the div with a primaryNav class.