Profile hover is not working properly.
same this is working on the other page but not on the home page I have a share code snippet to check.
and if I remove the bootstrap carousel then the same code is working perfectly.
I have attached code with bootstrap carousel so you can check by removing that.
not working URL : https://pcbmagic.com/
working URL : https://pcbmagic.com/member/dashboard/cart.php
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pcbmagic.com/assets/style.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="bg-light">
<div class="row pl-4 pr-4 pt-2 pb-2" style="align-items: center; box-shadow: 1px 0.5px 9px 0px rgb(188 193 192);">
<div class="col-md-2" style="align-self: center;">
<img src="https://pcbmagic.com/logo_s.png" style="height:75px;">
</div>
<div class="col-md-7">
<nav class="navbar navbar-light navbar-expand-md nav-bg-custom main-menu-bar">
<!-- Brand -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="/"><!--<i class="fas fa-home"></i> -->Home</a>
</li>
<!--<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-calculator"></i> Instant Quote
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="pcb-order.php"><i class="fas fa-microchip"></i> PCB Laout</a>
<a class="dropdown-item" href="pcb-fabrication.php"><i class="fas fa-microchip"></i> PCB FABRICATION</a>
<a class="dropdown-item" href="#"><i class="fas fa-microchip"></i> PCB ASSEMBLY</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="stencil.php"><i class="fas fa-microchip"></i> STENCIL FABRICATION</a>
</div>
</li>-->
<li class="nav-item active">
<a class="nav-link" href="https://pcbmagic.com/pcb-quote.php"><!--<i class="fas fa-puzzle-piece"></i> -->PCB Assembly</a>
</li>
<!--<li class="nav-item active">-->
<!-- <a class="nav-link" href="/about-us.php">About us</a>-->
<!--</li>-->
<li class="nav-item active">
<a class="nav-link" href="/contact.php"><!--<i class="fas fa-address-book"></i>--> Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-3 pr-3" style="align-self: center;">
<div class="float-right header-op">
<a href="https://pcbmagic.com/member/dashboard/cart.php" class="btn btn-sm cart-a" style="z-index: 999999;color: white !important;margin-bottom: 5px;"><img src="https://pcbmagic.com/assets/img/cart.png" class="cart">
<span class="cart-number" id="cart_count">
2 </span>
</a>
<div class="dropdown-log">
<span>Hi,Vishal<i class="pl-2 fas fa-chevron-down"></i></span>
<div class="dropdown-log-content">
<div class="bg-dark py-2 mb-2">
<div class="p-img">
</div>
<h6 class="text-center text-light">Vishal Vishwakarma</h6>
<p class="text-center text-light" style="font-size:12px;">webadmin#championsemi.com</p>
</div>
<p>Dashboard</p>
<p>My Order</p>
<p>Production Status</p>
<p>Help Center</p>
<p>Logout</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
</ol>
<div class="carousel-inner" style="border: 1px solid #dedede;">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/s1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/t2.png" alt="Second slide">
</div>
<!--<div class="carousel-item">
<img class="d-block w-100" src="https://pcbwayfile.s3-us-west-2.amazonaws.com/banner/21/03/25/1808173691783t.jpg" alt="Third slide">
</div>-->
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
</body>
</html>
<style>
#media screen and (max-width: 767px) {
.mobile-space {margin-top:35px;}
.carousel-inner img {height: 135px;}
.dropdown-log-content{z-index:999999;}
}
</style>
<section class="pt-5 ft-text-link" style="background:#1b1b1b;color:white;font-size:14px;box-shadow: 0px -3px 2px #1b1b1b;">
<div class="container-fluid pl-5 pr-5">
<div class="row">
<div class="col-md-3">
<h6>Business</h6>
<ul class="ft-list">
<li class="">Electronics / Semiconductors</li>
<li class="">Industrial Design Services</li>
<li class="">PCB/PCB-A</li>
<li class="">Display and Signage Systems</li>
<li class="">IoT Solutions</li>
<li class="">Medical Electronics</li>
</ul>
</div>
<div class="col-md-3">
<h6>Important Links</h6>
<ul class="ft-list">
<li class="">Careers # ChampionSemi</li>
<li class="">Ecosystem</li>
<li class="">For Investors</li>
<li class="">Legals</li>
<li class="">Contact us</li>
</ul>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3 newsletter">
<p class="text-center">Would you like to know what’s happening at the forefront of semiconductor and electronics at ChampionSemi? Sign up and receive the latest updates.</p>
<div class="mt-2" style="height:36px;">
<center><input class="m-width-100 m-mb-5 w-50" type="text" name="">
<a href="#" class="btn btn-o btn-sm m-width-100 w-50" style="font-size: 12px;
padding: 4px !important;">Subscribe Now</a></center>
</div>
</div>
</div>
<div class="row mobile-space">
<div class="col-md-3">
<p class="mb-1">Payment Methods</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/payment-mode.png">
</div>
<div class="col-md-3">
<p class="mb-1">Delivery Services</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/delivery-mode.png">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="container-fluid pl-4 pb-2 pr-4">
<hr style="background:#ffffff21;width:100% !important;margin-top: 10px;">
<div class="row">
<div class="col-md-6">
<!--<center class="m-display" style="display:none;"><img class="m-display-block" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;"></center> -->
<p class="pl-1 m-text-center"><!--<img class="m-hide" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;">--> PCBMagic © 2021 | Champion Semiconductor LLP | Terms of use | Privacy Policy </p>
</div>
<div class="col-md-6 ft-fa text-right follow-ft">
<p class="m-text-center">Follow us
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</p>
</div>
</div>
</div>
</section>
you have to add z-index property to your .dropdown-log-content class. as below
.dropdown-log-content
{
z-index: 9999999 !important;
}
Related
For some reason Angulars is saying me that the close tags are wrong, and my page is now running for that errors, but I don't understand why, the close tags are fine I check tab for tab all the tags have one open tab and one close tags, I'm gone leave my code.
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button" >
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
Ok this tags is what angular is saying me that I need to remove, it is with the last code block.
</li>
</ul>
</div>
</div>
</nav>
I closed the tags, but you have divs inside the links) replace with span, it will be more correct and set display:block in css
I recommend not using divs inside links! Replace with span.
see also
HTML:
<div class="container-fluid">
<h6 class="h2 text-white d-inline-block mb-0 mr-4">Mi perfil</h6>
<!-- Search form -->
<!-- Navbar links -->
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<!-- Sidenav toggler -->
<div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="http://seth.com/dashboard" role="button">
<i class="fas fa-arrow-alt-circle-left"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- Signo pregunta -->
<i class="far fa-question-circle"></i>
</a>
<!-- Signo pregunta contenido-->
<div class="dropdown-menu dropdown-menu-m dropdown-menu-right py-0 overflow-hidden">
<!-- Dropdown header -->
<!-- List group -->
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Guía de inicio</p>
</div>
</div>
</a>
<!-- Tarea -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Políticas Privacidad</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Contactar asistencia</p>
</div>
</div>
</a>
<!-- Element group -->
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<!-- Icono + -->
</div>
<div class="col ml--2">
<p class="text-sm mb-0">Videocapacitaciones</p>
</div>
</div>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="../assets/img/theme/foto.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Hola </h6>
</div>
<a href="/vistas/profile" class="dropdown-item">
<i class="ni ni-single-02"></i>
<span>Ajustes de mi perfil</span>
</a>
<a href="../admin.php" class="dropdown-item">
<i class="ni ni-settings-gear-65"></i>
<span>Consola de administrador</span>
</a>
<div class="dropdown-divider"></div>
<a href="./seth/Plugins/login/php/logout.php" class="dropdown-item">
<i class="ni ni-user-run"></i>
<span>Cerrar sesión</span>
</a>
</div>
</li>
</ul>
</div>
Situation:
At the top I have a navbar and then a carousel.
navbar code
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand order-0 nav-link" href="#">DASA</a>
<div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link menWomenKidsHeading" href="#">MEN <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link menWomenKidsHeading" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link menWomenKidsHeading" href="#">KIDS</a>
</li>
</ul>
</div>
<a class="nav-link" href="#"><i class="fas fa-search "></i></a>
<a class="nav-link" href="#"><i class="fas fa-user "></i></a>
<a class="nav-link" href="#"><i class="fas fa-shopping-bag "></i></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="">
<i class="fas fa-bars hamburger"></i>
</span>
</button>
</nav>
Carousel code
<div id="carouselExampleCaptions1" class="carousel slide like" data-ride="carousel like">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<!-- first item RED ANCHARA -->
<div class="carousel-item active">
<div class="firstBanner" style="background-image: url(images/IMG_2124.JPG);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">
ANCHARA WITH RED BOUTIQUE
</h4>
<button type="button" name="button" class="carousel-button">
SHOP ANCHARA
</button>
</div>
</div>
<!-- second item KIDS -->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/group.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">ANCHARA FOR KIDS</h4>
<button type="button" name="button" class="carousel-button">
SHOP KIDS
</button>
</div>
</div>
<!-- third item MULTI-COLOR ANCHARA-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/anchara1.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">MULTI-COLOR ANCHARA</h4>
<button type="button" name="button" class="carousel-button">
SHOP WOMEN
</button>
</div>
</div>
<!-- fourth item dHOTI-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/hrithik.JPG);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">MARRIAGE DHOTI</h4>
<button type="button" name="button" class="carousel-button">
SHOP DHOTI
</button>
</div>
</div>
<!-- fifth item CUSTOMIZE YOUR CLOTHES-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/20190910_120902.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">STYLE YOUR CLOTHES</h4>
<button type="button" name="button" class="carousel-button">
CUSTOMIZE NOW
</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I want:
A hidden div above the carousel and when a user hover over the navbar, it should appear above the carousel with colored div.
How can I achieve this using html, css and jq? but feel free to give any suggestion.
Please refer to this code ply code.
https://www.codeply.com/p/Mqp1NSjuMz
From the sounds of it, your carousel is directly after the nav. If this is the case, you can just use an adjacent sibling selector in css, no need for js:
.hidden {
display: none;
background: blue;
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.carousel {
position: relative;
}
.nav:hover+.carousel .hidden {
display: block;
}
<div class="nav">nav bar</div>
<div class="carousel">
<div class="hidden">hidden div</div>carousel
</div>
You can make this with jQuery. The following has a div this currently hides, but makes it appear as soon the user's mouse hovers over the .navbar.
$(".navbar").hover(
function() {
$("#colored-div").show();
},
function() {
$("#colored-div").hide();
}
);
#colored-div {
width: 100%;
height: 10px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--**navbar code**-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand order-0 nav-link" href="#">DASA</a>
<div class="collapse navbar-collapse text-right order-lg-0 order-last" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link menWomenKidsHeading" href="#">MEN <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link menWomenKidsHeading" href="#">WOMEN</a>
</li>
<li class="nav-item">
<a class="nav-link menWomenKidsHeading" href="#">KIDS</a>
</li>
</ul>
</div>
<a class="nav-link" href="#"><i class="fas fa-search "></i></a>
<a class="nav-link" href="#"><i class="fas fa-user "></i></a>
<a class="nav-link" href="#"><i class="fas fa-shopping-bag "></i></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="">
<i class="fas fa-bars hamburger"></i>
</span>
</button>
</nav>
<!--**colored div**-->
<div id="colored-div"></div>
<!--**Carousel code**-->
<div id="carouselExampleCaptions1" class="carousel slide like" data-ride="carousel like">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions1" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<!-- first item RED ANCHARA -->
<div class="carousel-item active">
<div class="firstBanner" style="background-image: url(images/IMG_2124.JPG);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">
ANCHARA WITH RED BOUTIQUE
</h4>
<button type="button" name="button" class="carousel-button">
SHOP ANCHARA
</button>
</div>
</div>
<!-- second item KIDS -->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/group.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">ANCHARA FOR KIDS</h4>
<button type="button" name="button" class="carousel-button">
SHOP KIDS
</button>
</div>
</div>
<!-- third item MULTI-COLOR ANCHARA-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/anchara1.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">MULTI-COLOR ANCHARA</h4>
<button type="button" name="button" class="carousel-button">
SHOP WOMEN
</button>
</div>
</div>
<!-- fourth item dHOTI-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/hrithik.JPG);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">MARRIAGE DHOTI</h4>
<button type="button" name="button" class="carousel-button">
SHOP DHOTI
</button>
</div>
</div>
<!-- fifth item CUSTOMIZE YOUR CLOTHES-->
<div class="carousel-item">
<div class="firstBanner" style="background-image: url(images/20190910_120902.jpg);"></div>
<div class="carousel-caption d-block">
<h4 class="headingClothShortDescription">STYLE YOUR CLOTHES</h4>
<button type="button" name="button" class="carousel-button">
CUSTOMIZE NOW
</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions1" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions1" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am new to HTML and CSS.
I want to do a Single Web Page with Navbar and Image Slider.
What I have done is:
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x201" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 1</h3>
<p>Image 1 Image 1</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x202" alt="Image 2" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 2</h3>
<p>Image 2 Image 2</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="carousel-inner">
<div class="item active">
<img src="https://source.unsplash.com/random/300x204" alt="Image 4" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 4</h3>
<p>Image 4 Image 4</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/300x205" alt="Image 5" style="width:640px; height:280px;">
<div class="carousel-caption">
<h3>Image 5</h3>
<p>Image 5 Image 5</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
This is what I have done for Image Slider. It shows two images when the web page opens. But for next slide it shows only one image. I need two images for all slides(2).
All should be done only by HTML and CSS not JS or others.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<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>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg"
height="600px"
class="d-block w-100" alt="...">
</div>
<div class="col-md-6 col-sm-6" style="padding: 0">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
Since you are using bootstrap, I will add an HTML code for Navbar and Slider using Bootstrap components.
It is better to use Bootstrap since it is very easy to create awesome responsive HTML components using Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<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>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
.
Hope #Pramodya fix your rendering issue in the previous answer. I changed his answer a little to display 2 images in 1 slide.
If you want to display 2 images in 1 slide, You need to use flex layout.
--------------------Display: flex-----------------------
| | |
| flex: 1 | flex: 1 |
| | |
--------------------------------------------------------
Checkout this snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<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>
</nav>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://cssslider.com/sliders/demo-17/data1/images/picjumbo.com_hanv9909.jpg" height="600px" class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
<div style='flex:1'>
<img src="http://wowslider.com/sliders/demo-77/data1/images/road220058.jpg" height="600px"
class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div style='display:flex'>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
<div style='flex:1'>
<img src="https://slidervilla.com/smooth-slider/files/2014/05/3.jpg" height="600px" class="d-block w-100"
alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
I have recently gotten a bootstrap 4 theme. I have been changing some files to work with flask. However I'm not able to figure out why my "main-container" div is falling below the nav bar when I change the page size to a more full size desktop browser size?
In the original bootstrap file the index.html file had the nav bar and page content on a single page. For flask I have moved most of this between three files layout.html, index.html and _navbar.html
I would like this to be on the right side of the nav bar when this is stretched to full desktop size but im not able to figure out what to change.
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pipeline Project Management Bootstrap Theme</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A project management Bootstrap theme by Medium Rare">
<link href="static/img/favicon.ico" rel="icon" type="image/x-icon">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gothic+A1" rel="stylesheet">
<link href="static/css/theme.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
{%include 'includes/_navbar.html'%}
{%block body%}
{%endblock%}
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/autosize.min.js"></script>
<script type="text/javascript" src="static/js/popper.min.js"></script>
<script type="text/javascript" src="static/js/prism.js"></script>
<script type="text/javascript" src="static/js/draggable.bundle.legacy.js"></script>
<script type="text/javascript" src="static/js/swap-animation.js"></script>
<script type="text/javascript" src="static/js/dropzone.min.js"></script>
<script type="text/javascript" src="static/js/list.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.js"></script>
<script type="text/javascript" src="static/js/theme.js"></script>
</body>
<footer>
<p><center><small><small>© ME | ©ME </small></small></center></p>
</footer>
</html>
index.html
{%extends 'layout.html'%}
{%block body%}
<div class="main-container">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-11 col-xl-9">
<section class="py-4 py-lg-5">
<div class="mb-3 d-flex">
<img alt="Pipeline" src="static/img/logo-color.svg" class="avatar avatar-lg mr-1" />
<div>
<span class="badge badge-success">1.0</span>
</div>
</div>
<h1 class="display-4 mb-3">Headline</h1>
<p class="lead">
Headline text
</p>
<div class="d-flex">
<div class="dropdown mr-3">
Explore Pages
<div class="dropdown-menu">
<a class="dropdown-item" href="pages-app.html">App Pages</a>
<a class="dropdown-item" href="pages-utility.html">Utility Pages</a>
</div>
</div>
<div class="dropdown">
View Components
<div class="dropdown-menu">
<a class="dropdown-item" href="components-bootstrap.html">Bootstrap Components</a>
<a class="dropdown-item" href="components-pipeline.html">Pipeline Components</a>
</div>
</div>
</div>
</section>
<section class="py-4 py-lg-5">
<div class="carousel slide carousel-fade mb-5" data-ride="carousel">
<div class="carousel-inner overflow-visible">
<div class="carousel-item shadow-lg active">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-team.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-project.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-task.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-kanban-board.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-chat.png" class="img-fluid rounded border" />
</a>
</div>
<div class="carousel-item shadow-lg ">
<a href="pages-app.html">
<img alt="Image" src="static/img/overview/nav-side-user.png" class="img-fluid rounded border" />
</a>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-3">
<i class="material-icons text-primary mr-3 h1">supervised_user_circle</i>
<h2 class="h1 mb-0">Project Management Pages</h2>
</div>
<p class="lead">
Pipeline makes building project management interfaces simple with pages for teams, projects, tasks, kanban boards and more.
</p>
App PagesUtility Pages
</section>
</div>
</div>
</div>
</div>
{%endblock%}
_navbar.html
[![<div class="layout layout-nav-side">
<div class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
<a class="navbar-brand" href="index.html">
<img alt="Pipeline" src="static/img/logo.svg" />
</a>
<div class="d-flex align-items-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-block d-lg-none ml-2">
<div class="dropdown">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu dropdown-menu-right">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
<div class="collapse navbar-collapse flex-column" id="navbar-collapse">
<ul class="navbar-nav d-lg-block">
<li class="nav-item">
<a class="nav-link" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-2" aria-controls="submenu-2">Pages</a>
<div id="submenu-2" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="pages-app.html">App Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-3" aria-controls="submenu-3">Components</a>
<div id="submenu-3" class="collapse">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="components-bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="components-pipeline.html">Pipeline</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/index.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation/changelog.html">Changelog</a>
</li>
</ul>
<hr>
<div class="d-none d-lg-block w-100">
<span class="text-small text-muted">Quick Links</span>
<ul class="nav nav-small flex-column mt-2">
<li class="nav-item">
Team Overview
</li>
<li class="nav-item">
Project
</li>
<li class="nav-item">
Single Task
</li>
<li class="nav-item">
Kanban Board
</li>
</ul>
<hr>
</div>
<div>
<form>
<div class="input-group input-group-dark input-group-round">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="material-icons">search</i>
</span>
</div>
<input type="search" class="form-control form-control-dark" placeholder="Search" aria-label="Search app" aria-describedby="search-app">
</div>
</form>
<div class="dropdown mt-2">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" id="newContentButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Add New
</button>
<div class="dropdown-menu" aria-labelledby="newContentButton">
<a class="dropdown-item" href="#">Team</a>
<a class="dropdown-item" href="#">Project</a>
<a class="dropdown-item" href="#">Task</a>
</div>
</div>
</div>
</div>
<div class="d-none d-lg-block">
<div class="dropup">
<a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img alt="Image" src="static/img/avatar-male-4.jpg" class="avatar" />
</a>
<div class="dropdown-menu">
Profile
Account Settings
Log Out
</div>
</div>
</div>
</div>
</div>
Divs by default have display: block which makes them positioned on top of one another.
In order to position them properly you could either:
Wrap them in a container div and use flexbox for positioning (Bootstrap row and columns),
Use floats (Bootstrap float classes)
Below is an example of using floats to position divs.
.container {
width: 500px;
}
.nav {
float: left;
width: 30%;
height: 200px;
background-color: red;
}
.content {
float: left;
width: 70%;
height: 200px;
background-color: blue;
}
.clear {
clear: both;
}
<div class="container">
<div class="nav">
</div>
<div class="content">
</div>
<div class="clear">
</div>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to make it so that when I scroll down a page, my navbar is fixed at the top, I have tried so many different things and I'm not sure what I am doing wrong. Please see my code below for the nav.
.navbar {
padding: .8rem;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
.navbar {
padding: .8rem;
}
.navbar-nav li {
padding-right: 25px;
}
.nav-link {
font-size: 1.1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div style="height: 5000px; background-color: red; width: 500px;"></div>
The navbar can have the class .sticky-top added to it in order to easily fix it to the top of the page. Support for this is widespread, with the exclusion of Internet Explorer. As an alternative, fixed-top can be used, but this may cause some overlapping issues if not supplemented by additional CSS.
A solid red div element has been included in order to make the page large enough to scroll through.
I have now developed the following issue, here is my full HTML.
When i scroll i seem to be losing the toolbar when it reaches a certain point in the document?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Unique Portraits</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="50">
<!--Navigation-->
<nav class="navbar sticky-top navbar-expand-md navbar-light bg-light navbar-fixed-top" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav nav-pills ml-auto">
<li class=nav-item active>
<a class="nav-link" href="#home">Home</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#gallery">Gallery</a>
</li>
</li>
<li class=nav-item>
<a class="nav-link" href="#aboutme">About</a>
</li>
<li class=nav-item>
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Image SLider & Indicators -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" id="home">
<div class="carousel-item active">
<img src="img/warm.jpg" >
</div>
<div class="carousel-item">
<img src="img/landscape2.jpg">
</div>
<div class="carousel-item">
<img src="img/river.jpeg">
</div>
</div>
<div class="carousel-caption">
<h1 class="display-2">ALIAS PHOTOGRAPHY</h1>
<h3>My Journey Through Nature...</h3>
<div class="showcase-buttons">
<!-- <button type="button" class="btn btn-outline-light btn-lg mr-1">VIEW DEMO</button> -->
<button type="button" class="btn btn-primary btn-lg">VIEW GALLERY</button>
</div>
</div>
<!-- Arrows -->
<a class="carousel-control-prev" href="#slides" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next btn-lg" href="#slides" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Jumbotron -->
<div class="container-fluid">
<div class="row jumbotron">
<div class="col-12 text-center">
<p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </p>
<button type="button" class="btn btn-outline-secondary btn-lg text-center">Find out more</button>
</div>
</div>
</div>
<!-- Gallery -->
<div class="container gallery" id="gallery">
<div class="row">
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
</div>
<div class="row">
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
<div class="col-md-3 " id="cols">
<img src="img/yellow.jpeg" class="img-fluid rounded">
</div>
</div>
</div>
<!-- About -->
<div class="container-fluid about" id="aboutme">
<div class=row padding>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-9 col-xl-9 text-light text-center ">
<h2 class="display-3 mt-4">A bit about me</h2>
<p class="lead ml-5 mr-5">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has</p>
<button type="button" class="btn btn-outline-primary btn-lg m-1 mb-4">Why not get in touch?</button>
<br>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 col-xl-3 aboutimg">
<img src="img/landscapeold.jpeg">
</div>
</div>
</div>
<!-- Connect -->
<div class="container-fluid">
<div class="row jumbotron text-center m-0">
<div class="col-12">
<h2 class="display-3">Connect</h1>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container-fluid padding text-center" id="contact">
<div class="row text-light pt-4">
<div class="col-6 addresscol">
<hr class="light">
<div>
<p><i class="fa fa-envelope mr-3 mt-3 icon offset-4"></i>email#emaildomain.com </p>
<p><i class="fa fa-phone mr-3 icon offset-4"></i>+12 34567 891</p>
<p><i class="fa fa-map-marker mr-4 icon offset-4"></i>123 Same Street</p>
<div>
<p><i class="offset-4 mr-5"></i>County</p>
<p><i class="offset-4 mr-5"></i>Town</p>
<p class="pml"><i class="offset-4 mr-5 mb-1"></i>Postcode</p>
</div>
</div>
<button type="button" class="btn btn-outline-light btn-lg mt-4 offset-">Download Résumé</button>
</div>
<!-- Start of Form -->
<div class="col-6">
<h2 class="pb-3 align-centre display-4"><i class="fas fa-envelope mr-2"></i>
Drop a Line
</h2>
<div>
<h4 class="display-5 formpadding">
Dont hesitate to get in touch
</h4>
</div>
<div data-form-type="form">
<div class="row">
<div class="col-md-6 formpadding">
<input type="text" class="form-control input formfirst" name="name" data-form-field="Name" placeholder="Your Name">
</div>
<div class="col-md-6 formpadding">
<input type="text" class="form-control input formphone" name="phone" data-form-field="Phone" placeholder="Phone">
</div>
<div class="col-md-12 formpadding" data-for="email">
<input type="text" class="form-control input" name="email" data-form-field="Email" placeholder="Email">
</div>
<div class="col-md-12 formpadding" data-for="message">
<textarea class="form-control input" name="message" rows="3" data-form-field="Message" placeholder="Message"></textarea>
</div>
<div class="input-group-btn col-md-12" style="margin-top: 10px;">
<button href="" type="submit" class="btn btn-primary btn-form">SEND MESSAGE</button>
</div>
</div>
</form>
</div>
</div>
<!-- End of Form -->
</div>
</div>
</div>
<!-- Copyright -->
<div class="container-fluid copyright">
<hr class="bg-light">
<p class="lead">© domainname.com</p>
</div>
</footer>
<!-- JavaScript's -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="bootstrap-lightbox.js"></script>
</body>
</html>