Bootstrap Carousel White-Background inbetween Slides - javascript

I'm having difficulty describing my problem so here's a video that should make it quite obvious: https://gph.is/g/4LXNKkg
Essentially I'm using a bootstrap carousel template to display a basic full-width slider. But unlike other sliders, I have created before (not with bootstrap) and regardless of the changes, I make to the code it just won't get rid of these ugly white-space transitions. Is there something obvious I'm missing here?
HTML: `
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="style.css" />
<header>
<div class="header-upper container-fluid d-flex flex-row justify-content-center">
<div class="logo m-3">
<img src="images/v.png" />
</div>
<div class="header-upper-text m-2">
<h1>This is the Title</h1>
<h3>This is the description</h3>
</div>
</div>
<div class="headder-middle">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</header>
<section class="header-slider">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/leaf-2210973_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/wave-3473335_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/wood-1350175_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<script>
var myCarousel = document.querySelector("#carouselExampleCaptions")
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 5000
})
</script>
`
CSS:
.selector-for-some-widget {
box-sizing: content-box;
}
a {
text-decoration: none !important;
color: #fff !important;
}
.logo img {
max-width: 100px;
max-height: 100px;
}
.header-upper {
background-color: lightblue;
}
.header-middle {
background-color: black;
}
.recent-posts {
background-color: rgba(0, 0, 0, 0.247);
position: relative;
text-align: center;
color: white;
}
.recent-posts-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.recent-posts-text p {
border-bottom: 1px solid #fff;
}
.recent-posts-info a {
color: #fff;
}
.recent-posts img {
object-fit: cover;
width: 100%;
height: 100%;
}
.carousel-inner {
height: 32rem;
}
.carousel-item {
float: none !important;
margin-right: 0 !important;
}
#media (min-width: 576px) {
.header-upper {
background-color: blue;
}
}
#media (min-width: 768px) {
.header-upper {
background-color: green;
}
}
#media (min-width: 992px) {
.header-upper {
background-color: orange;
}
}
#media (min-width: 1200px) {
.header-upper {
background-color: yellow;
}
}
#media (min-width: 1400px) {
.header-upper {
background-color: red;
}
}


that white-space transition are an animation of the class "slide" on Bootstrap 4.
In your main carousel div you are using that class.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
Just remove it and try it

Related

The navbar menu doesn't vertically aligned on small screen and the position of hamburger menu

