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>
Related
It is perfectly working for desktop browsers and I am able to download PDFs with my letter pad background. But while working on mobile, the background just disappears, other alignments are proper. Can anyone please help me to solve this?
Following is the code I am using:-
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style>
body {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color: #f5f3f4;
background-image: url('img/letter_pad.jpg');
background-repeat: no-repeat;
font-size: 2vw;
}
.initial-padding {
margin-top: 25vw;
}
h5, p {
font-size: 2vw;
}
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
}
</style>
</head>
<body id="content">
<div style="visibility: hidden;position: absolute;z-index: -10;">
<img src="img/letter_pad.jpg" style="visibility: hidden;width: 100%;z-index: -10;">
</div>
<div class="container initial-padding">
<div style="float: right;">
<h5 class="d-inline">Date:- </h5>
<p class="d-inline"><u>06/06/2021</u></p>
</div><br><br>
<!-- <h1 class="text-center">Title</h1> -->
Respected sir,<br><br>
Basic letter formating
</div>
<button onclick="window.print()" id="print-btn" class="d-flex mx-auto mt-2 mb-5">Download</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust
It is mentioned that Chrome does not print backgrounds of the element. If this property is set to exact for the element, it will apply only to its descendants.
So here is the updated code which worked for me. There is only one little issue that it is showing horizontal margin in mobile phone, but it can be ignorable.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style>
body {
-webkit-print-color-adjust: exact !important;
color-adjust: exact !important;
background-color: #f5f3f4;
font-size: 2vw;
}
.initial-padding {
padding-top: 25vw;
}
h5, p {
font-size: 2vw;
}
table {
border: 1px solid black;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
}
</style>
</head>
<body id="content">
<div style="visibility: hidden;position: absolute;z-index: -10;">
<img src="img/letter_pad_min.jpg" style="visibility: visible;max-width: 100%;min-height: 100%;z-index: -10;">
</div>
<div style="position: absolute;z-index: -11;min-height: 100%;min-width: 100%;background-color: #f5f3f4"></div>
<div class="container initial-padding">
<div style="float: right;">
<h5 class="d-inline">Date:- </h5>
<p class="d-inline"><u>06/06/2021</u></p>
</div><br><br>
<!-- <h1 class="text-center">Title</h1> -->
Respected sir,<br><br>
Basic letter formating
</div>
<button onclick="window.print()" id="print-btn" class="d-flex mx-auto mt-2 mb-5">Download</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
body {
background: white;
font-family: 'Ubuntu', sans-serif;
}
.cas {
display: inline-block;
border: 2px solid #0C8346;
background: #0C8346;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.sad {
display: inline-block;
border: 2px solid #D73909;
background: #D73909;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.asd {
display: inline-block;
border: 2px solid #D3D3D3;
background: #D3D3D3;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
p.sda {
font-width: 700;
font-size: 26px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
>.col,
>[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
.sh {
margin-left: -2px;
width: 585px;
border: 2px solid gray;
border-top: none;
}
.hs {
margin-left: -17px;
width: 587px;
padding-left: 2px;
border: 2px solid gray;
border-top: none;
border-right: none;
margin-right: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<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.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="row align-items-center">
<div class="col-6 cas">
CONS
</div>
<div class="col-6 sad">
PROS
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
I'd like for the input under the cons to start where the cons starts, and to end where it ends now. Is this possible, or should I just make the pros and cons bigger? Or is there a better way to do it? Please help!! Also please go easy on me, I'm a beginner... Thank you so very much!!! Well that's all I want to ask, this is just filler...
please add your styles
input, .title{
width: 100%;
}
input{
background: #D3D3D3;
}
.title--cons{
background: #D73909;
color: #fff;
}
.title--pros{
background: #0C8346;
color: #fff;
}
#pros-cons div[class^='col-']{
padding: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<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.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container" id="pros-cons">
<div class="row align-items-center">
<div class="col-6">
<div class="title title--cons">
CONS
</div>
</div>
<div class="col-6">
<div class="title title--pros">
PROS
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>
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>
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 */
}