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;
}
Related
I have a very straight forward HTML-CSS code. However, some CSS properties are being overridden.
Here I have custom properties for the h1 tag, but upon inspecting, I see my defined properties are being overridden by some settings from _type.scss
When I uncheck font-family: inherit; my defined font-family value is used.
I am new to CSS, but I suspect this to be the case of CSS inheritance.
CSS File:
#title{
background-color: #F4C2C2;
color: #fff;
padding: 3% 15%;
}
#features{
text-align: center;
padding: 3% 15%;
background-color: white;
position: relative;
z-index: 1;
}
.body{
font-family: 'Montserrat', sans-serif;
}
h1{
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 4.5rem;
line-height: 1.5;
}
h2{
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
font-weight: 700;
}
h3{
font-size: 1.3rem;
line-height: 2;
}
p{
line-height: 2;
color: #8F8F8F;
}
.navbar{
padding-bottom: 4.5rem;
}
.navbar-brand{
font-family: 'Ubuntu';
font-size: 2.5rem;
}
.nav-item{
padding: 0 18px;
}
.nav-link{
font-size: 1.2rem;
}
.download-button{
margin: 5% 3% 5% 0;
}
.title-image{
width: 50%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
#media (max-width:1028px){
.title-image{
position: static;
transform: rotate(0);
}
}
.featurebox{
padding: 5%;
}
.intropic{
color: #F4C2C2;
margin-bottom: 1rem;
}
.intropic:hover{
color: #ff4c68;
}
#testimonials{
text-align: center;
background-color:#F4C2C2;
color: #fff;
}
.testpic{
border-radius: 50%;
width: 15%;
margin: 20px;
}
.testslide{
perspective: 500px;
}
#press{
background-color:#F4C2C2;
padding-bottom: 3%;
text-align:center;
}
.press-logo{
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item{
height:auto;
padding: 7% 15%;
}
#pricing{
padding: 100px;
text-align: center;
}
.pricing-col{
padding: 3%;
}
.card{
margin: 0 3%;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="SHA-KEY" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="SHA-KEY" crossorigin="anonymous"></script>
<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
</head>
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="">tindog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
Order of loading styles is very important. Generally the last rule takes precedence. CSS files are loaded in the order that they appear in the page. If a class is redefined in a CSS file, it will override the previous class statements.
You are loading your CSS styles firstly:
<link rel="stylesheet" href="css/styles.css">
Try to move loading of styles to the last place:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="SHA-KEY" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Other code is omitted for the brevity --!>
<!-- Your styles should be loaded at the last place --!>
<link rel="stylesheet" href="css/styles.css">
If desired style will not be applied, then the rule of specificity will be applied. So try to add more specificity to your h1 element:
.row > .col-lg-6 > h1 {
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 4.5rem;
line-height: 1.5;
}
You have CSS files for Bootstrap 4 and 5 as well as your own CSS files. In your head section, you’re loading bootstrap/4.0.0 and bootstrap#5.0.0-beta3. You only need one. Try starting with Bootstrap-4’s recommended template
And use one request for Google fonts.
<!doctype html>
Tin Dog
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500;700&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<!--<link rel="stylesheet" href="css/styles.css">-->
<style>
#title {
background-color: #F4C2C2;
color: #fff;
padding: 3% 15%;
}
#features {
text-align: center;
padding: 3% 15%;
background-color: white;
position: relative;
z-index: 1;
}
.body {
font-family: 'Montserrat', sans-serif;
}
h1 {
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 4.5rem;
line-height: 1.5;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
line-height: 1.5;
font-weight: 700;
}
h3 {
font-size: 1.3rem;
line-height: 2;
}
p {
line-height: 2;
color: #8F8F8F;
}
.navbar {
padding-bottom: 4.5rem;
}
.navbar-brand {
font-family: 'Ubuntu';
font-size: 2.5rem;
}
.nav-item {
padding: 0 18px;
}
.nav-link {
font-size: 1.2rem;
}
.download-button {
margin: 5% 3% 5% 0;
}
.title-image {
width: 50%;
transform: rotate(25deg);
position: absolute;
right: 30%;
}
#media (max-width:1028px) {
.title-image {
position: static;
transform: rotate(0);
}
}
.featurebox {
padding: 5%;
}
.intropic {
color: #F4C2C2;
margin-bottom: 1rem;
}
.intropic:hover {
color: #ff4c68;
}
#testimonials {
text-align: center;
background-color: #F4C2C2;
color: #fff;
}
.testpic {
border-radius: 50%;
width: 15%;
margin: 20px;
}
.testslide {
perspective: 500px;
}
#press {
background-color: #F4C2C2;
padding-bottom: 3%;
text-align: center;
}
.press-logo {
width: 15%;
margin: 20px 20px 50px;
}
.carousel-item {
height: auto;
padding: 7% 15%;
}
#pricing {
padding: 100px;
text-align: center;
}
.pricing-col {
padding: 3%;
}
.card {
margin: 0 3%;
}
</style>
tindog
Contact
Pricing
Download
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i class="fab fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i class="fab fa-app-store-ios"></i>Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 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://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
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>
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.
so im coding up this pizza site and ive got a problem - i wanted to put the place's logo in the navbar (which is also a link to main page) but i cannot get it to be displayed. im using twitter bootstrap. here's the code:
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
jsfiddle
Hi now you just define to margin-right:20px; in your li as like htis
.nav-pills>li+li {
margin-right: 20px;
}
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://economictimes.indiatimes.com/photo/33185989.cms');
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span, a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li+li {
margin-right: 20px;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover{
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html"><div id="logo"></div></a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li><a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="http://economictimes.indiatimes.com/photo/33185989.cms" id="logoFB"></a></li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Please do refer the css code and also do check the image path is correct..
#logo {
background-image: url('/wzgorzeSmakowMarcin/logo/logoMedium.png');
background-repeat: no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
background-size: contain;
background-position: center center;
}
I have just add my website logo and it's working fine. Have a look
/*#557c3e zielony*/
/*#F8B004 zloty*/
/*body {
padding-top: 80px;
}*/
body {
font-family: 'news cycle', serif;
background-color: #660000;
}
.navbar {
background-color: #557c3e;
position: relative;
height: 180px;
border-radius: 0;
border: 0;
}
.row {
display: flex;
justify-content: center;
}
#logo {
background-image: url('http://www.dezaro.com/siteimg/logo.png') ;
background-repeat:no-repeat;
width: 431px;
height: 146px;
margin-left: 15px;
}
.nav-pills {
text-transform: uppercase;
font-size: 1.5em;
text-align: center;
vertical-align: center;
margin-top: 45px;
}
.nav-pills span,
a {
color: #F8B004;
}
.nav-pills span {
font-size: 150%;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #f2f2f2;
border-color: #f2f2f2;
color: #F8B004;
}
#logoFB {
max-width: 100px;
}
#logoFB:hover {
background-color: #557c3e;
border-color: #557c3e;
color: #557c3e;
}
ul > li {
margin-right: 50px;
}
h2 {
text-align: center;
color: #F8B004;
line-height: 2;
}
#promocje {
color: #F8B004;
font-size: 1.5em;
}
h2> ol > li:hover {
background-color: #F2F2F2;
color: #976a02;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=News+Cycle' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Kontakt - Wzgórze Smaków</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="row">
<a class="navbar-brand" href="index.html">
<div id="logo"></div>
</a>
<ul class="nav nav-pills">
<li role="presentation"><span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs">Menu</li>
<li role="presentation"><span class="glyphicon glyphicon-piggy-bank"></span><br class="hidden-xs">Promocje</li>
<li role="presentation" class="active"><span class="glyphicon glyphicon-earphone"></span><br class="hidden-xs">Kontakt</li>
<li><span id="nrTel">Zadzwoń! <div>691 671 702</div></span></li>
<li>
<a target="_blank" href="https://www.facebook.com/wzgorzesmakow/?fref=ts"><img src="wzgorzeSmakowMarcin/facebook.png" id="logoFB"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="glowna">
<!-- glowna czesc -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4953626985284!2d16.848684315860655!3d52.270708262426325!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x470451f45b8ebb65%3A0xdeb8ff981de52abc!2sDworcowa+58%2C+62-040+Puszczykowo!5e0!3m2!1spl!2spl!4v1470346020342"
width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<h2>Puszczykowo, ul. Dworcowa 58
<div>691 671 702</div>
<div>ZAPRASZAMY!</div>
</h2>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>