My top menu and submenu look fine on normal screen. When shrunk in smaller size, I would expect menus/submenus to be aligned vertically as normal dropdowns by bootstrap. This doesn't happen as shown below. How can I show the dropdown list(menus and submenus) vertically aligned on small screen?
TIA
Screenshots
Code
<nav class="navbar navbar-expand-md navbar-dark ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menubar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse" id="menubar">
<ul class="nav navbar-nav">
<li class="nav-item ">
<a class="nav-link" href="#">Menu1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu2</a>
<ul class="dropdown-menu" role="menu">
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">Menu3</a>
<ul class="dropdown-menu" role="menu">
<li>Submenu3</li>
<li>Submenu4</li>
</ul>
</li>
</ul>
</div>
</nav>
#media (max-width: 767px) {
.navbar-collapse {
background-color: #565149;
}
.banner-navbar,
.banner-search {
display: none;
}
}
#menubar ul {
height: 44px;
padding-top: 5px;
}
#menubar .nav-link {
font-size: 14px;
padding: 8px 50px 0 0 !important;
color: white !important;
}
#menubar .nav-link:focus,
#menubar .nav-link:hover,
#menubar .nav-link:visited {
color: white !important;
}
#menubar .navbar{
padding-left: 0 !important;
}
.navbar.navbar-dark {
height: 44px;
margin: 0 15%;
}
nav.navbar .navbar-nav li.nav-item.active:after{
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
/*submenu*/
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu > li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu > li a{
font-weight:600;
}
.dropdown-menu > li a:hover {
text-decoration: none;
}
Update:
Slightly modified from Rich's solution. Two problems for me:
somehow, the search box and the right after small navbar are too close to the middle of the screen. The should float to the right.
the input for search key words should double its width(more or less), but I don't want to give it a fixed pixel. How can I do this?
Thanks
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.open > ul {
display: inline-flex !important;
}
.bg-banner {
background-image: linear-gradient(#17517f, #46769d);
}
.bg-headbar {
background-color: #005db9;
}
#menubar .nav-link {
font-size: 14px;
padding-right: 50px;
color: white;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu > li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu > li a {
font-weight: 600;
}
.dropdown-menu > li a:hover {
text-decoration: none;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
<a class="navbar-brand" href="#">Test Site</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 navbarSupportedContent">
<form class="form-inline my-2 .m-md-0 ml-auto">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Seach">
<div class="input-group-append">
<button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="banner-navbar collapse navbar-collapse navbarSupportedContent">
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-user"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
<li class="nav-item">
<i class="fa fa-cog"></i>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-question-circle"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"> Help</a>
</div>
</li>
</ul>
</nav>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md">
<div class="collapse navbar-collapse navbarSupportedContent" id="menubar">
<ul class="navbar-nav mr-auto">
<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">
Menu1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
<a class="dropdown-item" href="#">Submenu 1B</a>
</div>
</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">
Menu2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Submenu 2A</a>
<a class="dropdown-item" href="#">Submenu 2B</a>
</div>
</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">
Menu3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Submenu 3A</a>
<a class="dropdown-item" href="#">Submenu 3B</a>
</div>
</li>
</ul>
</div>
</nav>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</p>
<script type="text/javascript">
$("#menubar li.dropdown").hover(function () {
$(this).addClass("active show");
},
function () {
$(this).removeClass("active show");
});
$("#menubar ul.dropdown-menu>li>a").on("click", function (e) {
$("#menubar li.dropdown").removeClass("active show");
});
</script>

You shouldn’t have to do anything as the navbar-nav ul is normally set to flex-direction: column for small screens and it’s switched to flex-direction: row at the breakpoint set in the navbar (.navbar-expand-md .navbar-nav).
You didn’t provide a working version of your code via the Stackoverflow snippet tool, and I couldn’t easily get your code to run locally, so it’s not clear why you code isn’t doing what you want.
I did put together an alternate version of your code that may help you along. I’m not sure what you’re thinking for how to indicate to the user where they are via an active class, but that should be easy to add.
Update
I've modified my answer to include your using JavaScript to add active show to display the dropdown menus and I shifted the small menu towards the right.
I fixed a problem for the ARIA labeling that was in my original version. I had duplicated the code, but neglected to give the ARIA labels a unique ID.
Update 2
To prevent the content from shifting down every time the user hovers over the menubar, you could add a negative top margin to the content to move it up the same amount the menubar expands. The menubar would need a z-index value to move it over the content.
$("#menubar li.dropdown").hover(function () {
$(this).addClass("active show");
$("#firstContent").addClass("mt-n15");
},
function () {
$(this).removeClass("active show");
$("#firstContent").removeClass("mt-n15");
});
$("#menubar ul.dropdown-menu>li>a").on("click", function (e) {
$("#menubar li.dropdown").removeClass("active show");
$("#firstContent").removeClass("mt-n15");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.open>ul { /* mine */
display: inline-flex !important;
}
.bg-banner { /* mine */
background-image: linear-gradient(#17517f, #46769d);
}
.bg-headbar { /* mine */
background-color: #005db9;
}
#menubar .nav-link {
font-size: 14px;
padding-right: 50px;
color: white;
}
#media (min-width:768px) {
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -31px;
left: 50%;
bottom: 15px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
}
}
#menubar li.dropdown.show {
position: static;
}
#menubar li.dropdown.show .dropdown-menu {
display: table;
width: 100%;
text-align: center;
left: 0;
right: 0;
margin: 0;
}
.dropdown-menu>li {
display: table-cell;
padding-top: 6px;
}
.dropdown-menu>li a {
font-weight: 600;
}
.dropdown-menu>li a:hover {
text-decoration: none;
}
.mt-n15 {
margin-top: -1.5rem;
}
</style>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-banner">
<a class="navbar-brand" href="#">Test Site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSearchContent navbarHelpContent menubar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbarSupportedContent" id="navbarSearchContent">
<form class="form-inline my-2 .m-md-0 ml-auto">
<div class="input-group">
<input type="text" class="form-control form-control-sm" placeholder="Seach" size="40">
<div class="input-group-append">
<button class="btn btn-outline-light btn-sm" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
<div class="banner-navbar collapse navbar-collapse flex-grow-0 navbarSupportedContent" id="navbarHelpContent">
<nav class="navbar navbar-expand-sm navbar-light">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-user"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Sign Out</a>
</div>
</li>
<li class="nav-item">
<i class="fa fa-cog"></i>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" role="button" href="#">
<i class="fa fa-question-circle"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Help</a>
</div>
</li>
</ul>
</nav>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark text-white bg-headbar py-0 py-8-md" style="z-index: 1;">
<div class="collapse navbar-collapse navbarSupportedContent" id="menubar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu1
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1">
<a class="dropdown-item" href="#">Home<span class="sr-only"> (current)</span></a>
<a class="dropdown-item" href="#">Submenu 1B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu2
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Submenu 2A</a>
<a class="dropdown-item" href="#">Submenu 2B</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu3
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Submenu 3A</a>
<a class="dropdown-item" href="#">Submenu 3B</a>
</div>
</li>
</ul>
</div>
</nav>
<div id="firstContent" class="container">
<div class="row">
<div class="col-12 col-sm-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</div>
<div class="col-12 col-sm-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis eaque? Vero consequuntur tempora vitae at maxime, repellendus excepturi quia quibusdam odit sed ullam praesentium natus rerum molestiae cupiditate possimus?
</div>
</div>
</div>

Bootstrap Navbar links overlap when resizing the browser

I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm 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">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<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">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>

This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

Bootstrap 4 grid columns not assuming max height

I am using Bootstrap 4 to construct a grid of rows and columns. Mostly everything is laid out as I like it, except for the 3 columns on the bottom left area, which I cannot get to automatically grow to the maximum height of the row they are place within. I have added a border to every row and column for demonstration, and I've added a blue background to the columns that will not automatically resize to the full possible height. I've tried everything I can think of, and can't quite get the columns to automatically grow to the full height.
I will normally have charts.js charts in the 3 columns, and when they don't grow to fill the entire height of the column, the charts get squished and look bad. Any help would be extremely appreciated!
I've constructed a (hopefully) full codepen example here:
https://codepen.io/coldcoffeecup/pen/aGgpoV

While Bootstrap's row comes with display: flex, unfortunately the columns do not. As such, if you simply want to make the blue squares expand to fill the full vertical space, all you need to do is add the following CSS:
#A {
display: flex;
flex-direction: column;
}
This can be seen working here.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.fullwidth {
width: 100% !important;
}
.fullheight {
height: 100% !important;
}
#A {
display: flex;
flex-direction: column;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>Template</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/starter-template.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" id="reportDropdown" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Account</button>
<button class="dropdown-item" id="sign-out" type="button">Sign Out</button>
</div>
</div>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="starter-template">
<h1 class="display-4">Title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-9 border" id="A">
<div class="row border" id="A1">
<div class="col-3 border">
<div class="row">
<div class="dropdown fullwidth">
<button class="btn btn-secondary dropdown-toggle fullwidth" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">A</a>
<a class="dropdown-item" href="#!">B</a>
<a class="dropdown-item" href="#!">C</a>
</div>
</div>
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 1
</p>
</div>
<input id="slider1" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 2
</p>
</div>
<input id="slider2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 3
</p>
</div>
<input id="slider3" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
</div>
<div class="col border">
A4
</div>
</div>
<div class="row bg-primary d-flex flex-fill" id="A2">
<div class="col-4 border">
<canvas id="chart1"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart2"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart3"></canvas>
</div>
</div>
</div>
<div class="col border" id="B">
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
A
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
B
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
C
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
D
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
E
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
F
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
G
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
H
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
</ul>
</div>
<div class="row border">
<div class="input-group input-group-sm">
<input type="text" placeholder="Enter a value" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-append">
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</div>
</div>
</div>
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
I
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
J
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
K
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
</ul>
</div>
<div class="row border" style="padding:3%">
<button type="button" class="btn btn-primary fullwidth">Done</button>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script>
<script src="assets/js/slider.js" rel="stylesheet"></script>
<script src="assets/js/chartCode.js" rel="stylesheet"></script>
<script src="assets/js/create.js" rel="stylesheet"></script>
</body>
</html>

