I changed my bootstrap files and now my Navbar has broken. I've been updating my code to match the docs on their website but I just can't figure out what i'm missing. I thought it was because this code needed updating.
The Nav is now under my header image
from
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
to
<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>
I've made a codepen here - https://codepen.io/grabthereef/pen/pxGweE
Before I changed version it looked like this;
If you want the navbar to be on top of the image placeholders, you just need to add fixed-top css class to the navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
Demo
Documentation: http://getbootstrap.com/docs/4.1/components/navbar/#placement
If you want to know what really went wrong, you need to also post the HTML before you migrated to bootstrap 4 so that we can see the differences?
I might be wrong, but why do not just swap them:
.blank-image {
height: 500px;
background-image: url('https://dummyimage.com/900x500/888/fff');
}
.navbar {
position: absolute !important;
width: 100%;
margin-bottom: 0;
padding-top: 0;
background: #000;
border: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-o-transition: all .6s;
-moz-transition: all .6s;
-webkit-transition: all .6s;
-ms-transition: all .6s;
transition: all .6s;
background-color: transparent !important;
}
.navbar-no-bg {
padding-top: 10px;
background: none;
}
ul.navbar-nav {
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
letter-spacing: 3px;
color: #fff;
font-weight: 400;
text-transform: uppercase;
}
.navbar-inverse ul.navbar-nav li a {
color: #ddd;
border: 0;
}
.navbar-inverse ul.navbar-nav li a:hover {
color: #fff;
border: 0;
}
.navbar-inverse ul.navbar-nav li a:focus {
color: #fff;
outline: 0;
border: 0;
}
/* .navbar-inverse ul.navbar-nav li a.btn-link-3 {
display: inline-block;
margin: 9px 0 0 15px;
padding: 6px 15px;
background: #df6482;
border: 0;
font-family: 'Josefin Sans', sans-serif;
font-size: 14px;
font-weight: 300;
color: #fff;
opacity: 1;
text-transform: uppercase;
-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}
.navbar-inverse ul.navbar-nav li a.btn-link-3:hover,
.navbar-inverse ul.navbar-nav li a.btn-link-3:focus,
.navbar-inverse ul.navbar-nav li a.btn-link-3:active,
.navbar-inverse ul.navbar-nav li a.btn-link-3:active:focus {
outline: 0; opacity: 0.6; color: #fff;
} */
.navbar-brand {
text-transform: uppercase;
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 4px;
font-weight: 400;
font-size: 22px;
color: #fff !important;
/* text-indent: -99999px; */
}
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: 0;
}
<!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>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#top-navbar-1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.php">Navbar</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-navbar-1">
<ul class="nav navbar-nav navbar-right">
<li>Take A Tour</li>
<li>What We Offer</li>
<li>Rates</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<div class="blank-image"></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>
Related
I'm not sure if this is a dumb question, and maybe my brain is exploding already. I have a contact section on my website. For some reason, the last item of it is cutting off in tablet size and the only way I can see to fix it is by changing the number of columns per each section, which I did from col-md-3 to col-md-4, but it's not really what I want. It got a little better, but for some reason it is still cutting off. Is there a way to make the text wrap like the column before it?
I am leaving the code here. I removed most sections of the website since they are not important, but left the whole CSS code.
This is an image of how it looks like
and here is the codepen https://codepen.io/hailtothev612/pen/JjXVjMP
HTML
<!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>Stages of Change Counseling</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght#400;500;700&display=swap" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navbar">
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark sticky-top">
Stages of Change Counseling
<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 id="navbarNav" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home <span class="sr-only">(current)</span>
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Services
</li>
<li class="nav-item">
Approach
</li>
<li class="nav-item">
Commitment
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div><!--navbarNav-->
</nav>
<main>
<section id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="header">Contact</h1>
</div><!--col-->
<div class="col-md-3 mx-auto contact-items"><h5>Phone</h5><span class="contact-text">203.312.3812</span></div>
<div class="col-md-3 mx-auto contact-items"><h5>Address</h5><span class="contact-text">495 Orange St, 3rd floor, New Haven, CT 06511</span></div>
<div class="col-md-3 mx-auto contact-items"><h5>Email</h5><span class="contact-text">stagesofchangecounseling#gmail.com</span></div>
</div><!--row-->
</div><!--container-->
</section>
</main>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Cormorant Garamond', serif;
color: #B19BD9;
overflow-x: hidden;
}
#navbar {
background: #B19BD9;
text-transform: uppercase;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255,255,255,1);
padding-right: 15px;
}
.navbar-dark .navbar-toggler {
color: rgba(255,255,255,1);
border: solid 2px rgba(255,255,255,.5);
}
section {
padding-bottom: 80px;
}
#cta {
font-weight: 700;
font-size: 1.5rem;
text-align: center;
padding-top: 50px;
}
.main-text {
font-size: 1.2rem;
text-align: center;
padding-top: 40px;
}
.header{
font-weight: 700;
text-align: center;
text-transform: uppercase;
padding: 30px 0 20px 0;
}
#services {
background-color: rgba(177, 155, 217, 0.1);
}
/*Bullet points*/
.s-link{
list-style-type: none;
font-size: 2.2rem;
}
.s-link .s-span {
font-size: 1.2rem;
}
#services-list .s-link:before{
content: "\2022";
vertical-align: middle;
padding-right: 10px;
}
#contact{
background-color: rgba(177, 155, 217, 0.1);
}
.contact-items {
text-align: center;
text-transform: uppercase;
}
h5{
font-weight: 700;
}
.contact-text{
font-weight: 400;
font-size: 1.2rem;
text-transform: none;
}
#phone, #mailto{
text-decoration: none;
color: #B19BD9;
}
#phone:hover, #mailto:hover {
color: rgba(177, 155, 217, 0.6);
}
footer{
background-color: #B19BD9;
padding: 10px;
}
p#footerText{
padding-top: 12px;
color: white;
}
span#heart {
color: pink;
}
a#website {
text-decoration: none;
color: white;
}
a#website:hover {
color: rgba(255,255,255,0.8)
}
#media only screen and (max-width: 1200px) {
#dogs {
padding-top: 40px;
}
section {
padding-bottom: 30px;
}
.main-text {
padding-top: 25px;
}
.contact-items {
padding-bottom: 20px;
}
}
Add overflow-wrap: break-word; to your a tag
#mailto {
text-decoration: none;
color: #B19BD9;
overflow-wrap: break-word;
}
I would like to have a custom color (#5f788a) for my navbar, however, I understand that in order to have the toggle menu in mobile version, the navbar class must be navbar-light or navbar-dark (according to Bootstrap). This, of course, overrides my custom navbar color and it looks like I have to choose between the hamburger menu OR my custom color.
Things I have tried:
1). Using ! important in CSS to override the styling;
2). Styling with the background-color attribute in CSS;
3). Styling body but this affects rest of site colors, not just navbar.
Here is the CSS:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #5f788a;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
#parent {
list-style: none;
width: 100%;
height: 90px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
And the of the site:
<body>
<header class="site-header">
<nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Company Name (v0.01)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- SEARCH BOX-->
<!-- <form class="form-inline my-2 my-lg-0">-->
<!-- <input class="form-control mr-sm-1" id="search_box" type="search" placeholder="Find some stuff..." aria-label="Search" align="middle">-->
<!-- <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" align="center">Search</button>-->
<!-- </form>-->
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="/post/new">New Post</a>
<a class="nav-item nav-link" href="/send_invites">Invite</a>
<a class="nav-item nav-link" href="/account">My Account</a>
<a class="nav-item nav-link" href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a>
{% else %}
<a class="nav-item nav-link" href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<a class="nav-item nav-link" href="/register"><span class="glyphicon glyphicon-user"></span> Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
Could it be that I should be trying to style the body? If so, wont that affect the rest of the site, not just the navbar? Thanks for your help
navbar-light and navbar-dark are helper classes, what they do is change the colour of the text from white (if navbar-dark) to black (if navbar-light), so that the text colour on your navbar doesn't conflict with the navbar colours
you can do this:
.navbar {background-color: #5f788a;}
and add the class "navbar-dark" to your nav element.
This is assuming you're using the latest version of bootstrap, 4.3
Bootstrap 4.0.0 Demo below:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #444444;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #5f788a;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
#parent {
list-style: none;
width: 100%;
height: 90px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
<!DOCTYPE html>
<!-- saved from url=(0044)https://stack.fleeksite.com/bootstrap-navbar -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TurboTobias</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top" style="background-color: rebeccapurple;">
<div class="container">
<a class="navbar-brand mr-4" href="https://stack.fleeksite.com/">Bench of Thoughts (v0.01)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="https://stack.fleeksite.com/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://stack.fleeksite.com/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<a class="nav-item nav-link" href="https://stack.fleeksite.com/register"><span class="glyphicon glyphicon-user"></span> Register</a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
you can just add:-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Instead of what you wrote earlier
i inserted a div in between my text and my header picture. please can anyone help me. i would be grateful. When i placed the div it goes to the back of the text and moves up. what can i do.I am finding it hard to add the code file. but this is the div overlapping
MY JSFIDDLE IS HERE JS FIDDLE
/*REVEAL LINK*/
.revela {
width: 100%;
text-align: center;
height: 100px;
background-color: #8080ff;
}
.button, .button:focus {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Bree Serif', serif;
text-transform: uppercase;
}
.button:hover {
background-color: #8080ff;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
/*IMAGE DESIGN*/
img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
/*margin-top: -50px;*/
}
.exampleClass {
padding: 0;
margin: 0;
}
*{
margin: 0;
padding: 0;
}
/*NAVBAR*/
nav {
width: 100%;
}
/*body {
padding-top: 70px;
}*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
top: calc(100% + 9px);
}
.navbar {
padding: 10px 0;
margin:0;
border-radius:0;
border:none;
width: 100% !important;
/*z-index: 1;*/
font-family: 'Bree Serif', serif;
}
.navbar-default{
background-color: #8080ff;
width: 100% !important;
}
.navbar-default .navbar-header > a, .navbar-default .navbar-header > a:focus, .navbar-default .navbar-header > a:hover {
color:white;
font-size: 2em;
}
.navbar-header button {
border:none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > li > a {
color: white;
transition: color 0.5s;
font-size: 1.1em;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover{
color: white;
}
.navbar-default .navbar-nav>li.list:after {
content: "";
display:block;
border-bottom: 2px solid white;
transform: scale(0);
transition: transform 0.8s ease-in;
transform-origin: 0% 50%;
}
.navbar-default .navbar-nav>li.list:hover:after {
transform:scaleX(1);
}
/*ABOUT COMPANY*/
.works {
margin:30px 50px;
}
.history, .about{
font-family: 'Lato', sans-serif;
color:black;
}
.history{
font-size: 50px;
font-weight: 700;
}
.about {
font-size: 22px;
font-weight: 400;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Allamit | Agric Engineering</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/allamit.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class= "container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-demo">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
ALLAMIT
</div>
<div class="collapse navbar-collapse" id="bs-demo">
<ul class="nav navbar-nav navbar-right">
<li class="list">ABOUT</li>
<li class="list">COMPANY WORKS</li>
<li class="list">CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="col-xs-12 exampleClass">
<img class="image" src="https://s18.postimg.org/q7qolxsmx/garri_processing.jpg">
</div>
<div class="revela">
<a class="button" href="revealmaster/index.html">Click Here For A Presentation About The Website</a>
<div class="clearfix"></div>
</div>
<div class="works">
<!-- <div class="col-lg-12"> -->
<h2 class="history">Our Company History</h2>
<p class="about"> The company was incorporated February 1999 (RC 350443). Allamit (Nig). Limited is one of the eminent manufacturers and exporters of quality agricultural and industrial machines in Nigeria. Our company specializes in research and development and promotion of the following machines ... <a class="more" class="more" href="Director/company_profile.html">Read More</a></p>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/allamit.js"></script>
</body>
</html>
this is the div when the picture is removed. it seems the div goes under the bootstrap header
This is the div class revela
After looking into your code, there is a floating happen inside your <div class="revela"> tag,
So you just need to add <div class="clearfix"></div> before <div class="revela"> tag.
So it will look something like:
Hope this may help you.
How to extend the background color of bootstrap navbar to the background header image brand without affecting the height of the navbar? Also the color of the font turned black. I tried to override it with the font color of white in my css file but nothing changed.
Here's how I want it to look like:
This is taken from a psd file.
And this is how it looks like from my attempt converting it to html/css:
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</head>
<body>
<header class="pimg1">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-toggle" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav navbar-center">
<li>Home</li>
<li>About Us</li>
<li><a name="Home" class="nav-link navbar-brand">Logo</a></li>
<li>Menu</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS Code
body, html {
height: 100%;
margin: 0;
font-size: 16px;
font-family: "Source Sans Pro", sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #000009;
}
.border-bottom, .section-two .waffle-border hr, .section-two .b-container hr, .section-three hr {
width: 5%;
border-bottom: 5px solid #f41313;
border: 0;
border-top: 3px solid #f41313;
}
.navbar-default {
background: #FFFFFF;
}
.navbar-default .navbar-brand {
color: #000009; }
.navbar-nav {
width: 100%;
text-align: center; }
.navbar-nav > li {
float: none;
display: inline-block;
}
.navbar-toggle .icon-bar {
background-color: black;
}
.navbar .navbar-nav > li > a {
color: #000009;
line-height: 3rem;
}
.navbar-brand {
font-size: 2.5rem;
color: #FFFFFF;
font-family: "Permanent Marker", cursive;
background-color: #8B1015;
height: 8.125rem;
}
.navbar-default .navbar-toggle {
border-color: #FFFFFF;
}
.pimg, .pimg1 {
position: relative;
opacity: 0.80;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%; }
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: #FFFFFF;
font-size: 4rem;
letter-spacing: 8px;
text-transform: uppercase;
font-family: "Permanent Marker", cursive;
}
.pimg1 {
background-image: url(../imgs/bg-header2.jpg);
opacity: 0.90;
}
Sorry for the messy code, I'm using SASS.
Change
.navbar-default .navbar-brand {
color: #000009;
}
By :
.navbar-default .navbar-nav>li>a.navbar-brand {
color: #000009;
}
Because the following style ".navbar-default .navbar-nav>li>a" is a priority.
I'm building a simple landing page using Boostrap 3. I'm having trouble getting the contents of my jumbotron to be vertically centered. I'm also having trouble getting the jumbotron to show through my transparent navbar; it's currently pinned to the bottom of the navbar. Here is my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Normalize.CSS -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>Hair by Dennis</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hair by Dennis</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 navbar-right text-center">
<li>Services</li>
<li>About Me</li>
<li>My Work</li>
<li>Contact Me</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Jumbotron -->
<div class="jumbotron">
<div class="container text-center">
<h1>Hair by Dennis</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<!-- Triggers Modal -->
Make an Appointment
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.navbar, .jumbotron {
margin-bottom: 0;
}
.navbar {
border-radius: 0;
background: none;
}
.navbar .nav > li > a {
color: #F44336;
}
.navbar-default .navbar-brand {
color: #F44336;
padding-left: 50px;
}
.jumbotron {
border-radius: 0;
background-color: #F44336;
color: #FFF;
height: 520px;
}
/***********************
OUTLINE BUTTONS
************************/
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn-primary.outline {
border: 2px solid #FFF;
color: #FFF;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #F44336;
background-color: #FFF;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #FFF;
color: #FFF;
box-shadow: none;
}
/***********************
CUSTOM BTN VALUES
************************/
.btn {
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.sharp {
border-radius: 0;
}
Please let me know if my questions are unclear. Any help is appreciated!
Add this to your CSS and the vertical centering should work:
.jumbotron > .container {
position: relative;
top: 50%;
transform: translateY(-50%);
}