I am having some trouble with some of my bootstrap cards overlapping my navbar. I made sure that none of my positions were absolute and that the z indexes were handled properly, but I still get the same issue. doing padding-top on the body did not give me the result I wanted either. Here are some before and after pictures.
#top {
top: 0;
position: fixed;
z-index: 1;
}
.topbar {
height: 90px;
background-color: #24414e;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
}
#keyframes greeting {
0% {
background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60% {
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo {
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder {
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out {
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover {
text-decoration: underline;
}
.menu {
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon {
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt {
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide {
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1:hover~.txt-1 {
visibility: visible;
}
.icon-2:hover~.txt-2 {
visibility: visible;
}
.icon-3:hover~.txt-3 {
visibility: visible;
}
.icon-4:hover~.txt-4 {
visibility: visible;
}
.icon-5:hover~.txt-5 {
visibility: visible;
}
.icon-6:hover~.txt-6 {
visibility: visible;
}
.icon:hover {
color: #ffffff;
}
.rest {
height: 100%;
}
.contacts {
position: relative;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="templatestyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<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.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id="top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id="openMenu">
<div class="row">
<div class="col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class="txt txt-1">Dashboard</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class="txt txt-2">Profile</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class="txt txt-3">Certificates</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class="txt txt-4">Send/Apply</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class="txt txt-5">Settings</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class="txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class="rest container-fluid">
<h2 class="text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class="row contacts">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 1</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 2</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 3</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 4</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 5</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 6</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 7</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
This is a simple fix, just set your Header z-index: 2; and your cards z-index: 1;.
I didn't really go over your code but setting the header an higher z-index as the content for sure will fix it.
The answer is you have given position:fixed to the header(.top) to fix it at the top with top:0, so you must need to give margin-top to the section next to it containing classes class="rest container-fluid" otherwise it will overlap as it seems with absolute positioned element.
Setting margin:top:159px fix the issue.
Please note that 159px is top header's height here. Happy coding :)
Use the fixed-top class instead of the top CSS code. And add 160px padding-top for the body.
/*
The headers height is 159.5px
*/
body {
padding-top: 160px;
}
fixed-top removes the element that you use it for, from the normal flow of the content, and, hence, the element will overlay the other content
To fix the issue, you need to push down the main content equal or larger than the height of the fixed-top element. You can do so by setting the padding-top of the body equal or larger than the fixed-top element's height. For example, if the fixed-top element's height is 72px, padding-top of body should be, at least, 72px. If you wish, you can use relative units: padding-top: 4.5rem; instead of padding-top: 72px;.
body {
padding-top: 72px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
</div>
<header>
<h2 class="subheading" title="Start Fixing Songs">
<a class="mx-2">
Fix Songs
</a>
</h2>
</header>
</div>
<main class="container-fluid bg-primary bd-">
<div class="row">
<div class="col py-5">Hello</div>
</div>
</main>
This is what both bootstrap-3 and bootstrap-4 has done. I recommend you to inspect it yourself.
You may find these two link useful.
w3schools - How to - fixed menu
teamtreehouse - div hiddne below fixed position navbar
A codepen of your work
Related
I'm trying to get my logo stick to the top of the page but I can't manage to do that.
I've tried with:
#logo {
position: sticky;
top:0
}
I also check if there's an overflow property but I've found nothing, I'm also using bootstrap framework version 5.
This is the part where I've put logo:
<div class="container" id="header">
<div class="row">
<div class="col-4 col-md-3 align-items-start d-flex">
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>
<div class="col-7 col-md-8 align-items-end justify-content-end d-flex" id="menu_mobile">
<div class="row">
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">about me</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">competencies</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">portfolio</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">contact</span>
</div>
</div>
</div>
<div class="col justify-content-end align-items-center d-flex" id="menu_desk">
<span class="menu_item_desk">about me</span>
<span class="menu_item_desk">competencies</span>
<span class="menu_item_desk">portfolio</span>
<span class="menu_item_desk">contact</span>
</div>
</div>
</div>
Can someone help me?
edit: after trying the solution posted by #Fork:
<div class="container" id="header">
<div class="row">
<div class="col-4 col-md-3 align-items-start d-flex " >
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid position-fixed top-0" alt="logo">
</div>
The logo stay in position while I scroll down but other element changed of disposition. I managed to fix them adding some paddings and margin
edit 2: Here's the snippet and thanks to Fork now it works fine, another thing I would like to accomplish is that when the page is scrolled, the image goes up above the page for a tiny bit. I found this fiddle but is not exactly what i mean https://jsfiddle.net/z2r40y8c/. The image needs to go up and block at a specified amount of pixels.
html {
scroll-behavior: smooth;
}
body {
width: 100%;
height: 2000px
}
a{
text-decoration: none;
}
.container {
max-width: 100%;
padding: 0%;
margin: 0%;
}
body{
background-color: #161616;
}
#logo {
margin-left: 25px !important;
position: fixed;
top:0
}
.menu_mobile{
padding-top: 5%;
}
.menu_item {
font-family: 'sublimaextrabold';
font-size: 18px;
color: rgba(112,112,112,1);
padding-bottom: 5%;
cursor: pointer;
}
#media only screen and (min-width: 810px) {
#menu_mobile {
display: none !important;
}
}
#media only screen and (max-width: 810px) {
#menu_desk {
display: none !important;
}
}
.menu_item_desk {
font-family: 'sublimaextrabold';
color: rgba(112,112,112,1);
padding-left: 5%;
font-size: 30px;
cursor: pointer;
padding-top: 5%;
}
#media only screen and (max-width: 1197px) {
.menu_item_desk {
font-size: 24px;
}
}
#media only screen and (max-width: 993px) {
.menu_item_desk {
font-size: 20px;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MB</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="../html/style.css">
</head>
<body ondragstart="return false;" ondrop="return false;">
<div class="container" id="header">
<div class="row">
<div class="col-sm-12">
<div class="container">
<div class="col-sm-3 align-items-start d-flex">
<img src="https://www.startpage.com/av/proxy-image?piurl=https%3A%2F%2Fdictionary.cambridge.org%2Ffr%2Fimages%2Fthumb%2Foblong_noun_002_25303.jpg%3Fversion%3D5.0.245&sp=1657096049T030f5c6f84a41f399845576d2d63d9849144e614f9e0077172506ae40946828e" id="logo" class="img-fluid position-fixed top-0" alt="logo">
</div>
<div class="col-sm-11 d-flex justify-content-end align-items-center " id="menu_desk">
<span class="menu_item_desk">section 1</span>
<span class="menu_item_desk">section 2</span>
<span class="menu_item_desk">section 3</span>
<span class="menu_item_desk">section 4</span>
</div>
<div class="col-11 align-items-end pt-3 justify-content-end d-flex" id="menu_mobile">
<div class="row">
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 1</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 2</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 3</span>
</div>
<div class="col-12 justify-content-end d-flex">
<span class="menu_item">section 4</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not sure why you just want the position: sticky; just on the logo rather than the whole navigation bar, but if you want to go that route, I would suggest using position: fixed; instead. Additionally, apply it to the div that's surrounding your image. Like so:
<div class="col-4 col-md-3 align-items-start d-flex position-fixed top-0">
<img src="../media/logos/mb-logo.png" id="logo" class="img-fluid" alt="logo">
</div>
Hope this helps :)
As far as I know the problem is, that for some constructions, like a bootstrap carousel, if you want to display it on a fullscreen, bootstrap requires the height of html to be set to 100%.
For position: sticky it is required to have no height set.
You could try making the nav sticky with JS:
const nav = document.querySelector('#nav');
let navTop = nav.offsetTop;
function fixedNav() {
if (window.scrollY >= navTop) {
nav.classList.add('fixed');
} else {
nav.classList.remove('fixed');
}
}
window.addEventListener('scroll', fixedNav);
and the CSS for the activated navbar:
#nav.fixed {
position: fixed;
box-shadow: 5px 5px 19px 0px rgba(0, 0, 0, 0.5);
}
#nav.fixed ul li img {
height: 36px;
}
#nav.fixed ul li a {
font-size: 14px;
}
I'm trying to show an icon when I hover on the card and add opacity on it but I don't want to add opacity to the icon.
Snippet:
.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card:not(i){
transition: visibility 0s, opacity 0.1s linear;
border: 2px solid #57CBCC;
opacity: 0.5;
}
.cardrecipe_result:hover .card-body{
}
.cardrecipe_result:hover i{
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<div class="">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>
</div>
How can I remove the opacity on the plus icon on hover ?
Remove the extra div you are having and simply target all the elements expect the i (note the use of a space in the selector)
.cardrecipe_result{
cursor: pointer;
}
.cardrecipe_result i{
top: 50%;
left: 50%;
position: absolute;
z-index:9;
transform: translate(-50%, -50%);
color: #90CC57;
font-size: 25px;
display: none;
}
.cardrecipe_result:hover .card :not(i){
transition: visibility 0s, opacity 0.1s linear;
opacity: 0.5;
}
.cardrecipe_result:hover .card {
border: 2px solid rgba(87,203,204,0.5); /* use rgba here since it won't be affected by opacity */
}
.cardrecipe_result:hover i{
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<div class="row">
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_108">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://www.goodfoodtour.fr/wp-content/uploads/sites/5/2017/11/Buddha-Bowl-Sushi.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">budha bowl brocoli, carottes, radis</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_142">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://static.colruyt.be/culinair/Folderrecepten%201316%20+%20WM1416/linzenschotel%20met%20kerriegroenten_MR.jpg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">riz curry, lentilles, carottes</h5>
</div>
</div>
</div>
<div class="col-md-3 cardrecipe_result">
<div class="card" id="recipe_id_122">
<i class="fas fa-plus"></i><img onerror="imgErrorRecipe(this);" class="img-fluid" src="https://img.cuisineaz.com/660x660/2013-12-20/i63062-photo-de-veloute-de-carottes.jpeg" alt="Recipe picture">
<div class="card-body card_body_recipe">
<h5 class="card-title">velouté de carottes</h5>
</div>
</div>
</div>
</div>
My solution for this, would be to put icon out of card and give to icon position: absolute.
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
As you can see on the snippet below, the div with the class divSection is grouped, those div should stay below the text (text 1, text 2, text 3) that are into the div with the class divSection. I could add a margin on divSection, but i want it to have 0 margin when there's no content into the div.
.divSection3, .divSection7{
height: 38px;
background-color: rgba( 26, 26, 26, 0.7);
}
.section{
text-align: center;
padding-top: 13px;
display: flex;
flex-basis: 100%;
align-items: center;
text-transform: uppercase;
}
.section::before,
.section::after {
content: "";
flex-grow: 1;
background: rgba(255,255,255, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container mt-5">
<div class="row">
<div class="col-12" style="background-color: red;">
<div class="row">
<div class="divSection3 col-lg-12">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 1</h6>
<div>
<h5>texto 1</h5>
</div>
</div>
</div>
<div class="divSection7 col-lg-12">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 2</h6>
<div>
<h5>texto 2</h5>
</div>
</div>
</div>
<div class="divSection3 col-lg-12">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 3</h6>
<div>
<h5>texto 3</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is how it should looks like:
Please just remove the height: 38px; from the .divSection3, .divSection7 selectors because it is redundant.
One more thing, you shouldn't have different names for the classes because the class purpose is to have multiple items selectable with one CSS rule. For unique elements rules you should use IDs instead of classes.
Hope this helps.
How about this?
css:
.divSection {
background-color: rgba( 26, 26, 26, 0.7);
}
h5 {
background-color: red;
}
.u-padding-top {
padding-top: 5px;
}
.section{
text-align: center;
display: flex;
flex-basis: 100%;
align-items: center;
text-transform: uppercase;
}
.section::before,
.section::after {
content: "";
flex-grow: 1;
background: rgba(255,255,255, 0.35);
height: 1px;
}
html:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container mt-5">
<div class="row">
<div class="col-12" style="background-color: red;">
<div class="row">
<div class="divSection col-lg-12 u-padding-top">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 1</h6>
<div>
<h5>texto 1</h5>
</div>
</div>
</div>
<div class="divSection col-lg-12">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 2</h6>
<div>
<h5>texto 2</h5>
</div>
</div>
</div>
<div class="divSection col-lg-12">
<div>
<h6 class="section text-white ml-2 mr-2 ml-lg-0 mr-lg-0">Title 3</h6>
<div>
<h5>texto 3</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
UPDATED
Took off redundancy
In my code, the overflow-y: scroll property set under the "Online Contacts" section does not seem to be working. What's weirder is that when the position is absolute and I delete the "Reminders" header or I shift the header up, It does seem to work. I can't figure out what is causing this bug (Note: I am using Bootstrap 4 in this project).
Here is the code: https://jsfiddle.net/hdesh7/rL43unfj/1/
HTML:
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="dashboardstyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<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.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id = "top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id = "openMenu">
<div class="row">
<div class = "col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class = "txt txt-1">Dashboard</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class = "txt txt-2">Profile</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class = "txt txt-3">Certificates</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class = "txt txt-4">Send/Apply</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class = "txt txt-5">Settings</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class = "txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class = "rest container">
<h2 class = "text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class = "row contact">
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 1</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 2</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 3</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 4</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 5</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 6</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
<div class = "col-sm-6 col-md-4 col-lg-3">
<div class = "card border-success">
<div class="card-header">Person 7</div>
<div class = "card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class = "bg-primary rounded mx-auto .text-light" style="color: white">Send Chat</button>
</div>
</div>
</div>
</div>
<h4 class = "remind">Reminders:</h4>
</section>
<section class = "rest container">
</section>
</body>
CSS:
html{
overflow-y: scroll;
}
#top{
top: 0;
position: sticky;
z-index: 1;
}
.topbar{
height: 90px;
background-color: #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
/*
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
*/
}
#keyframes greeting{
0%{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60%{
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo{
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder{
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out{
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover{
text-decoration: underline;
}
.menu{
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon{
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt{
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide{
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1{
color: #ffffff;
}
.txt-1{
visibility: visible;
animation-name: iconSlide;
animation-duration: 1s;
}
.icon-1:hover ~ .txt-1{
visibility: visible;
}
.icon-2:hover ~ .txt-2{
visibility: visible;
}
.icon-3:hover ~ .txt-3{
visibility: visible;
}
.icon-4:hover ~ .txt-4{
visibility: visible;
}
.icon-5:hover ~ .txt-5{
visibility: visible;
}
.icon-6:hover ~ .txt-6{
visibility: visible;
}
.icon:hover{
color: #ffffff;
}
.rest{
height: 100%;
z-index: -1;
position: relative;
}
.contact{
height: 100px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #24414e;
overflow-y: auto;
position: relative;
}
.card{
margin-top: 10px;
margin-bottom: 10px;
}
.remind{
margin-top: 20px;
}
The issue is caused by z-index: -1 in the .rest class (applied to the section element).
If you remove it works correctly
There is an element with a higher z-index value that is preventing you from scrolling. Namely .rest has z-index: -1.
Switch up your z-index values and make this scrollable container have a higher z-index