Why isn't my navbar text on the same line?

Why is my navbar text not on the same line for the "front end web developer" and my pages text. How can I make it appear on the same line?
As you can see in the screenshot, it currently looks like this https://ibb.co/jkd0LS. I want the text to be all on the same line.
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
Here is all my website code, I uploaded it to GitHub

The display: flex !important; on your #navbar7 is making it go full width. You could change it to display: inline-flex; but it probably just easier to make it float: right;.
#navbar7 {
float: right;
}
See this fiddle for an example (at a wider viewport than the SO code sample).
jQuery(document).ready(function($) {
$(document).on("scroll", function() {
const features_top = $(".features-icons").position().top;
const top_of_window = $(window).scrollTop();
if (top_of_window >= features_top) {
$(".navbar").show();
} else {
$(".navbar").hide();
}
});
});
body { height: 200vh; }
#navbar7 {
float: right;
}
.navbar {
border-bottom: 0.04rem solid #111;
background-color: ;
display: none;
}
nav ul li a {
color: rgb(65, 47, 47);
font-family: Montserrat, Helvetica, Arial, sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
}
nav ul li a:hover {
text-decoration: underline;
color: #000;
}
.abs-center-x {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Front End Web Developer</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#features-icons">Expectations</a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#about">Design</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="features-icons bg-light" id="features-icons">
<div class="container">
<h2 class="mb-5 text-center">What You Can Expect</h2>
<hr class="black">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="far fa-lightbulb m-auto text-primary"></i>
</div>
<h3 class="text-center">Ideas</h3>
<p class="lead mb-0 text-justify">I collaborate with clients and peers to nurture and transform ideas into well thought out design specs. After all, that's where the majority of amazing user experiences start.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fa fa-magic m-auto text-primary"></i>
</div>
<h3 class="text-center">UX/UI</h3>
<p class="lead mb-0 text-justify">I sketch and wireframe interfaces focusing on content structure, intuitive UI patterns and simple interactions. I'm a minimalist who truly believes that less is more.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="fas fa-code m-auto text-primary"></i>
</div>
<h3 class="text-center">Coding</h3>
<p class="lead mb-0 text-justify">I design in the browser with HTML(5), CSS(3) and a touch of JavaScript. I love coding things from scratch, but I can work with front-end frameworks like Bootstrap too.</p>
</div>
</div>
</div>
</div>
</section>

Adding hidden spaces between buttons

I'm trying to create a single scrolling webpage consisting of three pages
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>
The buttons on the third page,when collapsed don't leave a space in between. How do I add space between the buttons in the small and xsmall screen sizes?I tried inserting between the buttons, but that didn't work.
Here is the JsFiddle

Add this to your CSS
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
Updated fiddle
Sample snippet
$('a.page-scroll').on('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 60
}, 1000);
event.preventDefault();
});
* {
margin-top: 0;
margin-bottom: 0;
}
#page1 {
height: 1000px;
background-color: #000;
color: white;
}
#page2 {
height: 1000px;
color: white;
background-color: #18121e;
padding-top: 140px;
border-top: 100px;
}
#page3 {
height: 650px;
color: white;
background-color: #233237;
background-size: cover;
padding-top: 200px;
}
body {
padding-top: 0px;
}
#page1 p {
padding-top: 100px;
font-size: 2.5rem;
}
#page1 p #highlight {
color: pink !important;
}
#page2 h3 {
padding-bottom: 80px;
line-height: 1.5;
}
#page3 h3 {
padding-bottom: 100px;
line-height: 1.5;
}
.btn {
color: white;
background-color: #000 !important;
}
.btn:hover {
color: gray;
}
#media screen and (max-width: 990px) {
.btn ~ .btn {
margin-top: 10px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.6.7/jquery.nicescroll.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rashid Naushad</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#about">About</a>
</li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li><a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!--<div class="container-fluid">-->
<div>
<div id="page1">
<a id="about"></a>
<br>
<br>
<br>
<p class="text-center">Hi !
<br>I'm a self taught web developer based in India.
<br>I'm an undergraduate student pursuing economics who just loves to <span id="highlight">code</span>.
<br>I dream of combining my knowledge of programming, economics, and
<br>financial markets for the betterment of the society.
<br>Languages and Frameworks:
<br>HTML5, CSS3, Bootstrap3,
<br>Javascript, jQuery, Angular.js, Meteor.js,
<br>Node.js, React,js,
<br>Python, php..
<br>Tools & expertise: Git, Responsive Web Design.</p>
</div>
<div id="page2">
<a id="portfolio"></a>
<h3 class="text-center">Here is my latest portfolio, <br>I'll be adding more as I learn and grow..</h3>
<!--<div class="row">
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="VaKMBJ" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Simple Javascript App by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="thumbnail img img-responsive">
<p data-height="268" data-theme-id="0" data-slug-hash="pyPjae" data-default-tab="result" data-user="rashidnaushad" data-preview="true" class="codepen">See the Pen Tribute to Raghuram Rajan by Rashid Naushad (#rashidnaushad) on CodePen.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
</div>
</div>
<div class="row">
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
<div class="thumbnail">
<img class="img img-responsive img-rounded" src="http://cleantallahassee.com/wp-content/uploads/2015/09/coming-soon.jpg" alt="Coming Soon!" />
<div class="caption">
<h5 class="text-center">Coming Soon!</h5>
</div>
</div>
</div>-->
</div>
<div id="page3">
<a id="contact"></a>
<h3 id="contact-text" class="text-center">Think I can be of any help to you?<br>Wanna collaborate?<br>Shoot me a message, now!</h3>
GitHub
<div class="hidden-lg hidden-md">
<br>
</div>
freeCodeCamp
<div class="hidden-lg hidden-md">
<br>
</div>
Gmail
</div>
</div>

Categories