I am building a page with fixed Navigation bar and Footer (for log information). Both the content and the Footer can scroll if needed. Thanks to some thinkering and all who answered my previous question I managed to create the code at the end of the question (with Bootstrap 4 and jQuery).
The problem I see is that the footer still shrinks if I resize the textarea by hand. I'd expect to see a scrollbar appear on the main content, but not the footer to shrink.
I've also added a couple of lines on the main content and noticed that it overflows (the text goes out the beige part. If I resize the textarea it goes back inside (that is, the text has the beige background again).
What am I doing wrong?
JFiddle here: Fiddle
See previous question here:enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
footer {
background: lightgreen;
height: 100px;
}
textarea {
height: calc(100% - 147px);
}
</style>
</head>
<body>
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-0 bg-primary">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tools
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item dropdown-item-template" href="/">Editor</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col">
<div class="row h-100">
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
<div class="row">
Execute external commands:<br />
<button id="testbtn" class="btn btn-primary">TEST</button>
<button id="btnclear" class="btn btn-primary">Clear Console</button>
</div>
<div class="row flex-grow-1" style="background-color: beige;">
<textarea class="w-100">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?</textarea>
ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />ab<br />
</div>
</div>
<div class="col-2">
<div class="row">
<li>
<ul>aa</ul>>
<ul>aa</ul>>
</li>
</div>
</div>
</div>
</div>
</main>
<footer class="container-fluid overflow-auto">
<div class="row">
<div id="data" class="col p-1">test<br/>to<br/> fill<br/> the<br/> console<br/> log<br/></div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 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.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.min.js"
integrity="sha512-8vfyGnaOX2EeMypNMptU+MwwK206Jk1I/tMQV4NkhOz+W8glENoMhGyU6n/6VgQUhQcJH8NqQgHhMtZjJJBv3A=="
crossorigin="anonymous"></script>
</body>
</html>
If you resize one flex element, the others also resizes. To prevent resizing the footer add the classes "flex-shrink-0" and "flex-grow-0" and set the flex-basis of the footer to 100px.
<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
footer {
background: lightgreen;
height: 100px;
flex-basis: 100px;
}
to make the overflowing part beige you can replace
<div class="col-10 d-flex flex-column" style="background-color: bisque;">
and
<div class="row flex-grow-1" style="background-color: beige;">
with
<div class="col-10 d-flex flex-column" style="background-color: bisque; position: absolute;">
and
<div class="row flex-grow-1" style="background-color: beige; position: relative;">
footer {
background: lightgreen;
min-height: 4rem;
max-height: 4rem;
}
it will work fine :)
Related
<!--Top Navbar / Search-->
<div class="grid grid-rows-1 grid-cols-3 h-20">
<div class="col-span-1 h-full w-64 bg-purple-200">
Logo Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Search Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Profile Area
</div>
</div>
<!-- Sidebar / Content-->
<div class="grid grid-rows-1 inline-grid grid-cols-2 h-screen">
<div class="col-span-1 h-full w-64 bg-purple-200">
Sidebar Area
</div>
<div class="col-span-1 h-full w-full bg-purple-100">
Content Area
</div>
</div>
The above is the code I am using, I can get this working easily in vanilla CSS.
I am using the above to begin building the Grid structure of a admin-esk design.
However, I am unable to get this working correctly, visable on the print-screen:
The width of the columns, specifically the content column isn't filling the width.
The height seems to break, and add overflow to the page, adding the scrollable extra.
I can't seem to get the search area to fit next to the Logo area.
This is so much easier in vanilla CSS, Tailwind has made this harder.
It's gets much easier when you play around with Tailwind. See a working demo on tailwind play.
Keep me posted in the comments below if your expectations were different than the code I wrote.
<div class="flex min-h-screen max-h-screen">
<!-- Left Navigation -->
<div class="flex flex-col w-64">
<!-- Logo -->
<div class="h-20 flex justify-center items-center bg-purple-300">Logo Area</div>
<!-- Sidebar -->
<div class="flex flex-1 bg-red-200 overflow-y-auto">
Sidebar Area
<br />
<br />
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla at aperiam sunt, quae voluptates blanditiis sed natus nostrum facilis in, rerum ipsa molestiae maxime veniam, accusantium quo facere totam deserunt! Fugit, molestias? Veritatis aspernatur consectetur ipsum fugit molestias reiciendis voluptatem, atque quisquam molestiae error sunt voluptatibus eum, quae blanditiis doloribus? Adipisci, impedit? Eaque earum est officiis excepturi non necessitatibus perferendis. Dolor iusto perferendis incidunt nesciunt sit officiis, dolorum possimus et tempora itaque laudantium ipsa non porro ratione omnis ducimus, voluptatem quos. Voluptatum consectetur officiis magni veritatis, possimus nesciunt quidem cumque! Cumque quisquam maxime libero suscipit veritatis qui a culpa voluptate quos modi repellendus sed est commodi ea, nihil rem laboriosam unde. Voluptatibus corrupti est quia quaerat officiis, eos deleniti deserunt. Optio aperiam velit molestiae, quasi repellendus voluptate sequi? Omnis, repudiandae suscipit perferendis ullam dignissimos labore aut! Veniam fugit earum dignissimos quos quasi, nam obcaecati laboriosam ut placeat recusandae ullam. Hic.
</div>
</div>
<!-- Right Component -->
<div class="flex flex-1 flex-col">
<!-- Header -->
<div class="h-20 flex">
<div class="flex flex-1 justify-center items-center bg-indigo-200">Search Area</div>
<div class="flex flex-1 justify-center items-center bg-blue-200">Profile Area</div>
</div>
<!-- Content -->
<div class="flex flex-1 overflow-y-auto bg-green-200">
Content Area
<br />
<br />
Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita repellat odit quas, ipsum sapiente recusandae, exercitationem illo dolorem nulla aut, porro ea. Optio, omnis eum? Beatae dolorem odit quae fugiat. Quod nobis tempore mollitia minima repellendus atque quisquam? Quae maiores neque deserunt ad enim impedit rerum, dolorum dolor nulla porro ea ducimus officia repellat assumenda dicta in reprehenderit amet hic? Officiis incidunt quis ipsum nesciunt eum eos aspernatur modi, temporibus ut nisi! Optio quaerat odit, suscipit, quisquam et laboriosam adipisci labore quidem reprehenderit eum earum temporibus odio, omnis mollitia cum. Facilis libero officiis deleniti aperiam veniam aliquam saepe consequuntur quae facere provident illum asperiores, delectus ad animi, possimus fugit aspernatur error perferendis! Quia rem laudantium nemo vero magnam, in iusto. Adipisci tempore pariatur accusantium autem soluta, repellendus eum sequi quae a. Soluta rerum vitae perspiciatis consequuntur quas? Accusantium saepe, alias aliquid voluptatibus repellendus harum expedita vel libero praesentium adipisci dignissimos? Iusto harum inventore soluta magnam esse amet? Obcaecati aliquam reprehenderit saepe ullam, doloribus natus nobis! Quaerat similique, quo voluptatibus deserunt recusandae ratione earum sequi dicta quas iste incidunt totam nam. Doloremque perspiciatis quam distinctio, vitae voluptatibus quos odit aliquam necessitatibus ipsa hic ea error in. Totam in aliquam quo voluptatem non magni earum doloribus nostrum unde! Nisi expedita temporibus ratione. Incidunt eum sint illum ullam asperiores beatae nihil eos? Dolore voluptate molestias dignissimos fuga dicta. Doloribus accusamus distinctio quia deleniti enim officia, culpa quidem, fugiat animi fuga ad iure perferendis! Ab provident sequi deserunt id eos maxime odit totam fugiat ratione. Magnam sint excepturi dicta nesciunt culpa ratione delectus voluptatem repudiandae. Veritatis minima ratione aliquid ipsum quibusdam hic dolorum nihil. Ipsum, repellendus sed mollitia deleniti voluptatum natus tenetur officiis ea non quas expedita, aperiam ducimus sequi eius voluptatibus laboriosam magnam nulla. Corrupti voluptate porro sapiente pariatur velit cum eaque beatae. Eos provident inventore nostrum libero dolores veniam dicta sunt ratione aspernatur expedita, minus iusto est atque ex. Fugit consectetur explicabo, maiores maxime possimus, perspiciatis sequi quaerat beatae obcaecati porro quibusdam? Reiciendis harum repellat nisi esse atque sit, aperiam, quas ipsa error quisquam adipisci excepturi quod earum ducimus. Illo unde similique modi qui! Fugiat ipsam magni quas praesentium non, repellat eaque? Doloribus officiis consectetur iste dolor hic distinctio ipsa aperiam nostrum provident recusandae earum minima delectus magnam, at quod, fugiat tenetur soluta quam excepturi eos est obcaecati, numquam inventore repellendus? Incidunt. Omnis, repellendus rem praesentium autem dolorum voluptas! Accusantium odio eum magnam quis, dolor ipsum suscipit mollitia blanditiis laboriosam in dicta dignissimos doloremque minus, facere deleniti harum enim ut nostrum placeat! Omnis laboriosam excepturi necessitatibus nihil eum! Dicta quam unde consequuntur eveniet provident quidem eaque recusandae cumque magnam iste. Dicta quisquam perspiciatis sint sapiente labore. Corrupti ipsa nostrum voluptatem asperiores tenetur? Corporis quasi necessitatibus iste! Laboriosam possimus tenetur dolorum unde maiores, vel et voluptas perspiciatis perferendis, ratione nam dignissimos, nesciunt amet incidunt voluptatem tempora maxime. Doloribus facere vitae commodi nam assumenda. Molestiae dolorem eos officiis nam dicta vero? Minus incidunt vero magni atque inventore eveniet sequi veniam? Deserunt exercitationem dolores quia provident mollitia dolor odio, nam cupiditate atque voluptas itaque rem! Fugiat, corporis totam porro modi eos magni expedita placeat maxime rerum. Blanditiis mollitia nemo, itaque laboriosam autem illo laborum facilis incidunt vel nulla distinctio nam molestias voluptas quaerat numquam soluta. Nam voluptatem expedita doloremque placeat, voluptate, accusantium consectetur voluptas nulla possimus, corporis at delectus tempore odio autem unde quas hic temporibus error quisquam exercitationem consequatur a saepe. Dolore, blanditiis laborum? Voluptate error, repellat neque porro quod fugiat aspernatur voluptas quidem voluptates dolores maiores, deleniti incidunt. Ullam mollitia esse beatae illo consequatur sed iusto provident, incidunt aliquam dolores a, nulla laudantium.
</div>
</div>
</div>
I'm trying to get this column to be aligned next to the Card box and have the project name right next to it. I'm trying to make it responsive so I feel that I need to have that column at the bottom of the jumbotron. How can I do that? (see picture). Thank you to anyone who replies, I'm still trying to learn bootstrap and CSS.
.jumbotron {
background-image: url("src\app\assets\image.jpg");
background-size: cover;
height: 100%;
border-radius: 0;
}
.whiteColorText {
color: white;
position: absolute;
}
aside .box {
position: relative;
}
aside .card {
position: absolute;
top: 0;
transform: translateY(-100px);
left: 0;
right: 0;
}
<div class="backgroundInformation">
<div class="container-fluid">
<div class="row">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
<p
class="col-6-md whiteColorText "
>
{{projectName}}
</p>
</div>
</div>
<div class="row">
<aside class="col-4">
<div class="box">
<div class="card shadow p-3 mb-5 bg-white rounded">
<img
class="card-img-top"
src="https://picsum.photos/600/200"
alt="Card image cap"
/>
<div class="card-body">
<div class="col">
<h5 class="card-title"><b> About</b></h5>
<p class="card-text">
{{ projectDescription }}
</p>
<h5 class="card-title"><b> Team Members </b></h5>
test1 <br />
test2 <br />
test3
<h5 class="card-title"><b> Interests</b></h5>
<!--
<ul *ngFor="let item of interests">
{{
item
}}
</ul> -->
<ul *ngFor="let item of interests">
<div class="centerObjects">
<ng-container *ngIf="item === 'Music'">
<mat-icon aria-hidden="false"> music_note </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Technology'">
<mat-icon aria-hidden="false"> desktop_mac</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Sports'">
<mat-icon aria-hidden="false"> sports_football</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Art'">
<mat-icon aria-hidden="false"> create </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Fashion'">
<mat-icon aria-hidden="false"> checkroom </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Gaming'">
<mat-icon aria-hidden="false">
sports_esports
</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Education'">
<mat-icon aria-hidden="false"> menu_book</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Business'">
<mat-icon aria-hidden="false"> business</mat-icon>
{{ item }}
</ng-container>
<span> </span>
</div>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="col">
itaque quae, minus error blanditiis corrupti optio ullam quidem
necessitatibus. Nulla eveniet unde quod deserunt cupiditate expedita
ducimus reiciendis doloribus, quae officia iusto quo, totam! Quae et
eius quisquam. Vitae quaerat, odit harum nam expedita rem mollitia et,
nihil rerum eos aut quas nostrum adipisci! Laborum nesciunt, ad saepe
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
commodi a amet. Dolorum laboriosam harum quod cupiditate in rem
veritatis saepe tempore, cumque commodi deleniti voluptate, cum quasi
nesciunt incidunt temporibus expedita aut, quisquam omnis facilis odit
sit assumenda. Labore impedit cumque eveniet quae, provident velit, eos,
rem enim esse, natus nisi voluptatum non in. Adipisci sit excepturi,
aperiam. Mollitia assumenda repudiandae ipsam saepe, maxime rerum,
fugiat! Ducimus, beatae ex aliquid! Earum ab voluptas eligendi hic
</main>
</div>
</div>
</div>
So the issue was, that the p element was placed inside a totally different row.
You need to imagine it kinda like this.
-------------------------------
[row-1]
-------------------------------
| [row-2]
|
[card] | [text]
|
-------------------------------
So what I did now is, I moved our infamous p from the first row to the second row, which consists out of two columns and put it in the second one. So now its next to the card and above the text.
<div class="backgroundInformation">
<div class="container-fluid">
<div class="row" style=" height: 100px">
<div class="jumbotron col ">
<!-- style="top: 4rem; right: -20em; font-size: 22px;" -->
<!-- position-relative offset-md-8 -->
</div>
</div>
<div class="row">
<aside class="col-4">
<div class="box">
<div class="card shadow p-3 mb-5 bg-white rounded">
<img
class="card-img-top"
src="https://picsum.photos/600/200"
alt="Card image cap"
/>
<div class="card-body">
<div class="col">
<h5 class="card-title"><b> About</b></h5>
<p class="card-text">
{{ projectDescription }}
</p>
<h5 class="card-title"><b> Team Members </b></h5>
test1 <br />
test2 <br />
test3
<h5 class="card-title"><b> Interests</b></h5>
<!--
<ul *ngFor="let item of interests">
{{
item
}}
</ul> -->
<ul *ngFor="let item of interests">
<div class="centerObjects">
<ng-container *ngIf="item === 'Music'">
<mat-icon aria-hidden="false"> music_note </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Technology'">
<mat-icon aria-hidden="false"> desktop_mac</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Sports'">
<mat-icon aria-hidden="false"> sports_football</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Art'">
<mat-icon aria-hidden="false"> create </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Fashion'">
<mat-icon aria-hidden="false"> checkroom </mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Gaming'">
<mat-icon aria-hidden="false">
sports_esports
</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Education'">
<mat-icon aria-hidden="false"> menu_book</mat-icon>
{{ item }}
</ng-container>
<ng-container *ngIf="item === 'Business'">
<mat-icon aria-hidden="false"> business</mat-icon>
{{ item }}
</ng-container>
<span> </span>
</div>
</ul>
</div>
</div>
</div>
</div>
</aside>
<main class="col">
<div class="block" style="background-color: transparent;">
<p class="col-6-md whiteColorText " >
{{projectName}}
</p>
</div>
<div style="background-color: #fff;">
itaque quae, minus error blanditiis corrupti optio ullam quidem
necessitatibus. Nulla eveniet unde quod deserunt cupiditate expedita
ducimus reiciendis doloribus, quae officia iusto quo, totam! Quae et
eius quisquam. Vitae quaerat, odit harum nam expedita rem mollitia et,
nihil rerum eos aut quas nostrum adipisci! Laborum nesciunt, ad saepe
voluptatum doloribus aspernatur dolorem! Ratione rerum, in obcaecati,
aliquam est dolor. Eos aliquam pariatur accusantium animi, reiciendis
placeat ducimus beatae sunt reprehenderit numquam unde consequuntur sint
asperiores, quasi saepe vero officiis laudantium. Doloribus possimus
quidem reprehenderit aliquid nemo dolorum perspiciatis laudantium
expedita numquam omnis! Necessitatibus consequuntur debitis minus vel
voluptate minima fugit numquam voluptatibus assumenda ab, omnis quasi
ipsam possimus aut suscipit, temporibus odio quam sit, nemo sed sapiente
facilis corrupti blanditiis. Debitis, quod? Quo, impedit nam nihil
cumque vel magnam facilis accusantium distinctio. Doloremque consequatur
aliquid id? Vero repudiandae delectus laboriosam mollitia provident
odio, numquam earum sequi deleniti recusandae nobis expedita quisquam
nihil ipsa, nam temporibus asperiores. Distinctio ratione ab minima
optio, in numquam perspiciatis asperiores velit perferendis pariatur
voluptate deleniti, veritatis enim ullam nam reprehenderit ipsam sed!
Temporibus molestiae accusamus impedit facilis amet in sed quae facere
sequi repellat quas consequatur aperiam ipsam mollitia, molestias, sit
delectus laudantium aspernatur! Fuga fugit veritatis magnam similique
laboriosam, enim sequi esse quibusdam vero sit laudantium. Repellendus
et, porro! Possimus recusandae doloribus quae unde repellendus aperiam
eligendi qui maiores tempore! Nesciunt numquam quis nihil, quam sequi
cumque quo, natus amet veniam excepturi, repellendus ipsum iure
doloremque? Nostrum cupiditate cum necessitatibus officiis harum
adipisci cumque vero accusamus autem provident quas, ex assumenda
deserunt a fugit quibusdam consequuntur error ratione placeat
perspiciatis fugiat at! Nihil minima fugiat nostrum odio nulla a,
placeat ipsa magnam ad blanditiis illo, aliquam id earum ratione vitae
consectetur, aspernatur adipisci soluta ut reiciendis quisquam
laboriosam. Similique iusto dolor dignissimos architecto animi officia,
facere quidem, sapiente tempore atque sed quisquam! Odio, nemo excepturi
quasi exercitationem. Ipsa saepe quod reiciendis perferendis rerum
officia vero delectus rem placeat commodi vel qui ab nisi doloremque
esse accusantium, inventore similique! Culpa, alias tempora dolorum
nulla veniam eveniet, ea, recusandae omnis quas cupiditate eaque ullam
beatae labore quaerat repellendus explicabo illum impedit tempore
adipisci praesentium consequatur in! Perspiciatis culpa ullam totam
consequatur unde. Harum itaque aliquid, esse fugit ipsam ipsum qui
dolore natus nulla temporibus, suscipit velit omnis. Voluptates labore
impedit consequuntur vel enim sunt iste, neque inventore explicabo et
illum expedita sint. Porro minus omnis enim, quo reprehenderit facere
iusto corporis vero, perspiciatis, suscipit perferendis commodi
accusantium laboriosam aliquam consectetur non soluta voluptatibus
repellat nostrum magnam ullam aliquid nisi unde. Sint, porro velit,
eligendi ea suscipit qui tenetur quos esse. Aspernatur, autem ullam
fugiat quod magni, vitae porro perspiciatis delectus. Aperiam, quos,
maiores? Laudantium, optio omnis perspiciatis obcaecati itaque excepturi
voluptas, culpa atque accusantium veritatis odio dolores saepe illo
incidunt aut eaque modi nihil laborum. Tempora eum placeat omnis
reiciendis cupiditate harum, odio voluptatem numquam corrupti illum
minus dignissimos cum optio. Autem libero cupiditate qui id obcaecati
repudiandae quasi, veniam temporibus ut facilis voluptatibus hic quod
tempore iste eligendi labore et, porro dolore. Voluptates sit, ullam
commodi a amet. Dolorum laboriosam harum quod cupiditate in rem
veritatis saepe tempore, cumque commodi deleniti voluptate, cum quasi
nesciunt incidunt temporibus expedita aut, quisquam omnis facilis odit
sit assumenda. Labore impedit cumque eveniet quae, provident velit, eos,
rem enim esse, natus nisi voluptatum non in. Adipisci sit excepturi,
aperiam. Mollitia assumenda repudiandae ipsam saepe, maxime rerum,
fugiat! Ducimus, beatae ex aliquid! Earum ab voluptas eligendi hic
</div>
</main>
</div>
</div>
</div>
You probably still got to fiddle a little with your CSS to make it good looking, but it's now "physically" next to your card element.
You maybe add display: block; as well as some margin or padding to the p element.
I'm trying to build a template page with a navbar and a footer where I might add later column inside the main div (container-fluid) but I get stuck with two issues.
The footer is a div that I use as a logging space. It stays fixed at the bottom and I fill it with logs every time I do an action on the page. The content might grow bigger than the space available and scrollbar appears. The navbar is a standard navbar.
The problem appears when I try to fill the container with random data or a textarea. The main div (and the body) are bigger than the main view and overflow the footer.
What am I doing wrong?
Here is the jsfiddle: link
Note that the two parts are colored just to see the issues. The lightcyan part should fill the screen above the footer or at least not grow once it hits it (you can test it by growing the textarea).
My first idea was to set html and body to 100% height, ignore navbar (not sure about its height) leave footer with its fixed height (needed this way to allow using it as a logger) and calculate the main div height. It doesn't work. Note that part of the code comes from examples taken from bootstrap's website.
<body>
<header>
<nav></nav>
</header>
<div class="container-fluid">textarea and columns here</div>
<footer>
<div class="content">connecting..</div>
</footer>
</body>
Wrap all the content of the body in a container that is flex, and its flex-direction is column.
All the parents of main container need to have 100% height.
Use .flex-grow-1 on the main container so that it takes all the available space.
Hide overflow of the main container
Scroll overflow of the immidiate child of the main container. It must be the parent of all of the main content.
body,
html {
height: 100%;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column h-100">
<header class="container-fluid">
<div class="row">
<div class="col-12 p-5 bg-primary">
</div>
</div>
</header>
<main class="container-fluid flex-grow-1 overflow-hidden">
<div class="row h-100 overflow-auto">
<div class="col bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis totam corporis alias qui repellendus optio consectetur nihil suscipit ipsa dolorem in ab, illo, hic placeat iste necessitatibus eum accusamus magni! Perspiciatis, itaque dolore, veritatis
et sequi obcaecati ipsum fuga deserunt laborum assumenda ducimus facilis pariatur explicabo? Ex veritatis placeat minus enim iure ea deserunt ut optio. Est odio a omnis! Veritatis laborum sit, ea laboriosam nihil laudantium numquam ab modi ipsam
doloribus obcaecati consectetur nam magnam non sequi illum vero facilis voluptatibus quibusdam unde sunt sapiente! Pariatur adipisci nostrum deserunt! Dolorem assumenda inventore nisi eligendi officia rerum nostrum ea voluptates esse atque deserunt
culpa ex nobis quod est, fugit molestias recusandae sint iusto ut rem cum itaque dolor magnam. Eligendi! Hic porro incidunt iure culpa necessitatibus repellendus inventore laboriosam expedita neque consectetur. Reprehenderit assumenda minima eum
laboriosam impedit, omnis esse molestias vero ut? Totam corrupti dolore excepturi fugit dolorum aliquid. Provident blanditiis quasi expedita excepturi ipsa dicta odit, aspernatur ad quisquam illo? Dolores perspiciatis magnam nulla odio rerum tenetur
inventore fuga. Quo sed eius sapiente, et eligendi blanditiis repellendus saepe! Commodi ipsa explicabo tempore. Dolor voluptas consequuntur amet vero harum nesciunt veritatis placeat? Dolorem ducimus a temporibus perspiciatis cum ipsum tempora
recusandae unde, repudiandae, nostrum esse magnam velit, consequatur debitis! Quos, ad quaerat optio cumque dolorum facere excepturi eligendi quod rerum suscipit adipisci sapiente animi? Consectetur excepturi tempora nemo libero facere pariatur
assumenda quisquam porro. In sint voluptas at maxime. Facilis eveniet voluptatem voluptas, libero saepe autem nulla sequi ducimus id quisquam quos aperiam reiciendis ipsa! Nesciunt quae, delectus laboriosam dicta nostrum dolorem inventore rerum
tempore assumenda animi numquam architecto. Ab ullam amet dolorum impedit debitis id tenetur, nesciunt, exercitationem ut natus a consequuntur harum. Modi illum assumenda earum deserunt voluptatum, non minima hic ad voluptate ullam quae maxime
expedita? Numquam rem blanditiis, ducimus commodi assumenda corrupti odit mollitia iure inventore molestiae velit quod. Itaque architecto dolores optio voluptatum porro saepe maxime, magnam, perspiciatis amet repellendus fuga eum earum voluptas?
Quasi sunt, hic consequatur non dolor dolorem, impedit perferendis autem minus labore ea maiores distinctio laudantium eaque quis optio illum voluptatem repudiandae blanditiis magni, repellat et accusamus amet! Aliquid, amet. Deserunt voluptatem
at excepturi odit maiores quas aut enim consequuntur obcaecati architecto. Fuga nulla maiores vel maxime? Totam a adipisci libero qui, dolore velit rerum optio animi voluptate facilis? Quisquam? Aperiam, quis est pariatur accusantium nulla sed
minima vel quae facilis, fugiat non qui amet velit quas beatae cupiditate eius sit possimus repellat. Mollitia incidunt magnam et enim, aut doloribus. Dignissimos, a non. Praesentium cupiditate corporis quis harum reprehenderit doloremque fugit
natus, laudantium rem, facere explicabo aut neque modi? Omnis id minima alias explicabo recusandae ut. Dolorem repellat exercitationem laudantium! Doloremque ea molestias, ratione iure fuga distinctio beatae sit eveniet similique animi excepturi
non error provident rem amet ullam tempora cum recusandae, eum velit harum? Aut quos hic corporis et. Illum quia dolore, numquam reprehenderit consequuntur officia incidunt ea voluptatum quae, ipsum labore a omnis hic sed necessitatibus impedit.
Aspernatur quo nam expedita tenetur quibusdam rerum iste ab odio illo. Autem facere fuga aliquam asperiores eius saepe, qui aut amet ratione harum alias tenetur quia, earum expedita voluptate dolor, cumque porro ex nobis eveniet distinctio blanditiis?
A voluptate eius delectus? Quasi, illum ut quibusdam vitae molestias atque a, modi adipisci similique distinctio cum at animi, aut pariatur consequuntur ad enim dolore? Sit aliquam dignissimos sunt ducimus nihil itaque non reprehenderit? Iure
error deleniti distinctio esse nam vel nulla aliquid porro consequuntur eius architecto rerum soluta quod ex dolorem at ducimus, quam odio sapiente! Unde dignissimos ratione quas dicta dolorum qui! Error dignissimos eius cupiditate, ipsam labore
illo. Eos repudiandae, beatae assumenda laboriosam minima veniam dolorum consequatur pariatur neque quidem inventore animi rerum nemo ipsa ut aliquid fuga eaque? Blanditiis, aliquid. Modi placeat nemo quos soluta suscipit? Rem necessitatibus dolorem
maiores culpa ducimus accusamus cumque sequi qui unde iste aspernatur labore officiis nisi debitis itaque blanditiis tempora, eveniet consectetur! Nesciunt, quam! Obcaecati, quis odit sint beatae reiciendis suscipit labore et eaque pariatur velit,
ut inventore! Fuga, repudiandae iste, voluptatem corrupti quibusdam error illum quas fugiat asperiores ea omnis ratione qui soluta! Dignissimos ab voluptate accusantium autem facilis architecto, illo sapiente mollitia minima praesentium recusandae
enim officia officiis unde tempore neque repudiandae perferendis tenetur suscipit eos commodi quis dolorum! Explicabo, odio beatae? Doloribus dolore asperiores eveniet, facere corporis magni aliquid, ratione ipsa minima consequuntur, quos nam
enim officiis repudiandae voluptatem. Animi assumenda, deserunt placeat labore iusto eos quisquam officiis architecto nobis explicabo. Repudiandae minima facere laboriosam itaque inventore unde non optio praesentium eligendi voluptates culpa et
corrupti aperiam tenetur incidunt reprehenderit dolorem sit quisquam, sed asperiores veritatis nam vel ipsum dicta! Non. Provident saepe ullam minus laboriosam sit nam rerum! In quidem minima reiciendis, non amet vero sed unde deleniti veritatis
mollitia voluptatem. Excepturi maiores error consequatur dolore labore reiciendis libero quisquam? Accusantium earum suscipit atque architecto dolorum itaque aliquid error asperiores neque ad rem perferendis expedita a voluptate, similique id
vero? Quidem iusto expedita ab, consectetur magni similique suscipit aperiam non. Veritatis debitis rem hic, at in deleniti dolorem architecto velit illo repudiandae, eligendi a. Obcaecati ducimus voluptate placeat nulla facere odio, id aut illo
numquam nobis expedita dolor non ab. Perferendis beatae placeat soluta, repellat dignissimos id qui impedit explicabo? Magni, fugit? Vel, reprehenderit eius dolorem quasi consequuntur vero dolorum molestias ipsum illo enim, quod neque est vitae
ratione laboriosam?
</div>
</div>
</main>
<footer class="container-fluid">
<div class="row">
<div class="col bg-info p-5"></div>
</div>
</footer>
</div>
This is similar to the following solution.
Flush footer to the bottom of the page in bootstrap 4
Update
As of now both the header and footer has fluid height. Use height: [x]px; should you need to have a fixed height footer.
Please view code snippet in "full page" mode so that the problem is clear. You will see it when scrolling all the way to the bottom and hovering on the items. The footer is pushed down when hovering, which is what I want to stop from happening. Also if scrolling even further down while hovering, the footer will stay up and then the main content will be pushed up.
Basically, the problem is with the height of the nav-items pushing the rest of the content up or down. So a solution would be to get the nav-items out of the flow of the document somehow so that their height won't cause the problems. I know that would only be possible with absolute positioning or floating which is undesirable, but it's just the direction of thought.
The set height of the nav-items is only needed for the slide up transition effect, so if there was another way to achieve the slide up effect, then the height could be removed and the problem fixed. The thing is that it's the height that changes between states, and not the position.
There's a way that works in chrome but not firefox:
Add a fixed height to the nav, remove overflow:hidden from aside, and add high z-index with position:relative to footer.
Of course, I'm looking for a CSS only fix. No JavaScript ;p
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
main {
padding: 100px;
}
/* ----- aside with nav inside. ----- */
aside {
position: sticky;
bottom: 0;
overflow: hidden;
}
.nav {
display: flex;
align-items: flex-end;
}
/* ----- nav item ----- */
.nav-item {
flex: 1;
padding: 1rem;
border-top: 1px solid #dee2e6;
background: white;
text-align: center;
height: 110px;
transition: all 0.5s;
}
.nav-item:hover {
background: #17a2b8;
border-color: #17a2b8;
color: white;
height: 310px;
}
/* ----- border only between nav items ----- */
.nav-item+.nav-item {
border-left: 1px solid #dee2e6;
}
/* ----- h4 heading ----- */
.nav-item h4 {
font-size: 1rem;
}
.nav-item:hover h4 {
color: white;
}
/* ----- items inside nav-item to show only on hover ----- */
.nav-item .nav-link,
.nav-item img,
.nav-item .details {
display: none;
}
.nav-item:hover .nav-link,
.nav-item:hover img,
.nav-item:hover .details {
display: block;
}
/* ----- change <hr> color on hover ----- */
.nav-item:hover hr {
border-top-color: white;
}
/* ----- footer----- */
footer {
height: 50px;
}
/* ----- incrementally hide nav-items on smaller screens ----- */
#media (max-width: 576px) {
.nav-item:nth-child(n+4) {
display: none;
}
}
#media (max-width: 768px) {
.nav-item:nth-child(n+5) {
display: none;
}
}
#media (max-width: 992px) {
.nav-item:nth-child(n+6) {
display: none;
}
}
#media (max-width: 1200px) {
.nav-item:nth-child(n+7) {
display: none;
}
}
#media (max-width: 1370px) {
.nav-item:nth-child(n+8) {
display: none;
}
}
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dolores nulla aut mollitia, repudiandae ducimus, maiores enim neque minus error inventore odio libero. Error rerum fuga maiores commodi magnam assumenda quo, dolor facilis, cupiditate
cumque atque sint eveniet omnis obcaecati natus odit est deserunt consequuntur autem? Rerum quia suscipit magni autem reiciendis exercitationem neque officia consequuntur. Asperiores, ipsum nulla sapiente autem magni possimus quod eaque fugiat incidunt
harum alias sint optio exercitationem quae minima ea totam suscipit aperiam quidem vitae veritatis? Laborum unde odit, sint, quia, quibusdam rem possimus quos quis quod ad dolore tempore adipisci eius totam. In sunt vel itaque voluptatem explicabo
a iste, odit, ipsam exercitationem earum modi. Quas aliquam nesciunt obcaecati corrupti vero esse voluptatem id fuga architecto dicta nulla sunt, placeat beatae? Placeat dolore nisi doloremque minus cupiditate optio rerum. Cum totam facilis iure?
Quaerat maxime corrupti voluptatum consequatur unde dicta ut, aliquam nobis nostrum nesciunt libero sequi perferendis error modi at ullam id possimus voluptas illo officiis culpa rerum ad molestias impedit? Laudantium nisi cumque quaerat repellendus
omnis voluptates culpa nesciunt tempora iusto mollitia commodi molestiae vitae exercitationem magnam doloremque quae in saepe temporibus quia reprehenderit, eveniet, error deserunt excepturi! Nobis consequuntur hic dolorum repudiandae perspiciatis
cupiditate eveniet inventore fuga nostrum laudantium eos quaerat sit explicabo illo magni, molestiae quis quod sed atque voluptate ipsum reiciendis minima tempora. Praesentium molestias pariatur necessitatibus est doloribus facere eaque distinctio
perferendis et aut temporibus aliquam, repellat dolorum ipsa culpa iure sit in quos dolorem minus placeat accusamus incidunt tempora? Dolor eum, praesentium velit libero necessitatibus vitae odio culpa maxime at, esse, earum sunt quam laudantium quo
unde. Dolor rem ad doloribus quis architecto, illo qui cupiditate eligendi dolorum consequuntur debitis molestiae dolore culpa dignissimos libero. Quod blanditiis quisquam iusto aut maiores! Rem facilis culpa impedit dicta perspiciatis nemo, at numquam
quam ullam reprehenderit quidem facere quia pariatur eius aperiam omnis, dignissimos suscipit optio molestiae ducimus voluptas totam. At harum dolorum pariatur praesentium velit unde perferendis quas. Odio dolorum harum at cum expedita ipsum repellendus
magnam enim quidem modi quo eveniet dolor officiis placeat cumque nihil omnis debitis illo id sequi, voluptatem iusto molestiae quod! Laborum quis deleniti animi tempora molestiae voluptatem cumque amet reiciendis esse tenetur aliquam beatae a molestias
blanditiis, alias similique earum mollitia hic velit odio vero dolores commodi? Omnis quis dolorem nesciunt iure eaque vitae dicta voluptatibus animi necessitatibus amet asperiores dolor accusantium tempora atque quia neque, adipisci esse qui? Commodi
illum hic voluptates ex! Laborum quam libero tenetur ab dolorem minus aperiam. Sit ipsum delectus dolores, ut facilis pariatur doloremque laboriosam minus odio obcaecati corrupti quidem illum. Ullam, voluptatibus illum. Dicta, reprehenderit? Corporis
iste placeat molestiae ea provident soluta labore nulla praesentium, voluptas, ut qui ratione. Illum, animi! Dolore perspiciatis minima itaque debitis iure nam fuga cumque suscipit et aperiam rem distinctio mollitia, aspernatur corrupti commodi ut
ab voluptatum est eius sapiente ad vero? Natus, optio! Delectus adipisci deserunt iusto suscipit soluta, a rem nostrum eum tenetur animi! Dolore quo culpa accusantium aliquam.</p>
</main>
<aside>
<nav class="nav">
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
<div class="nav-item">
<img class="mx-auto mb-3" src="https://picsum.photos/100/100?image=30" alt="">
<h4>Heading</h4>
<hr class="w-50">
<span>Some Text</span>
<span class="details mb-3">More Details</span>
<a class="nav-link btn btn-light" href="#">More</a>
</div>
</nav>
</aside>
<footer class="container-fluid bg-dark text-white py-3">
<div class="row justify-content-end">
<small class="col-4 text-center">
2018 ALL RIGHTS RESERVED.
</small>
<small class="col-4 text-right">
My Website
</small>
</div>
</footer>
Adding a height to nav equal to the height of nav-item when expanded basically fixes it. The change in height will be contained within nav and therefor the rest of the layout is not affected. This just leaves a big gap between main and aside, but can be easily fixed with a negative bottom margin on main.
How to properly change default navbar fixed height in bootstrap 3.
Here's my snipped. When resize with this css:
.navbar-fixed-top{
height:100px;
}
It bricks shrink
I've also tried
.navbar-fixed-top{
max-height:100px;
}
Use padding, not a fixed height for the navbar. By default it's min-height: 50px so once the viewport is under 768px a fixed height will alter the mobile navigation collapse with regard to the background being removed since the navbar acts as the background for the links on mobile by expanding.
You'll have to adjust the values to reflect whatever you actually need them to be but this should at least get you started.
See working Snippet.
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 100px;
}
nav {
transition: all 300ms linear;
}
.navbar.navbar-default {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar.navbar-default .navbar-brand {
padding-top: 5.5px;
}
.navbar.navbar-default .navbar-brand img {
width: 250px;
max-width: 200px;
}
#media screen and (min-width: 768px) {
.navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 250px;
text-align: center;
}
.navbar.navbar-default > .container .navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand-centered {
margin-left: -125px;
}
nav.navbar.navbar-default.shrink {
min-height: 35px;
padding-top: 10px;
padding-bottom: 10px;
}
nav.shrink.navbar.navbar-default .navbar-brand {
padding-top: 0;
margin-top: -10px;
}
nav.shrink.navbar.navbar-default .navbar-nav a {
padding-top: 0;
padding-bottom: 0;
font-size: 15px;
}
nav.shrink.navbar.navbar-default .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
}
#media screen and (max-width: 767px) {
nav.navbar.navbar-default.shrink {
min-height: 35px;
padding-top: 5px;
padding-bottom: 5px;
}
nav.shrink.navbar.navbar-default .navbar-brand {
padding-top: 2px;
margin-top: 5px;
}
nav.shrink.navbar.navbar-default .navbar-toggle {
margin-top: 11px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">
<img src="http://www.sacredpathsoftransformation.com/uploads/7/0/9/7/7097791/_____2174311.jpg" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-8">
<h2>Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
<p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
<p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
<p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
<p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
<p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
<p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
<p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
<p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
<p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
<p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p>
<p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p>
<p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p>
<p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p>
</div>
<!--/.col-xs-12 -->
<div class="col-lg-7 col-md-6 col-sm-4">
<h2>Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
<p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
<p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
<p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
<p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
<p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
<p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
<p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
<p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
<p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
</div>
</div>
<!--/.row -->
</div>
<!--/.container -->
Example 2
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 100px;
}
nav {
transition: all 300ms linear;
}
.navbar.navbar-default {
padding-top: 20px;
padding-bottom: 20px;
background: black;
}
.navbar.navbar-default .navbar-brand {
padding-top: 0px;
margin-top: -15px;
}
.navbar.navbar-default .navbar-brand img {
width: 200px;
}
#media screen and (min-width: 768px) {
.navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
display: block;
width: 250px;
text-align: center;
}
.navbar.navbar-default > .container .navbar-brand-centered,
.navbar.navbar-default > .container-fluid .navbar-brand-centered {
margin-left: -125px;
}
nav.shrink.navbar.navbar-default {
min-height: 35px;
padding-top: 10px;
padding-bottom: 10px;
}
nav.shrink.navbar.navbar-default .navbar-brand {
padding-top: 0;
margin-top: -10px;
}
nav.shrink.navbar.navbar-default .navbar-brand img {
height: 40px;
}
nav.shrink.navbar.navbar-default .navbar-nav a {
padding-top: 0;
padding-bottom: 0;
font-size: 15px;
}
nav.shrink.navbar.navbar-default .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
}
#media screen and (max-width: 767px) {
nav.navbar.navbar-default.shrink {
min-height: 35px;
padding-top: 5px;
padding-bottom: 5px;
}
nav.shrink.navbar.navbar-default .navbar-brand {
padding-top: 2px;
margin-top: 5px;
}
nav.shrink.navbar.navbar-default .navbar-brand img {
height: 40px;
}
nav.shrink.navbar.navbar-default .navbar-toggle {
margin-top: 11px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand navbar-brand-centered">
<img src="http://eventswork.com/wp-content/uploads/2013/12/250x100.png" />
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-5 col-md-6 col-sm-8">
<h2>Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
<p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
<p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
<p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
<p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
<p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
<p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
<p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
<p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
<p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
<p>Nostrum minus dicta quod totam autem ipsum illo velit labore obcaecati est ducimus ullam sit iusto ea pariatur sint nulla perferendis modi dolorum cumque non laboriosam ratione maiores possimus numquam!</p>
<p>Deserunt ex dolor atque sapiente suscipit aspernatur et iste necessitatibus enim magni blanditiis quaerat rerum perspiciatis expedita magnam nihil neque natus quos quidem veritatis eligendi dolorem itaque laboriosam beatae dolores!</p>
<p>Nostrum tenetur rem cum tempora sapiente at possimus assumenda ex quos illum facilis quibusdam facere voluptatum. Necessitatibus tempore animi earum inventore quaerat sit velit totam rem nulla consequuntur dolorem architecto!</p>
<p>Illum doloremque ipsa magni fugiat explicabo nam officiis expedita architecto voluptatem beatae deserunt optio iusto nostrum facere voluptatum. Tempora dolore quasi vero aut voluptatem eaque nobis iusto enim dignissimos molestias!</p>
</div>
<!--/.col-xs-12 -->
<div class="col-lg-7 col-md-6 col-sm-4">
<h2>Lorem ipsum</h2>
<p>Dolor sit amet, consectetur adipisicing elit. Id maxime repellat repellendus porro voluptas laudantium similique eveniet quis perferendis beatae commodi sunt ullam provident dolorum doloribus esse accusamus dolores. Corrupti.</p>
<p>Consectetur incidunt voluptatibus ipsa nisi esse eos deleniti repudiandae at quo sit praesentium nemo optio perspiciatis sequi quaerat voluptates minus reprehenderit doloremque accusamus et quisquam nesciunt sunt consequatur explicabo excepturi!</p>
<p>Sequi facilis ea dolor asperiores quibusdam eveniet optio corporis et accusantium voluptatem architecto quis iste recusandae molestias dolorem soluta ex blanditiis illo impedit laborum iusto? Iure sapiente eos molestiae est?</p>
<p>Numquam delectus recusandae nesciunt rem itaque harum corporis maxime hic iste molestias adipisci excepturi ullam libero necessitatibus cum eum modi minus obcaecati est nemo quia velit earum perferendis consectetur porro?</p>
<p>Accusamus dicta consequatur quos ipsum rerum tempora assumenda ex excepturi itaque soluta magnam debitis voluptatibus neque eos porro. Neque tempora ea beatae delectus facere quas voluptas accusamus maxime enim consequuntur.</p>
<p>Saepe obcaecati facilis dolore numquam nam quod laudantium. Rerum esse voluptas eum aut porro beatae adipisci exercitationem ab voluptatum corporis quas placeat sapiente nisi ut officia eaque debitis. Corrupti eveniet!</p>
<p>Eius natus numquam tempore alias ipsam commodi aut similique corporis beatae velit maxime obcaecati voluptatibus cum repudiandae minus inventore doloremque optio saepe nihil eum reprehenderit quas consequuntur perspiciatis quo quam.</p>
<p>Ea perspiciatis incidunt unde ipsam cupiditate necessitatibus magnam quod odit. Beatae adipisci non praesentium tenetur dolores fugit repellat consequuntur unde aperiam eligendi ipsa doloribus corporis officiis ipsam quod numquam assumenda!</p>
<p>Ullam ut ex cum corporis numquam quia hic aut nisi itaque laboriosam eaque earum commodi nulla magni voluptate reiciendis laborum esse odit blanditiis aperiam veniam eos velit similique eveniet ad.</p>
<p>Esse veritatis inventore explicabo hic consequuntur ex autem praesentium quaerat blanditiis illo deleniti dolorum porro tenetur. Repellat sed repellendus natus cum molestias numquam vitae vel eum voluptatem praesentium tempora quae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est nostrum consequatur odit eius blanditiis sit mollitia ut porro cumque nam repudiandae accusantium nisi excepturi corporis incidunt inventore ipsam? Officiis eum!</p>
</div>
</div>
<!--/.row -->
</div>
<!--/.container -->