I've been working on a website and I can't get the navbar at the top to display above everything else. It displays above the first header and p tag but after that when scrolling more it displays under the images and headers that are in the bootstrap 4 grids. I have tried setting the z-index to stupidly big numbers, setting the position to absolute and setting the z-index to a big number again, but neither of those approaches worked. I know I have set the background of the div/navbar to black but it still won't cover up the images/text. How can I fix this?
TL;DR: my navbar won't display above any content in my bootstrap rows and i've tried everything, how do i fix this?
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
.navigation {
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
background-color: black;
}
.navigation li {
display: inline-block;
font-size: 20px;
padding: 20px;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navigation li a:hover {
text-decoration: none;
color:#ddd;
}
.navigation li a:active {
text-decoration: none;
color:#ddd;
}
.active {
color:#fff;
}
.navline-active {
height: 5px;
width: 100%;
background-color: #fff;
margin: auto;
}
#headerline {
height: 10px;
width: 70%;
background-color: #fff;
margin: auto;
}
.no-a-style {
color:white;
}
.no-a-style:hover {
text-decoration: none;
color:grey;
}
.navheader {
color:white;
padding-right: 10px;
font-size:25px;
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer {
text-align: center;
color: lightgrey;
font-family: Quicksand, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#footer-bold {
font-family: Quicksand-Bold, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.body {
color:white;
}
.body p {
font-size:18px;
}
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.nav-container {
background:black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<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>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Add z-index property for your sticky class in css and set it to a high value. That will keep it above anything else.
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
#font-face {
font-family: Quicksand-Bold;
src: url(../data/Quicksand-Bold.otf);
}
#font-face {
font-family: Quicksand;
src: url(../data/Quicksand-Regular.otf);
}
html {
background-color: black;
}
.container-fluid {
background-color: black;
}
.row {
margin:auto;
}
.sticky {
position: sticky;
top:0;
z-index: 1000;
}
.navitem {
color:white;
}
.navline {
height: 5px;
width: 0;
background-color: #fff;
margin: auto;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.navitem:hover + .navline {
-webkit-transition: width 0.5s;
transition: width 0.5s;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- redacted lmao -->
<!-- Site embed properties -->
<meta property="og:title" content="Hex - Portfolio" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://hexbugman213.net/" />
<meta property="og:image" content="http://hexbugman213.net/favicon.png" />
<meta property="og:description" content="<?php echo $desc; ?>" />
<title>Hex - Portfolio</title>
<!-- meta -->
<meta name="Hex" content="Hex - Portfolio" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style/beanstrap -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<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>
</head>
<body>
<div class="container-fluid">
<div class="container sticky">
<div class="sticky nav-container">
<ul class="navigation">
<li><span class="navheader">Hex</span>
<div class="navline"></div>
</li>
<li>Home
<div class="navline"></div>
</li>
<li>Links
<div class="navline"></div>
</li>
<li>Portfolio
<div class="navline"></div>
</li>
<li>Files
<div class="navline"></div>
</li>
<li>Other
<div class="navline"></div>
</li>
</ul>
</div>
</div>
<br>
<div class="container body">
<h1>Portfolio</h1>
<h2>Click on any item below for more information.</h2>
<br>
<div class="row">
<div class="col-sm-4" data-aos="fade-right"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-left">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
<div class="row">
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
</div>
<div class="row">
<div class="col-sm-4" data-aos="fade-left"><img width=100% alt="image" src="http://dummy-images.com/abstract/dummy-600x450-White.jpg"></div>
<div class="col-sm-8 text-center " data-aos="fade-right">
<h1 class="p-text vertical-align">content</h1>
</div>
</div>
</div>
<hr>
<div id="footer">
<h3>Website designed by <span id="footer-bold">Hex</span>.</h3>
</div>
</div>
<script>
AOS.init();
</script>
</body>
</html>
Run code snippet
Related
This is what I have tried.
body{
background: lightblue;
padding:0px;
margin:0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-serif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.6rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
No matter what I change I'm not able to remove that bottom padding.
Also, I am not able to get that exact look as per the image. Does the image have a different font-family?
My expected output is as shown below.
Thank you
reduce the line-height:
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 35px;
vertical-align: -0.7rem;
line-height: 0.4;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="btn btn-primary mt-2">
<span/> New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
After so many trials, finally got it.
Thank you everyone for your help.
body {
background: lightblue;
padding: 0px;
margin: 0px;
}
span {
quotes: "“" "”" "‘" "’";
font-family: sans-seif;
}
span::before {
content: open-quote;
font-size: 49px;
vertical-align: -1.2rem;
line-height: 0.4;
font-family: sans-serif;
}
button{
padding: 0px;
height: 35px;
padding: 0px 8px 0px 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-sm-6 offset-sm-3 d-flex justify-content-center">
<button class="mt-2">
<span/>New Quote
</button>
</div>
</div>
</div>
</div>
</body>
</html>
I have layout with feature list content box, in desktop version it looks pretty fine, but in smaller versions i have problems pad / mobile and that four words with icons just breaking. I think it was not the best solution for this content box layout, what is the best and cleanest way to do this?
I need same look for desktop and for mobile.
Expecting result:
.container {
padding: 0;
}
padding: 71px 0px 0px 0px;
img {
margin-bottom: 6px;
}
h2 {
font-size: 18px;
font-weight: bold;
color: #363636;
text-align: center;
margin-bottom: 7px;
}
p {
font-size: 16px;
line-height: normal;
color: #363636;
}
a {
font-size: 14px;
color: #333333;
border-bottom: 1px solid #ef5300;
text-decoration: none;
padding-bottom: 2px;
}
.col-lg-12 {
padding: 25px 20px 20px 20px;
border-radius: 4px;
border: solid 1px #e9e9e9;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<title>My title</title>
</head>
<body>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="col-lg-12 h-100">
<img src="icons/furniture.png" class="mx-auto d-block">
<h2>Nestandartinių baldų gamyba</h2>
<div class="row">
<div class="col-lg-7">
<span class="far fa-check-square"></span>Privačios paskirties
<span class="far fa-check-square"></span>Viešosios paskirties
</div>
<div class="col-lg-5">
<span class="far fa-check-square"></span>Korpusiniai
<span class="far fa-check-square"></span>Minkšti
</div>
</div>
<p class="text-center">Naudojamos medžiagos<span class="icon-rightcircle"></span></p>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 h-100">
Other content..
</div>
</div>
</div>
</div>
</section>
<!-- 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>
If you want the same "2 rows 2 columns" layout for those list feature box for all desktop and mobile, here's the simple css grid approach:
.list-feature {
display: grid;
grid-template-columns: repeat(2, auto);
grid-gap: 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div class="list-feature">
<span class="far fa-check-square">Privačios paskirties</span>
<span class="far fa-check-square">Korpusiniai</span>
<span class="far fa-check-square">Viešosios paskirties</span>
<span class="far fa-check-square">Minkšti</span>
</div>
I want to scale the below image to the height of the header. Can anyone please tell me why it is not working?
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
img {
max-height: 100%;
max-width: 100%;
}
.scaleableImage {
height: 100%;
width: auto;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<style type="text/css">
</style>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I've adjusted your CSS with the main changes being the following.
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
This limits the row class within the header to a max height of 100%. As you set #header to 10%, row will stay within that height. Also, padding set on col-2 was preventing the image from using the full space. Add padding back as you see fit, but keep in mind that it will shrink the image accordingly if the col class width is reduced. Below is a working example.
html,
body {
height: 100%;
width: 100%;
background-color: red;
}
#header {
background-color: green;
height: 10%;
}
#body {
background-color: blue;
height: 70%;
}
#footer {
background-color: orange;
height: 20%;
}
#header .row {
max-height: 100%;
}
#header .col-2 {
padding: 0;
}
.scaleableImage img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container-fluid" id="header">
<div class="row">
<div class="col-2">
<a href="#" class="scaleableImage">
<img src="https://www.googlewatchblog.de/wp-content/uploads/google-logo-perfekt.jpg" />
</a>
</div>
<div class="col-6">
<span>Second</span>
</div>
<div class="col-4">
<span>Third</span>
</div>
</div>
</div>
<div class="container-fluid" id="body">
<div class="row">
</div>
</div>
<div class="container-fluid" id="footer">
<div class="row">
<div class="col-6">
<span>First</span>
</div>
<div class="col-6">
<span>Second</span>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Hello I am trying to design a web page everything works but container-fluid is adding extra padding on the right.
As you can see in the picture there's a gap right after the navigation bar ends.
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!--Custom Stylesheets and Scripts -->
<link rel="stylesheet" href="resources/css/app.css">
<link rel="stylesheet" href="resources/css/index.css"> </head>
<body>
<!-- navigation bar -->
<div class="container-fluid navigation-bar-container text-center" >
<div class="navigation-bar">
<div class="row">
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Home</button>
<div class="dropdown-content">
Login
Register
Van Boening Sets World Record
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Tour Info</button>
<div class="dropdown-content"> How it Works Games Played How to get your room playing Become an event coordinator Mission and Goals </div>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Logo -->
<div class="logo"> <img src="resources/images/Logos/Logo%20Vertical%20Transparent.png" class="img-responsive center-block"> </div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Events</button>
<div class="dropdown-content"> Schedule Results Locations </div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="navigation-item">
<div class="dropdown">
<button class="dropdown-btn">Contact</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This is my app.css:
body{
font-family: "Open Sans";
}
.navigation-bar{
background-color: black;
height: 65px;
padding-top: 10px;
}
.navigation-bar-container{
padding-left: 0px;
padding-right: 0px;
}
.navigation-item{
padding-top: 10px;
}
.dropdown{
position: relative;
display: inline-block
}
.dropdown-btn {
background-color: transparent;
border: none;
color:#8CFB76;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #1E392A;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: #cccccc;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #234331;
color: #e6e6e6;
}
.dropdown:hover .dropdown-content {
display: block;
}
This is my index.css :
body{
background-color: #1a1a1a;
}
Can someone please tell me how I can fix this?
Edit:
After Changing the code like ZenSystem suggested:
In Bootstrap, .row should be the immediate child of
.container-fluid
The padding on .navigation-bar-container is breaking the normal offset container provides for the .row
Change it to this..
<div class="container-fluid text-center">
<div class="navigation-bar row">
<div class="col-md-2">
<div class="navigation-item">
...
http://www.codeply.com/go/NPtXsxCSxX
I'm currently building a website but I've been having troubles with arranging the content. I'd like to add content to the center of the page, inline with the music tab in the left sidenav. Everytime I add something to the center, it pushes everything downwards.
<!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>Rob's Music</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='//fonts.googleapis.com/css?family=Biryani' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/c37e8e0ff9.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
background-color: #f8f5ef;
}
.navbar-default {
background-color: #f8f5ef;
border-color: #f8f5ef;
color: #f8f5ef;
}
[class^="btn-"],
[class*="btn-"] {
display: inline-block;
background-color: #f8f5ef;
float: right;
padding-top: 1%;
}
[class^="reverb-nation"],
[class*="reverb-nation"] {
background-position: right;
height: 16px;
width: 16px;
padding-top: 2.5%;
}
[class^="navbar-brand"],
[class*="navbar-brand"] {
padding-left: 0%;
font-size: 450%;
padding-top: 2.5%;
}
#home {
font-size: 200%;
color: #000000;
}
#home:hover {
font-size: 200%;
color: #000000;
}
#music {
font-size: 200%;
color: #000000;
}
#music:hover {
font-size: 200%;
color: #000000;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
#content {
font-size: 100%;
padding-left: 0%;
width: 600%;
}
</style>
</head>
<body>
<!-- Navbar -->
<div class="container-fluid">
<h1 class="navbar-brand">My Band</h1>
<div class="btn-group">
<a class="btn btn-default" href="">
<i class="fa fa-facebook-square"></i>
</a>
<a class="btn btn-default" href="">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
<a class="btn btn-default" href="">
<img src="../1484039391_ReverbNationsm.png" class="reverb-nation"></img>
</a>
</div>
</div>
<!-- Title and links to other pages -->
<div class="container-fluid">
<div class="col-sm-2 sidenav">
<div class="hover-icon">
<br></br>
<div class="row">
<a id="home" href="">Home</a>
<div class="col-sm-6">
<a id="music" href="music.html">Music</a>
</div <div class="col-sm-6">
<h2>News</h2>
<p class="well" id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus magna ut se
</p>
</div>
</div>
<div class="row">
<h3>News</h3>
<h3>Events</h3>
<h3>Photos</h3>
<h3>Videos</h3>
<h3>About</h3>
<h3>Contact</h3>
</div>
</div>
</div>
</div>
<br></br>
<br></br>
</body>
</html>