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
Related
I am using Scss for styling the page and need to set scroll for specific parts of a HTML page.
when a user doing a scroll I need to keep the Categories(left) & Cart (Right) area to be strick in their position. But the center part needs to be scroll till the filtered items are reaching the top (bottom of the breadcrumb). If the user scroll further the filtered items will scroll underneath the filter and search bar section.
Can Anyone help me to fix it.
HTML :
<div class="container-fluid px-5">
<div class="row pt-4 pr-0">
<div class="col-sm-12 px-4 pt-2">
<app-gropcard-breadcrumb></app-gropcard-breadcrumb>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10" style="background-color: #0084FF;color: white;">
<mat-card-header class="d-flex justify-content-center p-2">
<mat-card-title class="mb-0">Categories</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree mt-3 pl-3 ">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button class="TreeButton" mat-icon-button disabled></button>
<span (click)="Category(node)">{{node.name}}</span>
</li>
</mat-tree-node>
<!-- This is the tree node template for expandable nodes -->
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
<li>
<div class="mat-tree-node" [attr.aria-label]="'toggle ' + node.name">
<button class="TreeButton" mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.name">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
<span matTreeNodeToggle (click)="Category(node)">{{node.name}}</span>
</div>
<ul class="pl-2" [class.tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</mat-card-content>
</mat-card>
</div>
<div class="col-sm-6 containerbackground">
<div class="col-sm-12 p-0 d-flex justify-content-center">
<img class="w-100 banner"
[src]="mListedPartyBanner">
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="row">
<h5 class="mt-4 mb-2">Filtered Items</h5>
</div>
</div>
<div class="col-sm-5 search pt-4" fxShow="true" fxHide.gt-sm="false">
<form class="search" >
<mat-form-field class="w-100" appearance="outline">
<input type="text" #myInput matInput placeholder="Search" maxlength="50" (input)="Search(myInput.value)" autocomplete='null' [formControl]="myControl">
<button matTooltip="Search" matSuffix mat-icon-button>
<mat-icon>
search
</mat-icon>
</button>
</mat-form-field>
</form>
</div>
<div class="col-sm-4 d-flex justify-content-end">
<div class="View mt-4 mb-2 mr-4">
<div class="row">
<button matTooltip="Filter"[matMenuTriggerFor]="menu" mat-icon-button>
<mat-icon>filter_list</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button (click)="sortBy(data?.id)" mat-menu-item *ngFor="let data of sortList" [value]="data?.id">
<span>{{data?.value}}</span>
</button>
</mat-menu>
<button [ngClass]="{'ActiveButton': displayMode === 1}" (click)="onDisplayModeChange(1)"
matTooltip="List view" mat-icon-button>
<mat-icon>view_headline</mat-icon>
</button>
<button [ngClass]="{'ActiveButton': displayMode === 2}" (click)="onDisplayModeChange(2)"
matTooltip="Grid view" mat-icon-button>
<mat-icon>view_module</mat-icon>
</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="col-sm-12" *ngIf='displayMode==1'>
<div class="row d-flex justify-content-center">
<div class="col-sm-6 p-2 " *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card class="py-1" matRipple>
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<div class="row">
<div class="ImageDiv">
<img class="w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
</div>
<div class="row NameDiv d-flex ProductData justify-content-center">
<div class="Name mt-2">
<span>{{prod?.ITEM_DESCRIPTION}}</span>
</div>
<div class="Price mt-2">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="col-sm-12">
<div class="row">
<div class="d-flex justify-content-center mt-2 w-100">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<div class="row">
<div class="col-sm-6">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton " mat-raised-button>
<mat-icon class="iconSize Cursor">shopping_cart</mat-icon>
</button>
</div>
<div class="col-sm-6">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton"
mat-raised-button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
<div class="col-sm-12" *ngIf='displayMode==2'>
<div class="row">
<div *ngIf="IsItemFound" style="display:block;margin:auto;">
<img src="../../../../assets/oops.png" alt="">
</div>
<div class="col-sm-4 p-2" *ngFor="let prod of ListedPartyItems; let ind = index">
<mat-card matRipple class="p-0 ">
<div class="corner-ribbon top-right sticky blue shadow" *ngIf='prod?.PROMO_PRICE'>
{{((prod?.PRODUCT_PRICE-prod?.PROMO_PRICE)/prod?.PRODUCT_PRICE)*100 | number: '1.0-0'}}% Off</div>
<img class="d-block w-100 Img p-1" [src]="prod['IMAGE_PATH_1']">
<div class="w-100 d-flex ProductData justify-content-center">{{prod?.ITEM_DESCRIPTION}}</div>
<div class="col-sm-12 mt-2 d-flex justify-content-center">
<span class="ProductPrice">{{prod?.PROMO_PRICE ? (prod?.PROMO_PRICE | number:'.1-2') :
(prod?.PRODUCT_PRICE | number:'.1-2')}}<span class="pl-1"
[innerHtml]="mCurrencyCode"></span></span>
<span class="PromotionPrice mt-1 pl-1" *ngIf='prod?.PROMO_PRICE'>{{prod?.PRODUCT_PRICE |
number:'.1-2'}}<span class="pl-1" [innerHtml]="mCurrencyCode"></span></span>
</div>
<div class="d-flex justify-content-center mt-2">
<button type="button" (click)="Decrement( ind)" class="btnStyles">–</button>
<input type="text" readonly class="quantityBox" [(ngModel)]="prod.qty">
<button type="button" (click)="Increment(ind)" class="btnStyles">+</button>
</div>
<div class="w-100 mt-2">
<div class="row">
<div class="w-50 ">
<button (click)="AddToCart(prod?.PRODUCT_CODE,prod?.UOM,prod?.qty, ind)"
class="col-sm-12 ProductButton p-0" mat-raised-button>Add To Cart</button>
</div>
<div class="w-50">
<button (click)="SelectedProduct(prod?.PRODUCT_CODE)" class="col-sm-12 ProductButton p-0"
mat-raised-button>More</button>
</div>
</div>
</div>
</mat-card>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<mat-card class="col-sm-12 p-0 mat-elevation-z10 YourCartheight">
<mat-card-header class="d-flex justify-content-center p-2" style="background-color: #0084FF;color: white;">
<mat-card-title class="mb-0">Your Cart</mat-card-title>
</mat-card-header>
<mat-card-content>
<div class="col-sm-12" *ngIf="!IsMyCartHasItems">
<div class="row">
<div class="col-sm-12 d-flex justify-content-center mt-4">
<img class="d-block w-100 emptycart p-1" src="../../../../../assets/cart.png" alt="No Data">
</div>
<div class="col-sm-12 pb-4 d-flex justify-content-center">
<span>There are no items in your cart.</span>
</div>
</div>
</div>
<div class="col-sm-12 p-2" *ngIf="IsMyCartHasItems">
<div class="row" *ngFor="let prod of MyCart; let i = index">
<div class="col-sm-4 p-2">
<div class="col-sm-12 p-2">
<span style="font-size: 12px;">{{prod.ITEM_DESC}}</span>
</div>
</div>
<div class="col-sm-4 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<button type="button" (click)="Decrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">–</button>
<input type="text" readonly class="quantityBox1" [value]="prod.TOTAL_QTY">
<button type="button" (click)="Incrementsub(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE,prod?.TOTAL_QTY,i)" class="cartBtn">+</button>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-2 mt-2">
<span>{{prod?.TOTAL_AMT | number}} <span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></span>
</div>
</div>
<div class="col-sm-2 p-0 d-flex justify-content-center">
<div class="col-sm-12 p-1">
<button matTooltip="Remove"
(click)="RemoveCartProduct(prod?.ITEM_CODE,prod?.ITEM_PACK_SIZE)" mat-icon-button
color="warn">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>
<div class="col-sm-12 p-0 d-flex justify-content-center">
<button (click)='GoToCheckout()' class="col-sm-12 p-0 checkout" color="warn" mat-raised-button>CHECK
OUT <strong *ngIf='mCartCount > 0' class="pl-4" style="font-size: 20px;">{{TotalAmount | number}}<span class="pl-1 Price"
[innerHtml]="mCurrencyCode"></span></strong></button>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>
</div>
SCSS:
.Img{
height: 200px;
#include desktop{
height: 250px;
}
}
.Caption{
font-size: 1em;
font-weight: bold;
#include desktop{
font-size: 1.5em;
}
}
.ProductButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
margin-left: 10px;
}
.ProductData{
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.containerbackground{
background-color:#f1f3f6;
}
.ActiveButton{
background-color: color(primary);
color: color(basic);
}
// Change text colour when inputting text
.search {
//-----Input Field Size----------
::ng-deep .mat-form-field-flex > .mat-form-field-infix {
padding: 0.4em 0px !important;
// padding-bottom: 8px !important;
}
::ng-deep .mat-form-field-label-wrapper {
top: -1.5em;
}
::ng-deep
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float
.mat-form-field-label {
transform: translateY(-1.1em) scale(0.75);
width: 133.33333%;
}
::ng-deep .mat-form-field {
background-color: white;
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-wrapper {
margin: 0 0;
}
::ng-deep .mat-form-field-outline-start,
.mat-form-field-outline-end {
border-radius: 0 !important;
}
// ::ng-deep .mat-form-field-underline {
// height: 0px;
// }
// ::ng-deep .mat-form-field-infix {
// padding-top: 0px;
// position: relative;
// }
.mat-form-field-underline {
background-color: transparent;
}
.mat-form-field-ripple {
background-color: transparent;
}
}
}
.tree-invisible {
display: none;
}
.tree ul,
.tree li {
margin-top: 0;
margin-bottom: 0;
list-style-type: none;
cursor: pointer;
}
.mat-tree-node {
min-height: 0px;
max-height: 30px;
.TreeButton{
outline: none;
}
}
.Title{
font-size: 1.5em;
font-weight: bold;
}
.banner{
height: 250px;
}
.ImageDiv{
width: 40%;
}
.Img{
height: 130px;
#include desktop{
height: 150px;
}
}
.NameDiv{
width: 60%;
.Name{
width: 100%;
text-align: center;
font-weight: lighter;
font-size: 12px !important;
white-space: normal;
word-wrap: break-word;
color: color(gray);
}
.Price{
width: 100%;
font-weight: bold;
font-size: 1.5em;
color: color(primary);
text-align: center;
}
}
.imgButton{
background-color: color(messengerBlue);
color: color(basic);
font-weight: bold;
font-size: 1em;
border-radius: 0;
}
.btnStyles{
width: 28px;
height: 28px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 16px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.cartBtn{
width: 20px;
height: 20px;
background: linear-gradient(#fff, #f9f9f9);
display: inline-block;
border: 1px solid #c2c2c2;
cursor: pointer;
font-size: 12px;
border-radius: 50%;
padding-top: 1px;
line-height: 1;
}
.quantityBox{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 46px;
height: 28px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.quantityBox1{
display: inline-block;
padding: 3px 6px;
width: calc(100% - 60px);
height: 100%;
width: 25px;
height: 20px;
border-radius: 2px;
background-color: #fff;
border: 1px solid #c2c2c2;
margin: 0 9px;
font-weight: bold;
text-align: center
}
.iconSize {
font-size: 30px;
}
.cursor {
cursor: pointer;
}
.ItemPromotionPrice {
display: inline-block;
text-decoration: line-through;
opacity: .5;
font-size: 20px !important;
color: color(gray);
}
.ProductPrice{
font-weight: bold;
font-size: 1em;
color: color(primary);
}
::ng-deep .mat-form-field {
font-size: 12px; // example
}
.emptycart{
height: 100px !important;
width: 100px !important;
}
.YourCartheight{
min-height: 150px!important;
max-height:500px !important;
}
I have a suggestion to use html:not
It should be looked like this:
html:not([data-scroll='0']) /*class name for category section*/ {
position: fixed;
top: 0;
}
In order to make the middle container's content scroll, it must first overflow. That can be achieved by applying either a fixed or max height. Then you need to specify the overflow behaviour:
.containerbackground {
background-color:#f1f3f6;
max-height: 100vh;
overflow-y: auto;
}
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;
}
Firstly, here's a JSFiddle demo: https://jsfiddle.net/y9bp4oat/
I'm currently using bootstrap's grid system to display a bunch of items in rows of 4. When you hover over an item it'll flip to the back and display more details. It works great, problem comes when there's an item directly below the item you're currently hovering over, the item below blocks or overlays itself on the item that's being hovered. I'm sorry if my explanation is confusing, the JSFiddle demo will let you see what I mean.
I've been trying to fix this issue with z-index, making sure the position isn't set to default but to no avail. I've been trying to fix this issue for days now. Any help would be much appreciated.
HTML:
<html>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">SeeMore</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See
More</button>
<button href="#" type="button" class="btn btn-primary btn
sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 pull-left mb-3">
<div class="flip-container">
<div class="flipper">
<div class="front bg-dark">
</div>
<div class="back">
<div class="bg-dark mystyle text-center py-3" >
<h5>Restaurant</h5>
<h5>10 Reviews<h5>
<h5>Average Rating: 4.5/5 </h5>
<button href="#" type="button" class="btn btn-primary btn-sm">See More</button>
<button href="#" type="button" class="btn btn-primary btn-sm">Reviews</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
.mystyle{
height: 90px;
width: 254px;
color: white;
font-size: smaller;
padding: 5px 5px 5px 5px;
border-radius: 10px;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: 1s;
-webkit-transition: 1s;
text-align: left;
overflow: hidden;
background-color: white;
z-index: 5;
}
.flip-container{
perspective: 1000px;
}
.flip-container:hover .flipper ,
.flip-container.hover .flipper{
transform: rotateY(180deg);
}
.flip-container:hover .flipper .mystyle,
.flip-container.hover .flipper .mystyle{
height: 150px;
width: 254px;
background-color: grey;
color: white;
position: relative;
z-index: 5;
margin-bottom: 100px;
}
.flip-container,
.front,
.back{
height: 100px;
width: 254px;
}
.flipper{
transition: 1s;
transform-style: preserve-3d;
}
.front,
.back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
You need to set the z-index at the outer container:
.flip-container:hover{
position:relative;
z-index:1;
}
Demo: https://jsfiddle.net/lotusgodkk/r62wxp4L/3/
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