I have spent many hours trying to fix this problem but with no luck.
When I decrease the resolution a horizontal scrollbar appears and I can't find which element is out of the box causing this issue.
I'm using a bootstrap theme and I have inserted some CSS code inside this bootstrap theme, I have also replaced some sections with my own.
When I delete all nodes except from the footer I don't have the horizontal scroll bar issue so I believe I have done more than 1 mistakes. I also tried to have 1 section at the time and still the issue persists. Right now I'm out of options really need help to fix that issue that holds me back.
You can check it here https://jsfiddle.net/28rxv53a/
The images will not work cause I'm using Jekyll and they point to my GH-PAGE.
overflow-x:hidden isn't a solution for my problem.
EDITED
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="/LazPap/assets/css/custom.css">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<title>LazPap - Portfolio</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<!-- Font Awesome Icons -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Secular+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600&display=swap" rel="stylesheet">
<!-- Plugin CSS -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
<!-- Theme CSS - Includes Bootstrap -->
<link href="https://blackrockdigital.github.io/startbootstrap-creative/css/creative.min.css" rel="stylesheet">
<!-- Fade-in and Fade-out Plugin -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script>
<!-- Modaal Plugin for contact link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css"/>
</head>
<body id="page-top">
<header class="masthead-background">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-12">
<div class="parallax-window"><h1 class="background-text" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">LazPap</h1></div>
<div id="scene">
<div class="layer parallax-window" data-depth="0.5" data-parallax="scroll" data-image-src="HTML_5.png">
<img src="/LazPap/images/HTML_5.png" class="background-image-left" />
</div>
<div class="layer" data-depth="-0.5">
<img src="/LazPap/images/CSS_3.png" class="background-image-right" />
</div>
<div class="layer" data-depth="0.5">
<img src="/LazPap/images/Javascript.png" class="background-image-under" />
</div>
</div>
</div>
</div>
</div>
</header>
<section class="page-section masthead-under-background">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center mx-auto">
<h2 class="text-white mt-0 line-height text-heading" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">This project designed with Ruby on Rails</h2>
<hr class="divider light my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="650" />
<p class="text-white mb-5 text-sub" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="800">For this Rails app project have used a variety of Rails Gems and Javascript - jQuery Libraries and differnt CSS animations.</p>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000">
<img src="/LazPap/images/Ruby_On_Rails.png" class="icon-ruby" />
</div>
</div>
</div>
</div>
</section>
<p><!-- About Section --></p>
<section class="page-section" id="work">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="work-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">My Wordpress Work</h1>
</div>
<div class="col-lg-10 text-center container-grid">
<div data-aos="fade-right" data-aos-duration="1000" data-aos-delay="800">
<div class="box">
<div class="content">
<h2>01</h2>
<h3>Bazagiazi</h3>
Visit
</div>
</div>
</div>
<div data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">
<div class="box">
<div class="content">
<h2>02</h2>
<h3>Empty</h3>
Stay Here
</div>
</div>
</div>
<div data-aos="fade-left" data-aos-duration="1000" data-aos-delay="1000">
<div class="box">
<div class="content">
<h2>03</h2>
<h3>Empty</h3>
Stay Here
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<p><!-- Contact Section --></p>
<section class="page-section" id="contact">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="mt-0 text-heading purple-text" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">Let's Get In Touch!</h1>
<hr class="divider my-4" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600" />
<p class="text-muted mb-5 text-sub" data-aos="zoom-out-up" data-aos-duration="1000" data-aos-delay="800">Feel free to contact me for any questions I'll glad to answer you as soon as i can!</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 ml-auto text-center mb-5 mb-lg-0">
<i class="fas fa-envelope fa-3x mb-3 text-muted" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="1000"></i>
<a class="d-block text-sub" href="mailto:lazospap3#gmail.com" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="1200">lazospap3#gmail.com</a>
</div>
</div>
</div>
<button id="btnScrollToTop" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<i class="material-icons">arrow_upward</i>
</button>
</section>
<script type="text/javascript">
const btnScrollToTop = document.getElementById("btnScrollToTop");
btnScrollToTop.addEventListener("click", function() {
$("html, body").animate({scrollTop: 0}, "slow");
});
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<p><!--Heading Text translateY movement-->
<script type="text/javascript" defer="">
$(window).scroll(function() {
var scrollval = $(this).scrollTop();
$(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
});
</script></p>
<script defer="">
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script defer="">
AOS.init();
</script>
<!--Modaal script -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top"> <img src="/LazPap/images/Logo.png " class="logo-image"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger modaal" data-modaal-type="inline" data-modaal-animation="fade" href="#inline" data-modaal-height="500">Contact</a>
<div id="inline" style="display:none;">
<h2 class="modaal-heading">Contact Me</h2>
<h1 class="modaal-heading"><a class="d-block" href="mailto:lazospap3#gmail.com">lazospap3#gmail.com</a></h1>
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/modaal#0.4.4/dist/js/modaal.min.js"></script>
<script type="text/javascript">
$(".inline").modaal();
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
<script>
$("body").niceScroll({
cursorcolor:"#fb6542",
cursorwidth:"12",
cursorborder: "none",
cursorborderradius: 4,
scrollspeed: 10,
});
</script>
<footer class="bg-light py-5">
<div class="container">
<div class="small text-center text-muted text-sub">Copyright © 2019 - LazPap</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery/jquery.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="https://blackrockdigital.github.io/startbootstrap-creative/vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Custom scripts for this template -->
<script src="https://blackrockdigital.github.io/startbootstrap-creative/js/creative.min.js"></script>
<!--CDN for Scroll opacity -->
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" defer>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 150) {
$(".background-image-left").css({"opacity" : "0"})
$(".background-image-right").css({"opacity" : "0"})
$(".background-image-under").css({"opacity" : "0"})
$(".background-text").css({"opacity" : "0"})
$("#btnScrollToTop").css({"opacity" : "1"})
}
else {
$(".background-image-left").css({"opacity" : "1"})
$(".background-image-right").css({"opacity" : "1"})
$(".background-image-under").css({"opacity" : "1"})
$(".background-text").css({"opacity" : "1"})
$("#btnScrollToTop").css({"opacity" : "0"})
}
})
})
</script>
<!--Heading Text translateY movement-->
<script type="text/javascript" defer>
$(window).scroll(function() {
var scrollval = $(this).scrollTop();
$(".background-text").css("transform",'translateY('+-scrollval/1.5+'%)');
});
</script>
<script defer>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script defer>
AOS.init();
</script>
</body>
</html>
CSS
#btnScrollToTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background: #e62739;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #ffffff;
outline: none;
cursor: pointer;
border: none;
}
#btnScrollToTop:active{
background: #cc2333;
}
.purple-text {
color: #5a19b5;
}
.container-grid {
display: grid;
grid-template-columns: 1;
position: relative;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-gap: 0 40px;
grid-template-rows: auto;
}
.container-grid .box {
display: flex;
height: 400px;
background: #060c21;
position: relative;
justify-content: center;
align-items: center;
border: 1px solid #000;
}
.container-grid .box:before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: #fff;
transform: skew(2deg,2deg);
z-index: -1;
}
.container-grid .box:nth-child(1):before {
background: linear-gradient(315deg, #ff0057, #e64a19);
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.container-grid .box:nth-child(2):before {
background: linear-gradient(315deg, #89ff00, #00bcd4);
}
.container-grid .box:nth-child(3):before {
background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container-grid .box::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.content {
position: relative;
padding: 20px;
transform: translateY(40px);
}
.box .content h2 {
position: absolute;
top: -140px;
margin: 0;
padding: 0;
font-size: 10em;
color: rgba(255,255,255,.05);
transition: 0.5s;
}
.box:hover .content h2 {
top: -210px;
}
.box .content h3 {
margin: 0 0 10px;
padding: 0;
font-size: 34px;
font-weight: 500;
color: #fff;
font-family: "Montserrat", sans-serif;
}
.box .content a {
position: relative;
margin: 20px 0 0;
padding: 10px 20px;
border: 1px solid #fff;
display: inline-block;
color: #fff;
transition: 0.5s;
transform: translateY(-40px);
opacity: 0;
visibility: hidden;
text-decoration: none;
font-family: "Montserrat", sans-serif;
}
.box:hover .content a {
transform: translateY(0px);
opacity: 1;
visibility: visible;
}
.box .content a:hover {
color: #000;
background: #fff;
}
.work-text {
font-family: "Montserrat", sans-serif;
color: #5a19b5;
margin-bottom: 50px;
}
.bg-work {
background-color: #e7eeed;
}
.modaal-heading {
text-align: center;
font-family: "Montserrat", sans-serif;
margin-bottom: 115px;
}
.text-sub{
font-family: 'Montserrat', sans-serif;
}
.text-heading {
font-family: 'Montserrat', sans-serif;
font-size: 34px;
}
.background-text {
text-align: center;
left: 20%;
position: absolute;
font-family: 'Secular One', sans-serif;
color: #fff55a;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
font-size: 90px;
}
.logo-image {
top: 0px;
left: 0px;
}
.masthead-background {
height: 100vh;
min-height: 500px;
background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.masthead-under-background {
height: 100vh;
min-height: 500px;
background-image: url("{{ '/images/Under_Background.png' | prepend: site.baseurl }}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
}
.background-image-left {
position: relative;
top: 50%;
left: 10%;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.background-image-right {
top: 50%;
left: 700px;
position: relative;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.background-image-under {
position: relative;
top: 150px;
left: 450px;
transition: .8s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
height: auto;
}
.icon-ruby {
position:relative;
transition: transform 1s;
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
}
.icon-ruby:hover {
transform: scale(1.2);
}
.line-height {
line-height: 2;
}
#media (min-width: 320px) and (max-width: 480px) {
.icon-ruby{width: 60%;}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-left{width: 30%;}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-under {
width: 50%;
left: 100px;
top: 100px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-image-right {
width: 48%;
left: 250px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-left {
width: 22%;
left: 10px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-under {
width: 60%;
left: 250px;
}
}
#media (min-width: 481px) and (max-width: 767px) {
.background-image-right {
width: 50%;
left: 400px;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-left {
width: 20%;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-under {
width: 70%;
}
}
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
.background-image-right {
width: 70%;
left: 500px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.background-text {
left: 10px;
}
#media (min-width: 576px) {
.background-text {
font-size: 100px;
}
}
#media (min-width: 768px) {
.background-text {
font-size: 150px;
}
}
#media (min-width: 992px) {
.background-text {
font-size: 180px;
}
}
#media (min-width: 1200px) {
.background-text {
font-size: 220px;
}
}
#media (min-width: 320px) and (max-width: 480px) {
.modaal-heading{
font-size:7vw;
}
}
Related
body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.
You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}
I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
I am trying to apply some styling rule to three #id selectors in a media query however it does not seem to be working. However if I do the same outside the query, it is working fine (but unfortunately I just need that rule for that particular screen size. What i am trying to achieve is to adjust the margins of the div according to the image size when the screen size is below 767px (there is a gap on left and right side).
Thank you!
body {
background-color: #fffffe;
}
.container{
margin: 0;
}
/** HEADER **/
#header-nav{
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img { /** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 { /** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover{
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.row {
margin-top: 15px;
}
#main-tile, #dessert-tile, #smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover, #dessert-tile:hover, #smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span, #dessert-tile span, #smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (min-width:767px) and (max-width: 576px){
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile, #dessert-tile, #smoothie-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile, #dessert-tile, #smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<h1>Brand Name</h1>
</div>
</div>
<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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center"> <!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="main-tile"><span>Mains</span></div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div id="dessert-tile"><span>Deserts</span></div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div id="smoothie-tile"><span>Smoothies</span></div>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
This line in your code is the problem:
#media (min-width:767px) and (max-width: 576px){ ...
In your code this applies to all widths wider than 767 and all widths smaller than 576px. I suppose it should be like this instead:
#media (max-width:767px) and (min-width: 576px){ ...
...to cover widths between 576 and 767px
ADDITION after comments:
I added this (general) rule:
.jumbotron img {
max-width: 100%;
}
Otherwise the image inside the jumbotron would appear at its original size an overflow the jumbotron at smaller screen sizes, therefore also making the whole page wider / forcing a scrollbar.
body {
background-color: #fffffe;
}
.container {
margin: 0;
}
/** HEADER **/
#header-nav {
background-color: #5d46ea;
height: 78px;
border: 0;
}
#logo-img {
/** Logo **/
background: url(../images/imgonline-com-ua-resize-wU3umxGfKn8Y0H6h.jpg) no-repeat;
width: 150px;
height: 62px;
margin-left: 20px;
margin-right: 20px;
}
.navbar-brand h1 {
/** Blog Name **/
color: #fd9200;
font-family: 'oxygen', sans-serif;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
#nav-list a {
color: #fd9200;
font-weight: bold;
background: #5d46ea;
}
#nav-list a:hover {
background: #684fff;
}
.custom-toggler.navbar-toggler {
border: 1px solid rgb(253, 146, 0);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(253, 146, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/** HOME PAGE **/
.container {
margin-top: 10px;
}
.jumbotron {
background-color: #ffffff;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
padding: 0;
margin: 0;
}
.jumbotron img {
max-width: 100%;
}
.row {
margin-top: 15px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
height: 250px;
width: 100%;
margin-bottom: 15px;
position: relative;
border: 2px solid #5d46ea;
box-shadow: 0 0 10px #5d46ea;
overflow: hidden;
}
#main-tile:hover,
#dessert-tile:hover,
#smoothie-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#main-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#dessert-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#smoothie-tile {
background: url(https://via.placeholder.com/360x250) no-repeat;
background-position: center;
}
#main-tile span,
#dessert-tile span,
#smoothie-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #6a6a6a;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/*************** MEDIA QUERIES ***************/
/** LARGE DEVICE **/
#media (min-width:1200px) {
.jumbotron {
background: url(https://via.placeholder.com/1200X675) no-repeat;
height: 675px;
}
}
/** MEDIUM DEVICE **/
#media (min-width:992px) and (max-width: 1199px) {
.jumbotron {
background: url(https://via.placeholder.com/992x558) no-repeat;
height: 558px;
}
}
/** SMALL DEVICE **/
#media (min-width: 768px) and (max-width: 991px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
}
/** EXTRA SMALL DEVICES **/
#media (max-width:767px) and (min-width: 576px) {
.jumbotron {
background: url(https://via.placeholder.com/768x432) no-repeat;
height: 432px;
}
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 360px;
margin: 0 auto 15px;
}
}
/** SUPER EXTRA SMALL DEVICES **/
#media (max-width: 479px) {
#main-tile,
#dessert-tile,
#smoothie-tile {
width: 280px;
margin: 0 auto 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-witdth, initial-scale=1">
<title>Food Blog</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- HEADER -->
<header>
<nav id="header-nav" class="navbar navbar-light navbar-expand-lg">
<div class="navbar-header">
<a href="index.html" class="float-left d-none d-md-block">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html">
<h1>Brand Name</h1>
</a>
</div>
</div>
<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="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav-list" class="navbar-nav ml-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dessert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Smoothie</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<div id="main-content" class="container mx-auto">
<!-- JUMBOTRON -->
<div class="jumbotron text-center">
<!-- FEATURED RECIPE -->
<img src="https://via.placeholder.com/768X432" alt="New Recipe Image" class="img-fluid d-block d-md-none">
</div>
<!-- TILES BELOW THE JUMBOTRON -->
<div id="home-tiles" class="row text-center">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="main-tile"><span>Mains</span></div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="menu-categories.html">
<div id="dessert-tile"><span>Deserts</span></div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="menu-categories.html">
<div id="smoothie-tile"><span>Smoothies</span></div>
</a>
</div>
</div>
</div>
<!-- END OF MAIN CONTENT -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar
The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
I cannot center my bootstrap thumbnail images no matter what I try on tablet size and smaller. Once thumbnails reach thoses sizes they no longer scroll to stay center of screen. I have tried everything I can think of from adding center block to both my thumbnail class's and my img responsive class's HTML to text-algin center and margin auto 0. Nothing changes.
Here is my html
<div class="portfolio">
<div class="container">
<a name="porty"></a>
<h1 class="text-center" id = "port">My Work</h1>
<div class="row">
<div class="col-md-4">
<div class="thumbnail ">
<div class="caption">
<h4 class="text-center">A Berine Sanders Tribute page made with HTML,CSS, and Bootstrap</h4> <i class="fa fa-codepen fa-5x fa-fw" id="first"></i>
</div>
<img src="http://goodedevelopment.com/images/Bernie.PNG" class="img-responsive center-block" alt="tribute">
</div>
<legend>Tribute page</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">Google mockup page made with HTML,CSS,and Bootstrap</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="second"></i>
</div>
<img src="http://goodedevelopment.com/images/google.png" class="img-resposive center-block" alt="google">
</div>
<legend>Google homepage</legend>
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h4 class="text-center">A cannon game made with HTML,CSS, and Javascript</h4>
<i class="fa fa-codepen fa-5x fa-fw" id ="icon"></i>
</div>
<img src="http://goodedevelopment.com/images/cannon.png" class="img-responsive center-block" alt="cannon">
</div>
<legend>Cannon game</legend>
</div>
</div>
Here is my CSS
/*Portfolio*/
.portfolio {
background-color:#706C61;
padding-top: 50px;
padding-bottom: 100px;
display: inline-block;
width: 100%;
height: 800px;
position:relative;
}
.portfolio h1 {
font-size: 65px;
font-family: "Roboto",serif !important;
color: #0d0d0d !important;
}
.row {
padding-top: 100px;
}
.thumbnail {
height: 250px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border: 1px solid black !important;
border-radius: 5px !important;
}
.caption img {
flex-shrink: 0;
max-width 100%;
max-height: 100%;
}
.caption {
position: absolute;
top: 0;
right: 0;
background: rgba(128, 128, 128, 0.75);
width: 100%;
height: 100%;
padding: 2%;
display: none;
text-align: center;
color: #fff !important;
z-index: 2;
font-family: "Montserrat",serif !important;
}
.caption a {
text-decoration: none;
color: white;
}
.caption h4 {
position: relative;
left: 5px;
bottom: 10px;
font-size: 25px;
}
.caption i:hover {
color: orange !important;
}
legend {
font-family: "Roboto",serif !important;
border-bottom: none !important;
color: #0d0d0d !important;
font-size:22px; !important;
height:200px;
}
#first {
position: relative !important;
bottom: -35px !important;
}
#second {
position: relative !important;
bottom: -35px !important;
}
#icon {
position: relative;
top: 30px;
}
#media screen and (min-width:767px) and (max-width:1199px) {
#first {
position: relative;
bottom: 20px;
}
#icon {
top: 50px !important;
}
.caption h4 {
font-size: 20px;
}
}
#media screen and (min-width:767px) and (max-width:991px) {
#first {
position: relative;
top: 50px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
.caption i {
position: relative;
top: 50px;
}
#icon {
position: relative;
top: 65px !important;
}
.caption .fa {
font-size: 50px;
}
}
#media screen and (max-width: 1200px) {
.portfolio h1 {
font-size: 55px;
}
}
#media screen and (max-width: 991px){
.thumbnail {
height: 369px;
width: 440px;
position: relative;
right: -142px;
bottom: 48px;
}
.portfolio{
height: 2650px;
}
#profile li {
position: relative;
left: 60px;
}
.caption h4 {
font-size: px !important;
}
.caption .fa {
font-size: 80px !important;
}
legend {
height: 80px;
position: relative;
left: 139px;
bottom: 53px;
}
}
#media screen and (max-width: 965px) {
.portfolio {
margin-top: -150px !important;
}
}
#media screen and (max-width:767px) {
#first {
position: relative;
top: 25px;
}
.caption h4 {
font-size: 30px;
}
.caption {
font-size: 15px;
}
#port{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: -1285px;
left: 0;
bottom: 0;
right: 0;
}
.thumbnail {
position: relative;
bottom: 0px;
}
legend
{
position: relative;
bottom: 13px;
}
}
#media screen and (max-width: 454px){
.caption h4{
font-size:25px;
}
#first{
top:15px;
}
#second{
top:15px;
}
}
#media screen and (max-width:400px) {
#icon {
position: relative;
bottom: 20px;
}
}
#media screen and (max-width:397px) {
#icon {
position: relative;
top: 0px;
}
}
#media screen and (max-width:390px) {
#first{
top:5px;
}
}
#media screen and (max-width:325px) {
.caption .fa {
font-size:60px;
}
}
#media screen and (max-width:307px) {
#first{
top:-5px;
}
}
/*End Portfolio*/
Here is the website
And finally here is a screenshot of what I am experiencing any help would be greatly appreciated thanks!
Instead of just using class="col-md-4" you should include "instructions" for Bootstrap at different screen sizes. Using multiple classes like class="col-xs-12 col-sm-6 col-md-4" would adjust the number of columns at the various screen sizes, making it easy to center the contents of each column, and just use the "img-responsive" class on the images so they will always fit in the column they are in. Then when the screen size is smaller, fewer columns will be displayed but the content of the column remains the same and stays centered in the column. If you want to center the column on the screen without filling the width of the screen (like to use col-xs-10 so it doesn't fill the width of 12 col's) then use the col-x-offset-x class to create a "blank" column to the left of where your div will display. You can use combinations of screen sizes and offsets as needed. The grid makes it really easy to get the alignment you want at different sizes without having to use CSS to define exact pixels for margins and whatnot. Once you start overwriting the CSS with "other instructions" as far as height/width go, things can get goofy...
Your fixed-navbar are with a width bigger than lower resolutions, theres alot of blank space on the right when you drop the resolution. I recommend you start developing your website following this basic bootstrap responsible template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Bare - Start Bootstrap Template</title>
<!-- Custom CSS -->
<link data-require="bootstrap-css#3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<style>
body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}
</style>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse 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="#bs-example-navbar-collapse-1">
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1>A Bootstrap Starter Template</h1>
<p class="lead">Complete with pre-defined file paths that you won't have to change!!</p>
<ul class="list-unstyled">
<li>Bootstrap v3.3.7</li>
<li>jQuery v1.11.1</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</body>
</html>
Rebase your website inside the .container and link your style and keep going.. I hope it helps you to understand better the concepts of bootstrap, i cannot do the whole job for you after all you are a full stack developer.