Im playing around with bootstrap and i've come up against something I am struggling to find an answer to.
I want to put a 'Login' on the bottom right of the screen, near the fold. Below is my code:
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
}
.home-btn {
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-50%);
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Currently the button sits centred on the right box, which is my second option. My first would be to have it sit within the right panel, near the bottom right. If I move the button outiside of the right div, i can make the button go down to the right, but it adds a row that breaks the effect.
any help would be appreciated.
img{
position: absolute;
bottom: 40%;
left: 50%;
transform:translateX(-40%);
z-index: 2;
}
.leftside, .rightside {
height: 50vh;
width: 100%;
}
#media screen and (min-width:768px)
{
.leftside, .rightside {
height: 100vh;
}
}
.leftside {
background:#20639B;
}
.rightside {
position: relative;
}
.home-btn {
position: absolute;
bottom: 20px;
right: 20px;
z-index: 2;
font-size: 1.6em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="homepage.css">
</head>
<body>
<img src="Bird.png" alt="hummingbird">
<div class="row no-gutters">
<div class="col-md-6 no-gutters">
<div class="leftside">
</div>
</div>
<div class="col-md-6 no-gutters">
<div class="rightside d-flex justify-content-center align-items-center">
<h2>Mini Blog Project</h2>
<button class="btn btn-lg btn-secondary float-right home-btn">Login</button>
</div>
</div>
</div>
<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.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
Related
I've used animate property in my jquery file for top property but it's not working. Do you know what the reason is?
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="font awsome/FontAwesome.Pro.5.11.2.Web/css/all.min.css">
<script src="font awsome/FontAwesome.Pro.5.11.2.Web/js/all.min.js"></script>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=" top-back">
<img src="images/Untitled-2.png" alt="">
</div>
<div class=" main-back" >
<div class="container">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 ">
<div class="blue">
<img class="magic" src="images/magic.png" alt="" style="position: absolute; left: 4.5%;">
<ul>
<li style="left: 25%; top: 5px" class="pics1"><img src="images/face1.png" alt="" >Facelift surgery</li>
<li style="left: 25%; top: 200px" class="pics2"><img src="images/face2.png" alt="">Lip Augmentation</li>
<li style="left: 25%; top: 390px" class="pics3"><img src="images/face3.png" alt="">Botox Injections</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row white-box">
<div class="col-5">
<div class="">
<h1>Facelift Surgery</h1>
<p>Aromatherapy has a very beneficial effect on the human body and promotes maximum relaxation. The use of aroma oils in the process of massage enhances its effect, relieves fatigue.
</p>
<button>Make an appointment</button>
</div>
</div>
<div class="col-7 face">
<img src="images/face.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom-back">
<img src="images/Untitled-3.png" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* CSS Document */
body{
margin: 0
}
.top-back img{
width: 100%;
padding: 0 !important;
position: relative;
top: 10px
}
.main-back{
background-color: #f3e5d8;
height: 600px
}
.bottom-back img{
position: relative;
top: -10px;
width: 100%
}
.white-box{
background-color: #fff9f3;
border-radius: 30px;
position: relative;
top: 108px;
height: 450px
}
.face img{
width: 94.5%;;
position: absolute;
top: -124px;
right: 23px;
}
.blue{
background-color:#2d3663;
border-radius: 30px;
position: relative;
top: -4px;
width: 78%
}
.blue ul{
text-align: center;
text-decoration: none;
cursor: pointer;
color: white;
list-style-type: none;
padding: 0;
height: 596px
}
.blue li{
padding: 15px 0;
position: absolute
}
.blue img{
display: block;
margin: auto;
width: 90%;
margin-bottom: 10px
}
.white-box h1 {
color: #cd8274;
margin-top: 40px
}
.white-box p{
color: #474e75;
margin: 40px 0;
line-height: 29px;
font-size: 20px;
}
$(document).ready(function(){
$('.pics2').hover(function(){
$('.magic').animate({top: "195px"});
});
$('.pics1').hover(function(){
$('.magic').animate({top: "0"});
});
$('.pics3').hover(function(){
$('.magic').animate({top: "384px"});
})
});// JavaScript Document`
i finally found the reason... the CDN of jquery must not be the first one. i changed the position of that and it worked
Console shows me $(...).animate is not a function
This is the reason
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
Remove it and everything will work. This version of jQuery jquery-3.3.1.slim.min.js is shorter (slim) and doesn't support animate function.
Use the full one instead.
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"></script>
I'm having a problem where the divs (in this case imgs) in my jumbotron are not being constricted to it. Ideally, the image would sit in the same horizontal position it is now, but the jumbotron would extend downward (or the image upward I suppose, but I want it to all be relative) in order to encompass the image. Is there a good way to do that? Any help is apprecitated!
/* main color: #272950 */
body {
color: #fffae3;
background-color: #FF0000;
}
.header {
padding: 30px 0;
background: #FF0000;
}
.header .profile-image{
width: 25%;
height: 25%;
margin-right: 80px;
}
.header .profile-content .name {
color: #49515a;
font-size: 38px;
margin-bottom: 5px;
margin-top: 30px;
}
.header .container{
background-color: #77dd77;
}
.jumbotron{
background-color: #77dd77;
padding: 5em inherit;
background-size: auto 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="jumbotron">
<img
src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png"
alt="me"
class="profile-image img-fluid float-left"
/>
<div class="profile-content float-left">
<h1 class="name">AAAAAAAAA</h1>
</div>
</div>
</div>
</header>
<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>
Because of the float-left class.
I'd rather use flex in this instance.
.profile-card {
display: flex;
}
<div class="jumbotron profile-card">
<img src="https://cdn3.iconfinder.com/data/icons/social-messaging-productivity-6/128/profile-male-circle2-512.png" alt="me" class="profile-image img-fluid" />
<div class="profile-content">
<h1 class="name">AAAAAAAAA</h1>
</div>
</div>
I am searching to split the screen into 3 sections
On a wide screen:
On small screen:
Any ideas to how to achieves this?
I guess there is a combination of flexbox and the grid system but i am not able to figure it out.
Edit: I just did a tentative using just the row and col but i am not sure that is the ideal solution
#left {
height: 600px;
}
#righttop {
height: 300px;
}
#rightbottom {
height: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous"
/>
<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"
/>
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 bg-success" id="left">
left part
</div>
<div class="col-md-6">
<div class="row bg-primary" id="righttop">first part right</div>
<div class="row bg-warning" id="rightbottom">first part left</div>
</div>
</div>
</div>
<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>
</body>
</html>
Three Image Combinations,
html,
body {
height: 100%;
width: 100%;
}
h1 {
margin: 0;
padding: 0;
text-align: center;
color: #fff;
font-family: sans-serif;
}
.img_container {
width: 70vw;
height: 80vh;
margin: 20px auto;
display: flex;
}
.main-img {
width: 50%;
height: 100%;
margin-right: 10px;
background-color: orange;
}
#media (max-width: 991px) {
.main-img {
width: 100%;
height: 100%;
}
}
.stacked-div {
width: 50%;
height: 100%;
}
#media (max-width: 991px) {
.stacked-div {
width: 100%;
height: 100%;
}
}
.overlay {
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
opacity: 0;
transition: all .4s;
display: flex;
justify-content: center;
align-items: center;
}
.main-img:hover .overlay,
.top-img:hover .overlay,
.bottom-img:hover .overlay {
opacity: 1;
}
.top-img,
.bottom-img {
width: 100%;
height: calc(50% - 5px);
background-color: orangered;
}
.top-img {
margin-bottom: 10px;
}
<div class="img_container">
<!-- top level image container START-->
<div class="main-img">
<!--Main image -->
<div class="overlay">
<!--overlay div -->
<h1>Hello!</h1>
</div>
</div>
<div class="stacked-div">
<!--stacked img container -->
<div class="top-img">
<!--top image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
<div class="bottom-img">
<!--bottom image -->
<div class="overlay">
<h1>hello!</h1>
</div>
<!--overlay -->
</div>
</div>
The Bootstrap 4 way would be to use the flexbox utility classes...
<div class="container">
<div class="row">
<div class="col-md-6 bg-success min-vh-100" id="left">
left part
</div>
<div class="col-md-6 d-flex flex-column">
<div class="row flex-grow-1">
<div class="col-md-12 bg-primary min-vh-100 min-vh-md-50" id="righttop">first part right</div>
<div class="col-md-12 bg-warning min-vh-100 min-vh-md-50" id="rightbottom">first part left</div>
</div>
</div>
</div>
</div>
https://www.codeply.com/go/vbWvESRSXP
Then you just need a little additional CSS to make the right columns 1/2 height on md and wider..
#media (min-width: 768px) {
.min-vh-md-50 {
min-height: 50% !important;
}
}
You’re right, you have to use Grid System with breakpoints, rows and cols, read the official documentation.
If you still looking for an answer, see this.
<div class="row">
<div class="col-md">First col md</div>
<div class="col-md">
<div class="row">
<div class="col-12">Second col xs</div>
<div class="col-12">Third col xs</div>
</div>
</div>
Follow this link.
I want to create a split screen Bootstrap 4 page and put an image in the center overlapping the two columns. I have created two equal columns but I have no idea how to place the image to overlap them.
I have tried position:absolute and float:left but it doesn't help. Thank you for your help!
Expected:
Photo
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
this is solving your problem:
html,
body {
height: 100%;
margin: 0;
}
body {
overflow-x: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
bottom: 0; /* i deleted top:0; */
left: 50%; /* this and below code for excellent centered */
transform:translateX(-50%);
z-index:2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://picsum.photos/400/500">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
also, i deleted class and style attribute from img tag. because they unnecessary.
Add z-index: 1; in your img css
img {
z-index: 1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
add simply z-index to in your img class
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)
html,
body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
col {
height: 100vh;
}
img {
position: absolute;
top: 15%;
bottom: 0;
left: 0;
right: 0;
z-index: 1001;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
<img src="https://imgur.com/Qk5Qa9M.jpg" class="mx-auto d-block" style="width:auto">
<div class="row h-100">
<div class="col" style="background-color:blue">
Left
</div>
<div class="col" style="background-color:red">
Right
</div>
</div>
</body>
</html>
I have tried to paste "a" tag inside "li". But I can't understand why there is no pointer cursor on tag and href attribute doesn't work as usual.What bootstrap property locks it? It is not enough paddings for li tag? Or what I'm doing wrong? What is a better way to improve it using bootstrap classes? Any help will be appreciated.
body {
margin: 0;
padding: 0;
font-family: "Arial, Helvetica, sans-serif,";
font-size: 12px;
font-weight: normal;
}
.header {
background-color: #222222;
height: 114px;
}
ul {
color: white;
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-family: "MyradProRegular";
font-size: 14px;
text-transform: capitalize;
}
.input-group {
display: flex;
}
.container-fluid {
height: 100px;
}
.navbar {
width: 37%;
margin-bottom: 0 !important;
min-height: 0px !important;
}
.search-panel-block {
width: 40%;
}
img {
max-width: 100%;
}
.menu-items__item {
list-style-type: none;
}
.search-panel {
padding-top: 34px;
}
.nofloat {
float: none;
}
.agileheader-topbar-grid {
margin-left: auto;
}
.nav > li > a {
position: static;
padding: 0;
}
.btn {
width: 65px;
background-color: #f10e34;
border-color: #f10e34;
}
.glyphicon-search {
color: #ffffff;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="menu-logo">
<img src="logo.jpg" alt="market-logo.jpg">
</div>
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
<ul class="menu-items nav">
<li class="menu-items__item">My account</li>
<li class="menu-items__item nav-link">Wishlist</li>
<li class="menu-items__item nav-link">My Cart</li>
<li class="menu-items__item nav-link">Checkout</li>
<li class="menu-items__item nav-link">Login</li>
</ul>
</nav>
<div class="agileheader-topbar">
<div class="container">
<div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
<form class="search-panel">
<div class="input-group add-on">
<input class="form-control" name="srch-term" type="text" placeholder="Search">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
It is due to div with "agileheader-topbar" class override the menu.
Use below code.
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right" style="z-index: 1;">
Answer:
.navbar {
z-index: 1;
}
body {
margin: 0;
padding: 0;
font-family: "Arial, Helvetica, sans-serif,";
font-size: 12px;
font-weight: normal;
}
.header {
background-color: #222222;
height: 114px;
}
ul {
color: white;
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-family: "MyradProRegular";
font-size: 14px;
text-transform: capitalize;
}
.input-group {
display: flex;
}
.container-fluid {
height: 100px;
}
.navbar {
width: 37%;
z-index: 1;
margin-bottom: 0 !important;
min-height: 0px !important;
}
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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.3/umd/popper.min.js"
integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
crossorigin="anonymous"></script>
</head>
<body>
<header class="header">
<div class="container-fluid">
<div class="menu-logo">
<img src="logo.jpg" alt="market-logo.jpg">
</div>
<nav class="navbar navbar default col-lg-9 col-md-9 col-sm-9 pull-right">
<ul class="menu-items nav">
<li class="menu-items__item">My account</li>
<li class="menu-items__item nav-link">Wishlist</li>
<li class="menu-items__item nav-link">My Cart</li>
<li class="menu-items__item nav-link">Checkout</li>
<li class="menu-items__item nav-link">Login</li>
</ul>
</nav>
<div class="agileheader-topbar">
<div class="container">
<div class="col-md-6 agileheader-topbar-grid agileheader-topbar-grid2 nofloat">
<form class="search-panel">
<div class="input-group add-on">
<input class="form-control" name="srch-term" type="text" placeholder="Search">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
your nav under another div element so when you mouse enter in nav item this hasn't hovered actually, it has hovered in another div element (.agileheader-topbar). so you try this CSS
.agileheader-topbar {
width: 40; /*or is your needed */
}