I believe my background img is creating a blank space between it and my flexbox sticky footer. I’ve tried numerous ways, but they just create different problems so far... Can someone help? I created a placeholder image that’s the size of my original background img to recreate the problem for you! Thanks!
JS Fiddle Link
CSS:
.masthead {
height: 100vh;
min-height: 100%;
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder%27');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Sticky Footer Classes */
body
{
display: flex;
flex-direction: column;
}
html, body
{
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
}
This can be solved in multiple ways,
Method 0: I think there is some unwanted text content before the Footer tag. If that text content is intentional then move to Method 2 else do this
Remove this below code snippet which under the <body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
Method 1: Moving the footer towards the place where the content ends.
#sticky-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
or Method 2: In the style .css file Move the CSS background-image description defined under the class .masthead to the body
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
(use this in body not in .masthead)
This Blank space is your page-content.
You need to add this to your header:
.masthead {
position: absolute;
width: 100%;
margin-top: 56px; // your navbar height
}
Also add this to show your footer:
#sticky-footer {
z-index: 1;
}
If you want to center your content vertically add this classes to your page-content:
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
See the snippet:
.masthead {
height: 100vh;
min-height: 100%;
background: ;
/* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
/* added */
width: 100%;
/* added */
}
/* Sticky Footer Classes */
body {
display: flex;
flex-direction: column;
}
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
z-index: 1/* added */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="#">website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blogs">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#music">Music</a>
</li>
</ul>
</div>
</div>
</nav>
<!--—Full Page Image Header with Vertically Centered Content —-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 class="font-weight-light">website</h1>
<p class="lead">2nd line</p>
</div>
</div>
</div>
</header>
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © website</small>
</div>
</footer>
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 having an issue with parallax effect on mobile. In fact it seems like that total body size is > 100vh (it also appear the scroll bar o the side). Obv if I change overflow-y from auto to hidden, it fix the problem but it also cut out part of the page. On desktop it doesn't happen. Can anybody help me?
Screenshot:
https://imgur.com/a/n9wMmqN
.selector-for-some-widget {
box-sizing: content-box;
}
header .carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
background-size: cover;
}
body {
margin: 0;
background-color: white;
font-family: 'Open Sans', sans-serif;
min-height: 100%;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 75px);
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2.5);
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-family: 'Montez', cursive;
color: white;
text-align: center;
}
section {
background-color: white;
}
.navbar {
height: 75px;
font-size: 1.25rem;
letter-spacing: 3px;
font-weight: bold;
}
.navbar-brand {
font-size: 1.75rem;
letter-spacing: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/styles.css">
<title>Ariano Francesco Photography</title>
</head>
<body>
<div class="wrapper">
<header>
<div id="carouselExampleControls" class="carousel slide background" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('img/carousel_1.jpg')">
</div>
<div class="carousel-item" style="background-image: url('img/carousel_2.jpg')">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="title">
<h1>Ariano Francesco</h1>
<h2>Photography</h2>
</div>
</header>
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
<div class="container px-5">
<a class="navbar-brand" href="#">AFR</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex text-center align-items-center">
<ul class="navbar-nav justify-content-end flex-grow-1">
<li class="nav-item ms-2">
<a class="nav-link active" aria-current="page" href="index.html">Gallery</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container px-5">
<div class="text-center mt-5">
<h2 class="fw-bold fade-in">Gallery</h2>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-12">
<a href="img/_IMG1556.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1556.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1594.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1594.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG1491.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1491.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1558.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1558.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG74c91.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG74c91.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1510.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1510.jpg" class="img-fluid rounded mb-4">
</a>
</div>
</div>
</div>
<footer class="text-center text-muted">
<div class="container px-5">
<div class="mb-4 border-bottom">
<a class="btn btn-floating m-3" href="https://instagram.com/_afr.photo" role="button"><i
class="bi bi-facebook"></i></a>
<a class="btn btn-floating m-3" href="https://www.facebook.com/ArianoFrancescoPH" role="button"><i
class="bi bi-instagram"></i></a>
</div>
<div class="mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Contact
</h6>
<p>
Castagnole delle Lanze, AT
</p>
<p>
franci.ariano#gmail.com
</p>
<p>
339 2350792
</p>
</div>
</div>
<div class="p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="www.afr.altervista.org">Ariano Francesco Photography</a>
</div>
</footer>
</section>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Lightbox for Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.11/dist/index.bundle.min.js"></script>
<!-- Script.js -->
<script src="js/script.js"></script>
</body>
</html>
Look at this answer: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
body {
background-color: #333;
}
.module {
height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
max-width: 30%;
}
.module__item {
align-items: center;
display: flex;
height: 20%;
justify-content: center;
}
.module__item:nth-child(odd) {
background-color: #fff;
color: #F73859;
}
.module__item:nth-child(even) {
background-color: #F73859;
color: #F1D08A;
}
<div class="module">
<div class="module__item">20%</div>
<div class="module__item">40%</div>
<div class="module__item">60%</div>
<div class="module__item">80%</div>
<div class="module__item">100%</div>
</div>
Fix 100vh Issue on Mobile Devices Using CSS Only
Sometimes, the purpose of using vh unit is to simply create sections equal to the height of the viewport. This is common when you are building landing pages, for instance. In these situations, position sticky won’t help and I want to introduce the fill-available property. It’s easy to use, just remember to use the prefixes and the fall-back value:
.layout {
min-height: 100vh; /* fall-back */
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
Just as simple as that!
I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.
By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm
My navbar is getting on top of my sidebar. What I needed was that the side bar "was over" the navbar, so that when the side bar colpasse, the nav bar would be visible.
As the sidebar will collapse, the navbar will need to appear when this happens. To the way it is, it looks like the sidebar gets cut, and ends up losing a space in the sidebar
Side bar/ nav bar image:
<nav class="navbar navbar-light fixed-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand " href="#"> </a>
<img src="~/Content/img/Principal_h_cor_RGB.png" alt="Logo" style="width:150px;">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
</li>
</ul>
</nav>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand text-center">
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header text-center">
<h6 style="text-align:center">
<img src="~/Content/img/boat_block2.png " alt="Logo" style="width:70px;" />
</h6>
<div class="user-info">
<span class="user-name">
<strong>#Html.Partial("_LoginPartial")</strong>
</span>
<!-- <span class="user-role">Administrator</span> -->
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
</div>
</div>
</div>
</nav>
<script>
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
padding-top: 45px;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
Just change the Z-Index of the fixed-top to 10
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 10;
}
I have read a lot of posts about this but I still didn't find an answer.
I have a footer that I want to be at the end of the page, not fixed.
The problem is that the footer is where the content ends. Look at picture.
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> Mobtech - Privatni korisnici </title>
<!--Ubaci bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="css/basic-template.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
</head>
<body>
<!--Navigation bar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-container">
<span class="sr-only"> Pokazi i sakrij navigaciju </span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span> <img src="Slike/logo.png" alt="LogoSlika"/> </span>
<font face="Roboto Condensed" size="4" color="green"> Mobtech </font>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-container">
<ul class="nav navbar-nav navbar-right">
<li> Početna strana </li>
<li class="active"> Privatni korisnici </li>
<li> Poslovni korisnici </li>
<li> Uređaji </li>
<li> O Nama </li>
</ul>
</div>
</div>
</nav>
<br />
<div class="container"> <!--Container -->
<div class="row">
<!-- Kolona na velikom ekranu (lg) prikazuje duzinu jedne kolone, Ekstra small (xs) prikazuje 4 kolone -->
<div class="col-lg-12 bg-success">
<p> Outer div </p>
<div class="col-lg-6 bg-primary">
<p> Inner div </p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mojFooter">
<font face="Roboto Condensed" size="4"> <center>
<div class="container">
<div class="row" style="margin-top: 7px;">
<p> © Copyright Ivan Prošić 2016.</p>
</div>
<div class="bottom-footer">
<div class="col-md-12">
<ul class="footer-nav">
<li> Facebook </li>
<li> Twitter </li>
<li> Google+ </li>
</ul>
</div>
</div>
</div>
</font> </center>
</footer>
<!-- JavaScript fajl -->
<script src="js/jquery.min.js"></script>
<!-- Kompresovan JavaScript fajl -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is my CSS, for the footer only:
.mojFooter{
background-color: #f8f8f8;
color: #00a651;
padding-top: 0px;
border-top: 1px solid #e7e7e7;
margin-bottom: 0px;
}
.bottom-footer{
border-top: 1px solid #00a651;
margin-top: 0px;
padding-top: 7px;
color: #00a651;
}
.footer-nav li{
display: inline;
padding: 0px 40px;
}
.footer-nav a{
color: grey;
text-decoration: none;
}
When using bootstrap 4 or 5, flexbox could be used to achieve desired effect:
<body class="d-flex flex-column min-vh-100">
<header>HEADER</header>
<content>CONTENT</content>
<footer class="mt-auto"></footer>
</body>
Please check the examples: Bootstrap 4 Bootstrap 5
In bootstrap 3 and without use of bootstrap. The simplest and cross browser solution for this problem is to set a minimal height for body object. And then set absolute position for the footer with bottom: 0 rule.
body {
min-height: 100vh;
position: relative;
margin: 0;
padding-bottom: 100px; //height of the footer
box-sizing: border-box;
}
footer {
position: absolute;
bottom: 0;
height: 100px;
}
Please check this example:
Bootstrap 3
In my case for Bootstrap4:
<body class="d-flex flex-column min-vh-100">
<div class="wrapper flex-grow-1"></div>
<footer></footer>
</body>
You can just add:
style="min-height:100vh"
to your page content container and place the footer in another container
Use this stylesheet:
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}
© 2021 Company, Inc
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<ul class="nav col-md-4 justify-content-end">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
:root {
--text: #daf7a6;
--header: #581845;
--main: #900c3f;
--footer: #ff5733;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
header,
main,
footer {
color: var(--text);
height: 100px;
padding: 1rem;
}
header {
background-color: var(--header);
}
main {
background-color: var(--main);
}
footer {
background-color: var(--footer);
position: sticky;
top: 100vh;
}
<header>header</header>
<main>content</main>
<footer>footer</footer>