I am practice making a mobile website with ReactJS and Bootstrap 4 and need to create a Navbar as below.
Normal
Normal Menu:
Collapse
Collapse Menu:
So far I was able to figure out how to exclude items from the collapse menu by putting them in another div in the NavBar outside the collapse one, but the output still did not match my desire look. Also, when the NavBar in collapse mode expand, it push my content below it down, which is not what I need. I have a logo above the NavBar so I cannot use fixed-top. Here is what I have so far:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo">
<nav class="navbar navbar-dark navbar-expand-lg navbar-template">
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark">
<li class="nav-item"><a class="nav-link" href="#">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-flex flex-row order-2 order-lg-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav flex-row">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
<li class="nav-item ml-auto"><img class="nav-link px-2" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></li>
</ul>
</div>
</nav>
<div class="container"></div>
Is there anyway to achieve the NavBar that I need? More specifically, exclude some item from the collapse menu, change some item position when the NavBar turn into collapse, and stop it from pushing the content below down?
So you need to play with media query a little to hide some element and show other.
1st thing I made is to igve your main logo is own container to fix
it on the top.
2nd was to take the collopase button out from the div you added.
3rd I added to 2 div after main menu to show elements when screen
under 992px.
4th I added My name to your main menu to and play again with display
to show it.
You will obviously need to change all class to className to make it work correctly.
Hope it is coming quite close to the question
.container-logo{
width:100%;
display:flex;
justify-content: center;
}
#navbarNavDropdown{
position: absolute;
top: 116px;
}
ul.navbar-nav{
padding: 0 15px;
}
#media (min-width: 992px){
#navbarNavDropdown{
position: relative;
top: 0;
}
ul.navbar-nav{
padding: 0;
}
.d-lg-list-item {
display: list-item!important;
}
}
.logo-main{
width:100px;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-logo">
<img id="logo-main" src="https://media.istockphoto.com/vectors/cyclist-design-bicycle-line-art-vector-design-bike-cyclist-design-vector-id1133978305?b=1&k=6&m=1133978305&s=170667a&w=0&h=XL6qa5ZNvRaT6OP4SS8ZG60O5TwfWZnIczIrHfgIJ7M=" width="100" alt="Logo Thing main logo" />
</div>
<nav class="navbar navbar-dark bg-dark navbar-expand-lg navbar-template">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
<ul class="navbar-nav ml-auto bg-dark list-unstyled">
<li class="nav-item"><a to="/main/menu" class="nav-link">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="#">Account</a></li>
<li class="nav-item"><a class="nav-link" href="#">Send</a></li>
<li class="nav-item"><a class="nav-link" href="#">Transaction History</a></li>
<li class="dropdown-divider"></li>
<li style="display:none;" class="d-lg-list-item nav-item"><a class="nav-link" href="#">My Name</a></li>
<li style="display:none;" class="d-lg-list-item dropdown-divider"></li>
<li class="nav-item"><a class="nav-link" href="#">Logout</a></li>
</ul>
</div>
<div class="d-lg-none mx-auto"><a class="nav-link" href="#">My Name</a></div>
<div class="d-lg-none"><img class="logo-main" src="https://media.istockphoto.com/vectors/cycling-line-icon-vector-id1030341646?b=1&k=6&m=1030341646&s=170667a&w=0&h=0f5Rn6rhIduqX47fTg168axHZK7MlhbiRBt7s_AsOZc="/></div>
<!--<div class="flex-row order-2 order-lg-3">
<ul class="navbar-nav flex-row list-unstyled">
<li class="nav-item"><a class="nav-link px-2 name" href="#"><h4>Mr.ABC</h4></a></li>
</ul>
</div> -->
</nav>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget lacus vel justo porta ornare cursus finibus ligula. Quisque et neque cursus, finibus dui non, aliquam ex. Donec tincidunt interdum augue a scelerisque. Suspendisse congue semper odio. Vivamus in felis at lorem consectetur cursus. Fusce accumsan dignissim turpis, in ornare quam dictum ut. Aenean vel pretium risus. Ut ut tempus erat. Quisque eros risus, bibendum ac erat quis, semper hendrerit libero.
Aliquam et placerat augue. Ut sed ex arcu. Duis dapibus faucibus est posuere imperdiet. Sed et faucibus purus. Donec ex ex, facilisis id velit quis, congue eleifend nunc. Etiam sed leo orci. In molestie pharetra lacus, maximus dictum nunc iaculis nec. Aenean nisi ipsum, finibus nec ligula id, ultricies luctus orci. Quisque quis metus non nulla tincidunt tempor fringilla ac elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed facilisis, ligula id faucibus lacinia, metus tellus sagittis turpis, eget aliquet elit felis non risus. Nunc lacus dui, posuere non nisl a, eleifend facilisis ipsum. Fusce in leo nibh. Duis condimentum blandit lobortis. Fusce maximus risus eget urna sodales luctus.
Etiam rhoncus ornare dui, vel vehicula leo pellentesque sed. Curabitur in odio enim. Curabitur ut ullamcorper mi. Suspendisse condimentum sapien quis tortor auctor elementum. Donec ac euismod neque. Nunc eget sapien a purus viverra tincidunt. Mauris rhoncus arcu ut diam maximus malesuada. Mauris scelerisque mattis lectus sed venenatis. Ut viverra diam in eros lacinia, sit amet blandit nisl tempus. Aliquam condimentum magna et massa fringilla, nec facilisis odio fringilla. Etiam ultrices, mauris ut elementum sodales, sem justo ultricies orci, vitae fringilla dui magna ut sapien. Phasellus posuere lacus nec leo ornare rutrum.
Suspendisse neque lectus, fringilla quis dui in, feugiat scelerisque turpis. Aliquam porta turpis nulla, sit amet volutpat ex suscipit ac. Sed nec neque vel nibh porttitor laoreet. Quisque convallis dolor sem, non fermentum justo tincidunt sit amet. Aliquam vitae est elit. Cras eros felis, dignissim eget suscipit vel, facilisis et lorem. Morbi vitae tempus lorem. Aenean et ullamcorper orci. Nullam in finibus urna. Sed interdum vel libero at mattis. Nulla suscipit, massa in pharetra dapibus, massa metus mattis dui, quis efficitur quam est vitae arcu. Sed congue tristique suscipit. Praesent eget nibh volutpat, laoreet mi a, facilisis dui. Donec quis tellus et magna accumsan bibendum. Integer ullamcorper nibh non elit malesuada varius. Proin id laoreet mi.
Proin pharetra nibh non metus aliquam, tempus elementum felis ultricies. Mauris et enim nibh. Donec sit amet mi eu purus ultricies aliquam eget nec nibh. Cras velit nunc, viverra ut iaculis sit amet, molestie sed turpis. Etiam posuere quis enim ac ultrices. Quisque justo mi, vestibulum at enim at, suscipit pretium arcu. Aliquam vulputate ipsum mattis gravida laoreet. Nullam nulla ante, egestas viverra ligula nec, molestie luctus lorem. Phasellus convallis nulla et dignissim cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras bibendum condimentum nunc, ut maximus lectus blandit et. Curabitur elementum tellus risus, non semper odio hendrerit id. Mauris faucibus luctus suscipit. Nullam sed ultrices enim. Aenean facilisis risus id arcu consequat, a fringilla sapien elementum.
</div>
</body>
Related
Using Bootstrap 5, I've got a sticky nav, which works as expected, but I need to display a hanging div (.chat-tag) directly underneath the sticky nav for a chat feature. This "hanging tag" should remain attached to the sticky nav when the user scrolls down the page.
It seems to display properly at widths of 992 and below, but for desktop, it appears in the same row as the top navigation.
Here's what I have so far, which I've also posted to Codepen:
https://codepen.io/Codewalker/pen/vYRoXdB?editors=1100
nav {
background-color: red;
height: 48px;
position: sticky;
top: 0;
}
.main-nav {
display: -webkit-flex;
display: inline-flex;
-webkit-justify-content: center;
}
.masthead-fluid {
background-color: #F7CAC9;
}
.masthead {
height: 60vh;
display: inline-flex;
align-items: center;
}
.chat-tag {
background-color: #B565A7;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
<div class="container-fluid">
<div class="nav-wrapper text-center">
<nav class="main-nav navbar navbar-expand-lg bg-white">
<div class="container-fluid text">
<a class="navbar-brand" href="#">
LOGO
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#what">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#registry">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</div>
<div class="chat-tag">Chat with us</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid masthead-fluid mb-5">
<div class="row">
<div class="col-12">
<div class="color-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-12 masthead">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
nulla facilisi nullam vehicula ipsum.</p>
<p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>
<p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>
<p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>
<p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
This is a rare case where I'd resort to absolute positioning rather than trying to dance with flexbox.
.chat-tag {
position: absolute; /* <------------- HERE */
top: 100%; /* <------------------ AND HERE */
background-color: rgba(181, 101, 167, 0.5); /* for fun | #B565A7 */
transition: all 0.3s; /* for fun */
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 200px;
}
.chat-tag:hover {
background-color: rgba(181, 101, 167, 1); /* for fun */
}
nav {
background-color: red;
height: 48px;
position: sticky;
top: 0;
}
.main-nav {
display: inline-flex;
}
.masthead-fluid {
background-color: #F7CAC9;
}
.masthead {
height: 60vh;
display: inline-flex;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
<div class="container-fluid">
<div class="nav-wrapper text-center">
<nav class="main-nav navbar navbar-expand-lg bg-white">
<div class="container-fluid text">
<a class="navbar-brand" href="#">
LOGO
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#what">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#registry">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</div>
<div class="chat-tag">Chat with us</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid masthead-fluid mb-5">
<div class="row">
<div class="col-12">
<div class="color-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-12 masthead">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
nulla facilisi nullam vehicula ipsum.</p>
<p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>
<p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>
<p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>
<p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>
I have a page in Bootstrap 4. When I added the footer a vertical scrollbar is coming. I don't want the vertical scrollbar. I want the whole page including the footer to adjust within the viewport height. How can I achieve this. Here is the jsfiddle.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Demo</a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="my-1 mx-2 close">X</span>
<span class="navbar-toggler-icon">☰</span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Menu 1
</li>
<li class="nav-item">
Menu 2
</li>
<li class="nav-item">
Menu 3
</li>
<li class="nav-item admin">
Menu 4
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet orci quis erat imperdiet condimentum vel eu sapien. Morbi convallis sapien et molestie finibus. Fusce eleifend vitae orci eget porta. Etiam malesuada facilisis iaculis. Ut tempus, sem quis tincidunt condimentum, risus ligula vestibulum mi, sit amet imperdiet mauris ex id augue. Sed sed dictum velit. Etiam varius elit et odio vulputate, sit amet interdum tellus sagittis. Morbi vulputate leo a dolor consequat tempor. Nam sed auctor nisi. In luctus eleifend laoreet. Morbi id nisl non ex fringilla tincidunt. Suspendisse eget venenatis tortor.
Proin eu consectetur magna. Aliquam erat volutpat. Aenean vehicula imperdiet aliquam. Nam a sem vel est tristique laoreet. Aenean nisl dolor, tempor in iaculis ac, efficitur at lorem. Proin scelerisque ipsum ut sapien luctus, id viverra tellus ornare. Cras lorem tortor, ultricies hendrerit vulputate quis, tincidunt in ipsum. Nam nec dolor dolor. Donec quis felis laoreet, feugiat purus et, imperdiet tortor. Cras non pulvinar leo, nec lobortis mi. Phasellus pellentesque placerat auctor. Suspendisse a urna vel ipsum faucibus hendrerit eget sit amet leo. Etiam consequat ex eget pulvinar pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam aliquam, tellus nec consequat faucibus, dui felis condimentum nulla, quis elementum massa turpis et felis.
</div>
<div class="footer">
Ⓒ 2021 All rights reserved T
</div>
</body>
</html>
I gave the height in percentage and was able to solve the problem.
.container-fluid{
height: 93%;
}
.footer{
height: 7%;
}
I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?
For the sticky header, you add the class to header instead of nav as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this
Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<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>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
here is the problem
I have multiple divs that I want to be the height of the screen.
I achieved that but my problem now is that my div don't stop resizing even if my content is bigger than the div. The example speaks for itself
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid h-100">
<div class="h-100">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 1
</div>
</div>
</div>
<div id="photos" class="h-100">
<div class="custom-container h-100 justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact" class="h-100">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
</div>
as you should see on small snippet's small window the text is out of bound so what I would like to achieve is a div of full height when content is smaller or equal to full height and if the content is larger than full height then my div should automatically get size of content.
Is this possible to do that? Is the overall way I'm doing this is correct?
html,
body {
width: 100%;
height: 100%;
}
.orange {
color: #FF9800;
}
#media (max-width: 979px) {
.custom-container {
padding-top: 61px;
}
}
.custom-container {
display: flex;
min-height: 100vh;
height: auto;
border: 1px solid black;
padding-top: 61px;
}
.inner {
padding: 5%;
border: 1px solid white;
}
.container-fluid {
overflow-y: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a id="logo" class="nav-link col col-md-2 orange">Label</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="col col-md-8 navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<div id="services" class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
<div id="photos">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10 orange">
not out of bound 2
</div>
</div>
</div>
<div id="contact">
<div class="custom-container justify-content-md-center">
<div class="inner col-md-10">
<div class="row orange">
out of bound when screen size is small
</div>
<div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
tempus lectus et lobortis.
</div>
</div>
</div>
</div>
I have changed the code, so that the div gets the height of the content, if it is larger than the screen height. Just change the height declaration of .custom-container to "auto" instead of "100%" and the min-height decaration to "100vh". You can remove the other h-100 classes in your code then.
Even though a div is a block element, its height is always the height of its content. If you want to have a full screen height (which means viewport height), you have to change 100% to 100vh (vh = viewport height).
Depending on your desired outcome you could do:
.custom-container {
display: flex;
min-height: 100%;
height: 100%;
border: 1px solid black;
padding-top: 61px;
/// Add Overflow control
overflow-y: scroll;
}
I have a vertical navbar which serves as a menu in my asp.net MVC5 project. In a css stylesheet I defined it's position:fixed; to be able to see it all the time. On the other part of my web page I have a partial view that changes according to menu selection. My problem is that when the partial view is too large, when I horizontally scroll to see what's missing, the text overlaps with the navbar.
Here is a sample from my navbar in a file called _Menu.cshtml:
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDoc" style="height: 0px;">
<ul class="nav nav-list">
<li>Documentation 1.1</li>
<li>Documentation 1.2</li>
<li>Documentation 1.3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
In the _Layout.cshtml, I have the following inside of <body> tag :
<div class="container-fluid">
<div class="row affix-row">
<div class="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
#Html.Partial("~/Views/PartialViews/_Menu.cshtml")
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
#RenderBody()
</div>
</div>
</div>
Finally the css:
.sidebar-nav{
position: fixed; //Center works but then my navbar is not fixed anymore!
}
I use bootstrap to separate both parts of my page, hence having the menu on the left, and the body (or partial views of menu links) on the right. I know that making the navbar position different will solve the problem. But I'd like to have a fixed navbar, that would not be fixed horizontally OR have the text on the right part of my page go behind the navbar. Any ideas on how to do this?
Here's what it looks like (note the IpAdress doesn't show, so page isn't filled really, and please admire my drawing skills :p)
You might want to try using a z-index, or use a filler div, that will act as a spacer at the top between your content and your menu. Example below.
.sidebar-nav{
position: fixed; //Center works but then my navbar is not fixed anymore!
width: 100%;
z-index: 1;
}
#filler {
display: block;
height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav" id="sidenav01">
<li class="active">
<a href="#" data-toggle="collapse" data-target="#toggleDoc" data-parent="#sidenav01" class="collapsed">
<span class="glyphicon glyphicon-folder-close"></span> Documentation <span class="caret pull-right"></span>
</a>
<div class="collapse" id="toggleDoc" style="height: 0px;">
<ul class="nav nav-list">
<li>Documentation 1.1</li>
<li>Documentation 1.2</li>
<li>Documentation 1.3</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row affix-row">
<div id="filler"></div>
<div iclass="col-sm-4 col-md-4 col-lg-4 col-xl-4 affix-sidebar">
<!-- #Html.Partial("~/Views/PartialViews/_Menu.cshtml") -->
<p>Bunchotext</p>
</div>
<div class="col-sm-8 col-md-8 col-lg-8 col-xl-8">
<!-- #RenderBody() -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae semper tortor, non efficitur nulla. Pellentesque elementum augue arcu, quis fermentum elit vestibulum eu. Curabitur ornare volutpat turpis, vitae pellentesque ex commodo lacinia. Sed venenatis dui nisi, sed feugiat dui hendrerit a. Nullam rutrum libero at mauris pellentesque bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum volutpat efficitur arcu, nec eleifend ante consectetur vitae.
In hac habitasse platea dictumst. Ut ornare, nisl non pharetra ultricies, arcu sapien porttitor ligula, vitae pellentesque diam tellus vitae urna. Sed eget tempus orci, sit amet egestas nisl. Nam sed aliquet ex, vel consequat magna. Aliquam enim diam, sollicitudin ut metus ut, accumsan dictum nunc. Phasellus dictum ultrices leo, tempus elementum nisl commodo eu. Ut efficitur turpis id dui accumsan lobortis. Fusce semper venenatis orci in dapibus. Ut id dolor et diam sagittis mollis. Nam vulputate tincidunt enim, vel facilisis leo ultricies eget. Mauris accumsan at diam id imperdiet. Integer gravida, nisi eget accumsan consectetur, purus quam suscipit est, maximus ullamcorper lectus lorem non velit. In interdum nec lectus et luctus. Donec congue malesuada tellus, vel auctor magna egestas non.
Nulla hendrerit, velit a euismod blandit, enim ex ultricies elit, ac aliquam massa tortor vitae erat. Mauris rutrum hendrerit nisl vel finibus. Sed aliquam eget arcu eget egestas. Nullam a auctor ante. Donec a nibh fringilla, ornare nibh ac, posuere felis. Pellentesque condimentum suscipit vestibulum. Fusce quis sapien non ex mattis ultricies et sit amet metus. Phasellus at nunc sollicitudin, tristique nunc eget, sodales augue. Praesent sagittis justo eget placerat feugiat.
Fusce aliquet enim eget venenatis fringilla. Suspendisse imperdiet, tellus eu pretium fringilla, ligula ante fermentum dui, in venenatis erat risus nec erat. Curabitur libero dolor, semper eu eros sit amet, eleifend accumsan diam. Fusce dui ante, pellentesque vitae nisl at, dapibus consectetur arcu. Mauris rhoncus nisl nec leo sollicitudin, eu fermentum nisi sodales. Quisque magna dolor, consequat sed ultricies dignissim, ullamcorper eu dui. Fusce vitae est sed augue ornare finibus. Aenean a eleifend ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc dapibus malesuada nulla ac dignissim. Nulla scelerisque diam vel neque consequat, tempus facilisis eros tempor. Ut pellentesque urna vitae tellus imperdiet, a sagittis ipsum condimentum. Nullam in purus ut nisl porttitor porttitor nec eget metus. Sed maximus nisl arcu. Suspendisse ut egestas ipsum, ut varius nisi.
Nulla lacus neque, suscipit quis odio ac, accumsan molestie nisi. Vestibulum quam quam, bibendum non velit eu, faucibus laoreet sem. Aliquam auctor rhoncus ultrices. Nullam a sem sagittis, accumsan risus eu, auctor nisl. Nam vestibulum lobortis sagittis. Nunc vel ultricies sem, et convallis nulla. Mauris elementum imperdiet lorem, non maximus enim. Suspendisse dictum turpis massa, at bibendum neque ultrices ac. Sed sodales tempor augue et molestie. </p>
</div>
</div>
</div>