When i use position relative for adjusting position of button and ul,li,
There is any other property in bootstrap?.I want to create this nav-bar without using css properties.
I need create same nav-bar with using bootstrap
.full_image{
font-family: Lato,"Helvetica Neue",Arial,sans-serif;
}
#top-nav {
width: 100%;
position: fixed;
top: 0;
background-color: #000;
height: 70px;
z-index: 999;
}
nav{
display: block;
}
nav #ss-logo{
height: 62px;
width: 206px;
position: relative;
bottom: 5px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9
{
float
}
nav .btn-primary{
background-color: #2eb066;
/**padding: 15px 15px;**/
border-color: #2eb066;
text-transform: uppercase;
background: #02a15e;
border-radius: 5px;
color: #fff;
padding-left: 4px;
display: inline-block;
font-size: 14px;
font-weight: 600;
position: relative;
left: 36%;
letter-spacing: 3px;
padding: 18px 0;
line-height: 16px;
margin-left: 0;
width: 279px;
text-align: center;
}
nav #questions{
font-family: 'Verdana';
letter-spacing: -1.2px;
font-size: .8em;
line-height:30px;
color: #FFF;
}
nav #login {
color:#2eb066;
text-transform:uppercase;
font-family: 'Verdana';
letter-spacing: 2px;
font-size: .8em;
line-height:30px
}
nav li a{
color: #FFF;
}
nav li{
padding:0px 10px
}
#hero_area{
position: fixed;
background: url(features_hero_bg.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin: 0 0 0 -15px;
color: #fff;
z-index: -1;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eee;
}
#hero_area h1 {
font-family: Lato,sans-serif;
font-size: 60px;
font-weight: 700;
width: 1180px;
margin: 210px auto 30px;
}
#hero_area p {
width: 1180px;
line-height: 1.2;
font-family: lato,sans-serif;
font-size: 32px;
font-weight: 400;
margin-left: auto;
margin-right: auto;
padding-right: 510px;
}
#hero_area>* {
padding-left: 15px;
}
a:focus, a:hover
{
color: #23527c;
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="Assingment_bootstrap.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="full_image">
<form name="assingment_three" id="assingment_three">
<nav id="top-nav" class="full-width navbar navbar-inverse dark-bg navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#containerNavbar" aria-controls="containerNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container">
<div class="col-md-4 col-sm-4 col-xs-3">
<img id="ss-logo" src="logo-white.png" alt="SugarSync">
</div>
<div class="navbar-collapse collapse" id="containerNavbar">
<ul class="navbar-nav ml-auto color_one">
<li class="nav-item active">
<a id="login" class="nav-link" href="#"><span class="fa fa-lock"> Log in</a>
</li>
<li class="nav-item">
<a id="questions" class="nav-link" href="#"> Questions? (877) 442-1693</a>
</li>
<li class="nav-item">
<a class="btn btn-primary" href="#">Try Free for 30 Days</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</form>
<div class="wrapper">
<div class="col-md-12 content">
<div id="hero_area" class="page-header">
<h1>Features</h1>
<p>With SugarSync, your files and folders are always accessible from anywhere.</p>
</div>
</div>
</div>
</body>
</html>
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
body{
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
}
#header-nav{
background-color: white;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/logotild1.png') no-repeat;
width: 170px;
height: 100px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
margin-top: 25px;
}
.navbar-image, .navbar-brand{
float: left;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Nunito', sans-serif;
color: lightskyblue;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: black;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
#navBarlist{
font-size: 1.2em;
}
#smallpic{
margin-top: 30px;
}
.navbar-header button.navbar-toggler, .navbar-header .navbar-toggler-icon {
border: 1px solid lightgrey;
}
.navbar-header button.navbar-toggler{
clear: both;
}
.panel-footer{
position: absolute;
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
width: 100%;
}
.panel-footer div.row{
margin-bottom: 35px;
}
#om{
line-height: 2;
}
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px white;
border: 2px solid white;
}
#tøj-tile, #face-tile, #andet-tile{
height: 250px;
width: 100%;
margin-top: 15px;
margin-bottom: 15px;
position: relative;
border: 2px solid whitesmoke;
overflow: hidden;
}
#tøj-tile:hover, #andet-tile:hover, #face-tile:hover{
box-shadow: 0 1px 5px 1px black;
}
#tøj-tile{
background: url('../images/tøjtile.png') no-repeat;
background-position: center;
}
#andet-tile{
background: url('../images/andettile.png') no-repeat;
background-position: center;
}
#face-tile{
background: url('../images/facetile.png') no-repeat;
background-position: center;
}
#tøj-tile span, #andet-tile span, #face-tile span{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/********** Large devices only **********/
#media (min-width: 1200px) {
.container .jumbotron {
background: url('../images/storbilledweb.jpg') no-repeat;
height: 675px;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
/********** Medium devices only **********/
#media (min-width: 992px) and (max-width: 1199px) {
/* Header */
/* End Header */
.container .jumbotron {
background: url('../images/mediumbillede.jpg') no-repeat;
height: 558px;
}
}
/********** Small devices only **********/
#media (min-width: 768px) and (max-width: 991px) {
.container .jumbotron {
background: url('../images/lillebillede.jpg') no-repeat;
height: 432px;
}
}
/********** Extra small devices only **********/
#media (max-width: 767px) {
.navbar-brand{
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
#tøj-tile, #andet-tile, #face-tile{
width: 360px;
margin: 0 auto 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tilde & brdr</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-expand-lg navbar-light-bg-light">
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navBarlist"
aria-controls="navBarlist"
aria-expanded="false"
aria-label="Toggle navigation">
<span
class="navbar-toggler-icon">
</span>
</button>
<a
href="index.html"
class ="navbar-image float-left d-none d-sm-block"
>
<div
id = "logo-img"
alt="Logo image"
>
</div>
</a>
<div
class="navbar-brand">
<a
href="index.html">
<h1>Tilde & Brdr.</h1>
</a>
</div>
</div>
</div>
<div
class="collapse navbar-collapse"
id="navBarlist"
>
<ul
id = "nav-list"
class="navbar-nav ml-auto">
<li
class="nav-item">
<a
class="nav-link"
href="#">
Home
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Tøj
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Udsalg
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Kontakt
</a>
</li>
<li
class="nav-item">
<a
class="nav-link"
href="#">
Facebook
</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="main-content" class="container">
<div class="jumbotron" id="smallpic">
<img src="images/lillebillede.jpg" alt="Picture of clothing"
class="img-fluid d-block d-sm-none">
</div>
<div id="home-tiles" class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="tøj-categories.html">
<div id="tøj-tile">
<span>tøj</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<a href="andet-category.html">
<div id="andet-tile">
<span>andet</span>
</div>
</a>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<a href="face-category.html">
<div id="face-tile">
<span>facebook</span>
</div>
</a>
</div>
</div><!-- End of #home-tiles -->
<footer class="panel-footer">
<div id="footi"class="container">
<div class="row">
<section id="kontakt" class="col-sm-4">
<span>Kontakt:</span><br>
Email: blablabla#bla.dk<br>
Facebook<br>
Tlf: 09010222<br>
</section>
<section id="om" class="col-sm-4">
Alt er hjemmesyet/hjemmelavet af mig.<br>
Dette er min hobby, derfor kan der være længere leveringstid på nogen ordre, men kontakt mig, så vi kan finde ud af noget nærmere. Jeg håber I synes noget af det jeg laver vækker en interesse.
</section>
<section id="bla" class="col-sm-4">
blablabla blablabla ballbsldablal alablslbalslbalslasal alablsblasalalsa
</section>
</footer>
</div>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<script src="js/jquery-3.6.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
I've encountered a problem where I get some space between the browser-edge and the footer. I can tell that the size of the footer isnt big enough. The width I've set to 100% but obviously that isn't the problem. Can any1 explain to me what I'm missing?
It started out by having the same space on both left and right, but putting position:absolute somehow solved the right side. No idea what to do with the left side.
You need to override default body margin and set it to 0
body {
font-size: 16px;
color: #fff;
background-color: lightskyblue;
font-family: 'Nunito', sans-serif;
margin: 0;
}
I'm trying to replicate sites for practice and tried to import materialize. That totally messed up the styling of my page. I tried to download the css with only the components i need but still no change.
This is the page without bootstrap:
This is the page after importing bootstrap.css
Here is style.css
#import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
html, body {
padding: 0;
margin: 0;
font-family: 'Montserrat';
}
html a, body a {
text-decoration: none;
outline: none;
}
#header {
z-index: 100;
width: 100%;
height: 79px;
background: white;
position: fixed;
border-bottom: 1.5px solid #eee;
}
#header #small-header {
height: auto;
padding: 6px;
height: 12px;
font-size: 10px;
font-weight: 500;
background: #EEEEEE;
}
#header #small-header #left {
float: left;
}
#header #small-header #right {
float: right;
}
#header #small-header .header-link {
color: #57606f;
margin: 0 6px;
}
#header #small-header .header-link:hover {
color: black;
}
#header #main-header {
height: 55px;
line-height: 55px;
padding: 0;
}
#header #main-header img {
height: 20px;
padding: 0 8px;
margin-right: 30px;
margin-left: 20px;
vertical-align: middle;
}
#header #main-header #links {
height: 55px;
display: inline-block;
}
#header #main-header #links ul {
margin: 0;
list-style-type: none;
}
#header #main-header #links ul li {
display: inline-block;
height: 52px;
cursor: pointer;
border: none;
-webkit-transition: opcatiy 0.3s;
transition: opcatiy 0.3s;
}
#header #main-header #links ul li .main-header-link {
text-transform: uppercase;
font-weight: 600;
color: #2f3640;
margin: 6px;
font-size: 12.5px;
letter-spacing: 2px;
}
#header #main-header #links ul li:hover {
border-bottom: 4px solid #fbc531;
}
#header #main-header .main-header-link {
font-weight: 600;
color: #2f3640;
font-size: 15px;
}
#header #main-header #right {
margin-right: 20px;
float: right;
}
#header #main-header #right #search {
display: inline-block;
margin-left: 100px;
}
#header #main-header #right #search input {
text-indent: 23px;
width: 300px;
display: inline-block;
position: relative;
font-family: 'Montserrat';
font-size: 12px;
height: 30px;
background: #EAEAEA;
outline: none;
border: none;
padding: 4px;
border-radius: 5px;
}
#header #main-header #right #search #inp:before {
font-family: 'FontAwesome';
content: '\f002';
position: absolute;
z-index: 11;
margin: 0 8px;
color: #95a5a6;
}
#header #main-header #right #search input:focus {
background: white;
border: 1px solid #2f3640;
}
#header #main-header #right #sep {
background: black;
opacity: 0.4;
width: 1px;
vertical-align: middle;
margin: 0 15px;
top: 50%;
height: 20px;
display: inline-block;
position: relative;
z-index: 11;
}
.landing {
position: relative;
top: 78px;
}
.landing img {
margin: 0;
width: 100%;
}
/*# sourceMappingURL=style.css.map */
and the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer type="text/javascript" src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bewakoof</title>
</head>
<body>
<div id="front-page">
<!-- Header -->
<div id="header">
<div id="small-header">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
<div id="main-header">
<img src="images/bewakoof-logo-og.png">
<div id="links">
<ul>
<li><a class="main-header-link" href="#">Men</a></li>
<li><a class="main-header-link" href="#">Women</a></li>
<li><a class="main-header-link" href="#">Mobile covers</a></li>
<li><a class="main-header-link" href="#">clearance zone</a></li>
</ul>
</div>
<div id="right">
<form id="search">
<div id="inp">
<input type="text" placeholder="Search by product or category">
</div>
</form>
<div id="sep"></div>
<a class="main-header-link" href="#">Login</a>
<i class="far fa-heart fa-lg" style="margin: 0 10px; color: black"></i>
<i class="fas fa-shopping-bag fa-lg" style="color: black;"></i>
</div>
</div>
</div>
<!-- Header end -->
<div class="landing">
<img src="images/hulk.gif">
<button class="btn-lg btn-warning">daw</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
This might occur because bootstrap and materialize uses the same class name.
You should pick one to use, and use your own CSS to personalize it yourself.
The materialize has its own navbar center style.
Good luck
Alright, I figured it out. It seems that the following code was the culprit:
#left{
float: left;
}
#right{
float: right;
}
I changed it to:
.row {
display: flex;
justify-content: space-between;
margin: 0;
width: 100%;
}
.row::after{
content: none;
}
and
<div class="row">
<div id="left">
<a class="header-link" href="#">Offers</a>
<a class="header-link" href="#">Fanbook</a>
<a class="header-link" href="#">
<span><i class="fas fa-mobile-alt" style="width: auto;"></i></span>
Download App
</a>
<a class="header-link" href="#">TriBe Membership</a>
</div>
<div id="right">
<a class="header-link" href="#">Contact Us</a>
<a class="header-link" href="#">Track Order</a>
<a class="header-link" href="#">Pay online & get free shipping.</a>
</div>
</div>
and now its working perfectly.
My bootstrap rows are not stacking on top of each other in mobile view. I have a row of 3 cols and a row of 4 cols. The rows that aren't collapsing are the .about-content row in the #about section and 4 col row is in the #member section. Any help would be appreciated, Thanks! Here's the website: https://alex-carver.github.io/Smart-Carnival/
/*element style--------*/
section{
margin-top: 100px;
margin-bottom: 100px;
width: 100%;
}
hr{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #c1282d;
height: 4px;
}
.hr-2{
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 4px;
}
h1, h2{
font-family: 'chunkfiveregular' , sans-serif;
}
h2{
font-size: 45px;
color: #020304;
}
p{
font-family:'proxima_novasemibold' , sans-serif;
}
/*---nav styles----------*/
nav, .navbar .navbar-default{
margin-bottom: 0!important;
height: 80px;
}
.navbar-default {
background-color: #fff;
border-color: transparent;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 80px;
z-index: 4;
opacity: .9;
}
.navbar-right {
margin-right: 20px;
padding-top: 25px;
background:transparent!important;
}
.navbar-default .navbar-brand {
color:#c1282d;
}
.navbar-brand .logo{
float: left;
height: 60px;
padding-bottom: 10px;
}
.navbar-default .navbar-nav>li>a {
color:#c1282d;
font-size: 22px;
background:#fff;
font-family: 'proxima_novasemibold', sans-serif;
font-weight: 400;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: #fff;
background-color: #c1282d;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #c1282d;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
color:#fff;
}
.dropdown-menu>li>a{
color: #fff;
font-size: 15px;
}
.navbar-right{
margin-right: 20px;
}
/*-------header styles-------*/
header{
width:100%;
height: 710px;
background:url(../img/header2.png);
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 45px;
color:#fff;
width:100%;
}
.header-text-color{
color: #c1282d;
font-size: 90px;
}
.jumbotron h1{
margin-bottom: 25px;
font-size: 80px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.jumbotron p {
margin-bottom: 25px;
font-size: 30px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.btn-primary{
background:#c1282d;
color:#fff;
border:none;
box-shadow: 3px 5px 5px rgba(0,0,0,0.5);
margin-right: 20px;
font-family: 'proxima_novathin' , sans-serif;
padding:15px;
}
.btn-primary:hover{
background:#fff;
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.photos-btn{
background:#828383;
color: #fff;
}
.social-icons {
margin-left: 20px;
margin-top: 5px;
}
.social-icons a{
color: #fff;
}
.social-icons a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
i {
margin-right: 5px;
}
/*-------------About Section----------*/
.about-text-color{
color:#c1282d;
font-size: 50px;
}
.about-content{
height: 400px;
text-align: center;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 30px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
}
/*-------Team Section Styles---------*/
#team{
height: 520px;
border-top: 1px solid #828383;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 50px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
margin-left: auto;
margin-right: auto;
}
.member-content{
background:#c1282d;
text-align: center;
padding:20px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
}
/*----------Footer Styles------------*/
footer{
width: 100%;
text-align: center;
margin:0;
}
.footer-logo{
height: 100px;
width: 300px;
text-align: center;
}
/*----------media queries----------*/
#media (max-width: 767px){
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: 100%;
margin-top: 0;
background-color:#c1282d;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #020304;
}
.navbar-default .navbar-nav>li>a {
color: #c1282d;
font-size: 22px;
background: #fff;
font-family: 'Roboto', sans-serif;
font-weight: 400;
border:1px, solid #000;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: #020304;
background-color: #fff;
}
}
/* ----------- iPhone 6, 6S, 7 and 8 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
.navbar-brand {
float: left;
height: 50px;
padding: 15px 30px;
font-size: 30px;
line-height: 20px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.navbar-default .navbar-toggle {
border-color: #c1282d;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #c1282d;
}
header{
width:100%;
height: 670px;
background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../img/header2.png") no-repeat center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin:0;
padding: 0;
}
.jumbotron{
background: transparent;
margin-top: 120px;
color:#fff;
padding-bottom: 0px;
margin-bottom: 0px;
}
.social-icons-small a{
color: #fff;
}
.social-icons-small a:hover{
color: #c1282d;
-webkit-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#team{
height: 800px;
border-top: 1px solid #828383;
}
.jumbotron h1{
margin-bottom: 20px;
font-size: 40px;
letter-spacing: 3px;
font-family: 'chunkfiveregular' , sans-serif!important;
}
.header-text-color{
color: #c1282d;
font-size: 40px;
}
/*-------------About Section----------*/
h2{
font-size: 40px;
color: #020304;
}
.about-text-color{
color:#c1282d;
font-size: 40px;
}
.about-content{
height: 400px;
padding:20px;
font-size: 20px;
font-family: 'proxima_novasemibold' , sans-serif;
}
.about-text{
padding:50px;
font-size: 20px;
background: #f2f2f2;
border-radius: 10px;
margin-top: 20px;
color: #020304;
text-align: left;
}
/*-------Team Section Styles---------*/
#team{
width: 100%;
border-top: 1px solid #828383;
height: 400px;
}
.member-heading{
margin-top: 40px;
}
.member-text-color{
color: #c1282d;
font-size: 40px;
}
.member-wrapper{
background:#fff;
border-radius: 10px;
padding:20px;
box-shadow: 6px 5px 5px rgba(0,0,0,0.5);
width: 100%;
}
.member-content{
background:#c1282d;
text-align: center;
padding:0px;
color: #020304;
font-family: 'proxima_novasemibold' , sans-serif;
margin-top:20px;
font-size: 15px;
}
.photos-btn{
background:#828383;
color: #fff;
}
}
<!DOCTYPE html>
<html lang="eng">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./css/custom.css">
<title>Smart Carnival</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="#myNavbar" 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="index.html"><img class="logo img-responsive" src="./img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Find My Photos</li>
<li class="dropdown">
About Us <span class="caret"></span>
<ul class="dropdown-menu">
<li>Why Smart Carnival</li>
<li>The Team</li>
</ul>
</li>
<li class="dropdown">
Clients <span class="caret"></span>
<ul class="dropdown-menu">
<li>Products</li>
<li>Value Proposition</li>
<li>Pricing</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<header>
<div class="container">
<div class="jumbotron">
<h1><span class="header-text-color">S</span>mart <span class="header-text-color">C</span>arnival</h1>
<p>Modernizing and Amplifying the Attractions<br>and Amusements Industry.</p>
<p class="contact-button"><a class="btn btn-primary btn-lg" href="#" role="button">Contact Us</a><span><a class="photos-btn btn btn-primary btn-lg" href="#" role="button">Find My Photos</a></span></p>
</div>
</div>
</header>
<section id="about">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2>Why<span class="about-text-color"> Smart Carnival</span></h2>
<hr>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<p class="about-text">
Smart Carnival’s mission is to modernize the amusement, carnival and inflatables industries with hardware and software that enhances the <br>carnival-goer’s experience and enhances revenue for its customers.
</p>
</div>
</div>
<div class="row about-content">
<div class="col-xs-4">
<img class="img-responsive" src="./img/camera.png">
<p class="text-content" >Smart Carnival’s camera is waterproof and has a super hydrophobic lens, so water will never ruin your photo. </p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/photos.png">
<p class="text-contentt">Photos and slow motion videos can be edited, clipped, filtered downloaded straight to your phone or shared on social media! No other company offers as seamless a photo experience.</p>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="./img/battery.png">
<p class="text-content">With an 8 hour battery life, Smart Carnival captures the special and fun moments all day long without needing to be recharged or replaced.</p>
</div>
</div>
</div>
</section>
<section id="team">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h2 class="member-heading">The<span class="member-text-color"> Smart Carnival </span>Team</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row member-content">
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member1.png">
<p class="text-content" >Jesse Ou<br>
Founder & CEO</p><br>
<p class="text-content">Lead Security Engineer,<br>Salesforce.com</p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member2.png">
<p class="text-content" >Larry Trowell<br>
CTO</p><br>
<p class="text-content">Principal Consaltunt,<br><b>Synopsys</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member3.png">
<p class="text-content" >Josh Johns<br>
Co Founder & Sales</p><br>
<p class="text-content">Owner<br><b>J. Johns Studios</b></p>
</div>
</div>
<div class="col-xs-3">
<div class="member-wrapper">
<img class="img-responsive" src="./img/member4.png">
<p class="text-content" >Sara Abernethy<br>
Director of Business Development</p><br>
<p class="text-content"><b>Senior Strategist,<br>Idea Couture</b></p>
</div>
</div>
</div>
</div>
</section>
<!-- ==========================
FOOTER SECTION
=========================== -->
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
<img class="footer-logo" src="./img/logo.png">
<p>All Rights Reserved. © 2018 Smart Carnival</p>
</div>
</div>
</div>
</footer>
<!-- ==========================
FOOTER SECTION END
=========================== -->
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
https://alex-carver.github.io/Smart-Carnival/
They aren't collapsing because you specified them to be uncollapsable.
col-xs-* means at the smallest screen.
So, 3x col-xs-4 is 12 which is a full row.
I am editing a template and I am having trouble getting the navigation menu button to align next to my logo when viewed on mobile devices. It also slightly covers the header image on mobile as well.
Mobile view
Desktop view
Any help is greatly appreciated! Here is my code:
#import url(http://fonts.googleapis.com/css?family=Dosis:400,200,300,500,600,700,800);
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,200,700);
/*************************
*******Typography******
**************************/
body {
font-family: 'Dosis', sans-serif;
font-size: 17px;
color: #fff
}
.btn {
border-radius: 0;
font-family: 'Yanone Kaffeesatz','sans-serif';
font-size: 20px;
padding: 9px 23px;
}
a {
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
a:focus,
a:hover {
text-decoration: none;
outline: none
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
text-transform: uppercase;
}
h2 {
font-size: 36px
}
.navbar-toggle {
margin-top: 12px
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-toggle,
.navbar-toggle:focus {
border:1px solid #fff;
outline: none;
}
/*************************
*******Header CSS******
**************************/
.header-top {
display: block;
overflow: hidden;
padding: 25px;
}
.main-nav {
position: absolute;
width: 100%;
z-index: 999;
}
.main-nav
.container {
width: 100%
}
.social-icons a {
font-size: 18px;
color: #fff;
padding-left:20px;
}
.social-icons .fa-facebook:hover {
color: #3B5997
}
.social-icons .fa-twitter:hover {
color:#29C5F6
}
.social-icons .fa-google-plus:hover {
color:#D13D2F
}
.social-icons .fa-youtube:hover{
color: #ec5538
}
.navbar-brand {
background-color: #ff0080;
height: 90px;
margin-bottom: 20px;
position: relative;
width: 435px;
}
.navbar-brand img {
position: absolute;
top: -35px;
}
.navbar-right {
background-color: #ff0080;
padding:0 95px 0 0;
opacity: .9
}
.navbar-right li a {
padding: 35px 21px;
font-size: 22px;
color: #fff;
text-transform: uppercase;
font-family: 'Yanone Kaffeesatz', 'sans-serif';
font-weight: 300;
}
.navbar-right li a:hover,
.navbar-right li a:focus,
.navbar-right .active a {
background-color: #fff;
color: #16728f
}
.fixed-menu {
background-color: #ff0080;
position: fixed;
top: 0;
}
.fixed-menu .navbar-right {
padding: 0;
}
.fixed-menu .navbar-right li a {
font-size: 18px;
padding: 20px 25px;
text-shadow:inherit;
}
.fixed-menu .navbar-brand {
height: 60px;
margin-top: 0;
padding: 0;
margin-bottom: 0;
width: 435px;
}
.fixed-menu .navbar-brand img {
height:60px;
top: 0;
}
.fixed-menu .header-top {
display: none;
}
/*************************
*******Home CSS******
**************************/
#home {
position: relative;
overflow: hidden;
}
#main-slider img {
width: 100%
}
#main-slider
.carousel-caption {
background: none repeat scroll 0 0 #000000;
bottom: 14%;
float: left;
left: 0;
opacity: 0.8;
padding:10px 60px 35px;
right: inherit;
text-transform: uppercase;
color: #fff;
text-align: left;
}
#main-slider
.carousel-caption h2 {
font-size: 38px;
}
#main-slider
.carousel-caption h4 {
font-size: 24px;
}
#main-slider
.carousel-caption a {
font-size: 22px;
color: #2da1c5
}
#main-slider
.carousel-caption a:hover {
color: #2588a6
}
#main-slider
.carousel-caption a:hover i {
margin-left: 35px
}
#main-slider
.carousel-caption a i {
margin-left: 15px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#main-slider
.carousel-indicators li {
background-color:#ff0080;
border: 1px solid #ff0080;
}
#main-slider
.carousel-indicators li.active {
background-color:#fff;
border: 1px solid #fff;
}
/*************************
*******Explore CSS******
**************************/
#explore {
background-color: #C34C39;
background-image: url("../images/event-bg.jpg");
background-position: center bottom;
background-size: contain;
background-repeat:no-repeat;
position: relative;
overflow: hidden;
padding: 130px 0 100px;
}
.watch {
position: absolute;
left: 0;
top: 7%;
}
#explore h2 {
font-size: 42px;
text-transform: uppercase;
text-align: center;
}
#countdown {
display: block;
overflow: hidden;
text-align: center;
padding: 0
}
#countdown li {
list-style: none;
display:inline-block;
margin-right: 40px;
text-align: center;
text-transform: uppercase;
font-size: 18px;
position: relative;
}
#countdown li:last-child {
margin-right: 0
}
#countdown li span {
display: block;
font-size: 40px;
font-weight: 700;
height: 82px;
line-height: 79px;
width: 75px;
border-radius: 10px;
border-right: 1px solid #c34c39;
border-bottom: 1px solid #c34c39;
}
#countdown li .days {
background-color: #45b29d;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .hours {
background-color: #efc94c;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .minutes {
background-color: #e27a3f;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li .seconds {
background-color: #df5a49;
border-top: 1px solid #c34c39;
border-left: 1px solid #c34c39;
}
#countdown li:before {
background-color: #c34c39;
content: "";
height: 11px;
left: 0;
position: absolute;
top: 36px;
width: 1px;
}
#countdown li:after {
background-color: #c34c39;
content: "";
height: 11px;
right:0;
position: absolute;
top: 36px;
width: 1px;
}
.cart {
background-color: #b34534;
position: absolute;
right:-200px;
top: 37%;
width:252px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.cart:hover {
right:0;
}
.cart a {
color: #FFFFFF;
display: block;
font-size: 24px;
text-transform: uppercase;
}
.cart a i {
font-size: 30px;
padding: 20px 12px;
background-color: #A64030;
margin-right: 3px;
}
/*************************
*******Event CSS******
**************************/
#event {
background-color: #33888F;
background-image: url("../images/performar-bg.jpg");
background-position: 50% 0;
background-size: contain;
position: relative;
background-repeat: no-repeat;
}
.guitar {
position: absolute;
right:0;
top: 0
}
#event h2 {
color: #FFFFFF;
font-size: 36px;
font-weight: 300;
margin-bottom: 40px;
margin-top: 70px;
text-transform: uppercase;
}
.single-event {
margin-bottom: 70px;
}
.single-event h4 {
color: #FFFFFF;
font-size: 24px;
font-weight: 300;
line-height: 26px;
margin-top: 25px;
text-transform: uppercase;
}
.single-event h5 {
font-size: 18px;
font-weight: 100;
display: block;
}
#event-carousel {
position: relative;
}
.even-control-left,
.even-control-right {
position: absolute;
font-size: 24px;
color: #fff;
top: 0;
}
.even-control-left {
right: 3%
}
.even-control-right {
right: 0;
}
/*************************
*******About CSS**********
**************************/
#about {
background-color: #75B46E;
position: relative;
width: 100%;
display: flex;
}
.guitar2 {
top: 0;
width: 50%;
}
.guitar2 img {
padding-top: 3%;
}
.about-content {
width: 50%;
background-image: url("../images/about-bg.jpg");
background-position: left bottom;
background-repeat: no-repeat;
background-size: cover;
padding: 70px 70px 110px;
}
#about h2 {
margin-bottom: 23px;
}
.about-content p {
font-size: 17px;
font-family: 'Dosis',sans-serif;
}
#about .btn-primary {
background-color: #137c61;
color: #fff;
text-transform: capitalize;
border: none;
margin-top: 28px;
}
#about .btn-primary:hover {
background-color: #126d55
}
/*************************
******Twitter CSS****
**************************/
#twitter {
background-color: #ecedef;
background-image: url("../images/twitter-bg.jpg");
background-position: center bottom;
background-size: cover;
background-repeat:no-repeat;
position: relative;
padding: 95px 0 90px;
overflow: hidden;
}
.twit {
position: absolute;
left: 0;
top:-42%;
}
#twitter-feed .item {
text-align: center;
}
#twitter-feed .item img {
display: inline-block;
width: 78px;
height: 78px;
border-radius: 50%;
background-color: #c5c8ce;
padding: 5px;
margin-bottom: 30px;
}
#twitter-feed .item a,
#twitter-feed .item p {
font-size: 24px;
font-weight: 300;
font-family: 'Yanone Kaffeesatz','sans-serif';
}
#twitter-feed .item p {
color: #3D3D3D;
}
#twitter-feed .item a {
color:#00c3ff;
}
.twitter-control-left,
.twitter-control-right {
position: absolute;
color: #00c3ff;
top: 59%;
font-size: 24px
}
.twitter-control-left {
left: 0;
}
.twitter-control-right {
right:0;
}
/*************************
******Sponsor CSS****
**************************/
#sponsor {
background-color: #1881a2;
background-image: url("../images/sponsor-bg.jpg");
background-position:50% 0;
background-size: cover;
background-repeat:no-repeat;
position: relative;
}
.light {
position: absolute;
right: 0;
bottom: 0;
}
#sponsor .col-sm-10 {
z-index: 10;
}
#sponsor h2 {
margin-top: 90px;
margin-bottom: 40px;
}
#sponsor .item ul {
font-size: 0;
padding: 0;
}
#sponsor .item ul li {
display: inline-block;
list-style: none;
width: 33.33%;
margin-bottom: 75px;
}
#sponsor .item ul li:last-child {
margin-right: 0
}
.sponsor-control-left,
.sponsor-control-right {
color: #FFFFFF;
font-size: 24px;
position: absolute;
top: 20%;
}
.sponsor-control-left {
right: 12%
}
.sponsor-control-right {
right: 10%
}
/*************************
******Map CSS****
**************************/
#map {
position: relative;
}
#gmap {
height:450px;
}
/*************************
******Contact CSS****
**************************/
.contact-section {
background-color: #f7ab24;
background-image: url("../images/contact-bg.jpg");
background-position:60% 0;
background-size:contain;
background-repeat:no-repeat;
position: relative;
}
.ear-piece {
position: absolute;
left: 0;
top: 0;
}
#contact .container {
padding-top:47px;
}
#contact h3 {
text-transform:inherit;
color: #373737;
}
#contact-section h3 {
margin-bottom: 25px
}
#contact address {
font-size: 18px;
color: #373737;
}
.contact-text {
margin-bottom: 35px;
display: block;
}
#contact-section .form-control {
border-color: #ae750d;
box-shadow:none;
outline: 0 none;
border-radius: 0;
color: #797979;
font-size: 18px;
}
#contact-section .form-control:focus {
border-color: #ae750d;
}
#contact-section input {
height: 44px;
}
#contact-section textarea {
height: 90px;
resize:none;
}
#contact-section .btn-primary {
background-color: #373737;
color: #f7ab24;
border: none;
font-size: 24px;
padding: 6px 42px;
margin-bottom: 110px;
margin-top: 10px
}
#contact-section .btn-primary:hover {
background-color: #212020;
color: #fff
}
/*************************
******Footer CSS****
**************************/
#footer {
background-color: #212121;
background-image: url("../images/footer-bg.jpg");
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
color: #FFFFFF;
font-size: 20px;
padding: 35px 0;
}
#footer a {
color:#f7ab24
}
#footer a:hover {
color:#ff0080
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Melodie Rooker Music</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<script src="https://use.fontawesome.com/6740b2e08a.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
<header id="header" role="banner">
<div class="main-nav">
<div class="container">
<div class="header-top">
<div class="pull-right social-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-apple"></i>
<i class="fa fa-spotify"></i>
</div>
</div>
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="index.html">
<img class="img-responsive" src="images/logo.png" alt="logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll active">Home</li>
<li class="scroll">Explore</li>
<li class="scroll">Biography</li>
<li class="no-scroll">Sample</li>
<li class="scroll">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!--/#header-->
<section id="home">
<div id="main-slider" class="carousel slide" data-ride="carousel">
<!-- <ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol> -->
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="images/slider/bg1.jpg" alt="slider">
<!-- <div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div> -->
</div>
<!--<div class="item">
<img class="img-responsive" src="images/slider/bg2.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
GRAB YOUR TICKETS <i class="fa fa-angle-right"></i>
</div>
</div>
<div class="item">
<img class="img-responsive" src="images/slider/bg3.jpg" alt="slider">
<div class="carousel-caption">
<h2>register for our next event </h2>
<h4>full event package only #$199</h4>
</i>
</div>
</div>
</div>
</div> -->
</section>
<!--/#home-->
<section id="explore">
<div class="container">
<div class="row">
<div class="watch">
<img class="img-responsive" src="images/watch.png" alt="">
</div>
<div class="col-md-4 col-md-offset-2 col-sm-5">
<h2>Upcoming Show<br>McLeod's Publick House</h2>
</div>
<div class="col-sm-7 col-md-6">
<ul id="countdown">
<li>
<span class="days time-font">00</span>
<p>days </p>
</li>
<li>
<span class="hours time-font">00</span>
<p class="">hours </p>
</li>
<li>
<span class="minutes time-font">00</span>
<p class="">minutes</p>
</li>
<li>
<span class="seconds time-font">00</span>
<p class="">seconds</p>
</li>
</ul>
</div>
</div>
<div class="cart">
<i class="fa fa-map-o"></i> <span>Get Directions</span>
</div>
</div>
</section><!--/#explore-->
<section id="event">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-9">
<div id="event-carousel" class="carousel slide" data-interval="false">
<h2 class="heading">Explore</h2>
<a class="even-control-left" href="#event-carousel" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="even-control-right" href="#event-carousel" data-slide="next"><i class="fa fa-angle-right"></i></a>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/melodie-ricky.jpg" alt="Melodie and Ricky Rooker">
<h4>Melodie and Ricky Rooker</h4>
<h5>vocals, lead guitar</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/loudboyz.jpg" alt="Melodie Rooker and the Loud Boyz">
<h4>Melodie Rooker</h4>
<h5>and the Loud Boyz</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/mcleods-family.jpg" alt="We had such a blast playing at McLeod's Publick House in Dothan, AL last night! We got invited to be part of the family, which means our poster got autographed and put up on the wall!">
<h4>McLeod's Publick House</h4>
<h5>We became a part of the "family"</h5>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/studio.jpg" alt="Melodie at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
<div class="col-sm-4">
<div class="single-event">
<img class="img-responsive" src="images/ricky.jpg" alt="Ricky Rooker at FAME Studios in Muscle Shoals, Alabama">
<h4>FAME Studios</h4>
<h5>Muscle Shoals, AL</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="guitar">
<img class="img-responsive" src="images/guitar.png" alt="guitar">
</div>
</div>
</div>
</section><!--/#event-->
<section id="about">
<div class="guitar2">
<img class="img-responsive" src="images/guitar2.jpg" alt="guitar">
</div>
<div class="about-content">
<h2>Biography</h2>
<p><stron>Melodie Rooker is a singer/songwriter based out of Nashville, TN. She has been singing since the day she was old enough to hold a microphone, and has fronted bands in Missouri, Mississippi, and Tennessee. Her current band, the Loud Boyz, consists of a rhythm/lead guitar (Ricky Rooker), bass (Colton Everhart), and drums (Justin Parker). Melodie Rooker & the Loud Boyz play Country, Blues, & Rock 'n Roll (all the good stuff)! Their shows are extremely high energy and interactive. All in all, this 4-piece band packs a powerful punch!<br><br>Melodie & the Loud Boyz are signed with Old Dog's Records based out of Nashville, TN. They have been interviewed on KTXR FM 101.3 (The Outlaw), and Browne Hill Radio (Africa).<br><br>Melodie Rooker & the Loud Boyz can play up to a 5 hour show, and can tweak their set list to play what the particular crowd wants to hear. They are open to traveling anywhere, and are available now for booking.</strong></p>
</div>
</section><!--/#about-->
<section id="twitter">
<div class="container">
<div class="row">
<div class="col-md-12">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293251580&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
</div>
</div>
</section><!--/#twitter-feed-->
<section id="contact">
<!-- <div id="map">
<div id="gmap-wrap">
<div id="gmap">
</div>
</div>
</div><!--/#map-->
<div class="contact-section">
<div class="ear-piece">
<img class="img-responsive" src="images/ear-piece.png" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-offset-4">
<div class="contact-text">
<h3>Contact</h3>
<address>
E-mail: melodie#melodierookermusic.com<br>
Phone: (417) 771-9817<br>
</address>
</div>
<div class="contact-address">
<h3>Find me in</h3>
<address>
Nashville, TN
</address>
</div>
</div>
<div class="col-sm-5">
<div id="contact-section">
<h3>Send a message</h3>
<div class="status alert alert-success" style="display: none"></div>
<form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php">
<div class="form-group">
<input type="text" name="name" class="form-control" required="required" placeholder="Name">
</div>
<div class="form-group">
<input type="email" name="email" class="form-control" required="required" placeholder="Email">
</div>
<div class="form-group">
<textarea name="message" id="message" required="required" class="form-control" rows="4" placeholder="Enter your message"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/#contact-->
<footer id="footer">
<div class="container">
<div class="text-center">
<p> Copyright ©2017 Melodie Rooker All Rights Reserved</p>
</div>
</div>
</footer>
<!--/#footer-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/gmaps.js"></script>
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.parallax.js"></script>
<script type="text/javascript" src="js/coundown-timer.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/jquery.nav.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
You are using Bootstrap, but you're not taking full advantage of Bootstrap's Grid System and positioning.
You can also check out Bootstrap Examples to find existing HTML structures that you can look at, copy and use.
In your case, the issue is that your .navbar-brand is using a fixed width instead of a responsive width set in percentages. This means that when you scale down the client window to Mobile size, your CSS still say that your .navbar-brand is suppose to be width: 435px;, which gives too little space for the button to appear on the same row.
If you don't want to use the Bootstrap Exampels that I linked to above, or the Bootstrap Grid System taht I also linked to above, you can solve this issue with a CSS Media Query.
For example:
#media(max-width: 767px) {
.navbar-brand {
width: 300px;
}
}
That would change the width of your .navbar-brand to 300px whenever the device has a smaller width than 768px (Usually considered mobile devices). However I suggest that you look at the two first links if you're already using Bootstrap.