I'm trying to make a div full-width which is in a smaller wrapper.
It's an extension on this question:
The problem is that my div is now too big. The height is to high and I can't find a way to change it.
website: http://ndvibes.com it's the purple one on the bottom.
Code:
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
display: block;
}
<div class="outer-space">
<div class="wrapper">
<!--MORE CODE FOR WEBSITE--->
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
</div>
</div>
Here a JSFiddle of the full webpage because the problem doesn't occur in the Stackoverflow code-snippet: https://jsfiddle.net/v0x6g29c/
This should work:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="/js/general.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">
<title>NDVibes - Webdeveloper</title>
</head>
<body>
<div class="outer-space">
<div class="wrapper">
<div class="header">
<div class="myNavbar-wrapper">
<div class="myNavbar">
<ul>
<li><a class=active href="/">Home</a></li>
<li>Uw website</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="image-wrapper">
<img src="/images/big_image.png" />
</div>
<h1 class="bigTitle">
Webdeveloper since 2017
</h1>
<div class="positives">
<div class="point">
<img src="/images/fast.png" />
</div>
<div class="point">
<img src="/images/responsive.png" />
</div>
<div class="point">
<img src="/images/secure.png" />
</div>
</div>
<div class="btn-wrapper">
<a href="/panel">
<div class="btn colorChange purple">
Geef mij die website!
</div>
</a>
<br>
<span>
Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
</span>
</div>
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
<div class="footer">
Copyright © 2017 - <span id="year">2017</span> Niel Duysters
</div>
</div>
</div>
<!---------------GOOGLE ANALYTICS----------------->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46774773-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
CSS
.image-wrapper img {
display: inline-block;
width: 80%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.bigTitle {
text-align: center;
margin-top: -0.5%;
margin-bottom: 5%;
color: #766F82;
font-family: "ValeraRound";
}
.positives {
margin-top: 100px;
}
.positives .point {
width: 30%;
float: left;
margin-left: 3%;
}
.positives .point img {
width: 50%;
display: block;
margin: auto;
}
.btn-wrapper {
clear: both;
float: left;
width: 100%;
margin-top: 140px;
text-align: center;
}
.btn-wrapper .btn {
padding: 20px;
padding-right: 50px;
padding-left: 50px;
display: inline-block;
border-radius: 10px;
border: solid 1px #1D1846;
/*color: #746982;*/
color: #FFFFFF;
font-style: italic;
font-size: 22px;
}
.btn-wrapper span {
display: block;
margin-top: 15px;
font-style: italic;
color: #746982;
}
.outer-space {
overflow: hidden;
}
/*
.feedback {
clear: both;
float: left;
width: 1000%;
position: relative;
margin-top: 0;
padding-bottom: 40px;
}
.feedback-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.feedback:before, .feedback:after {
content:"";
position: absolute;
height:20%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback:before {
left:-100%;
}
.feedback:after {
right:-100%;
}
.feedback-wrapper span {
font-size: 22px;
font-family: "Droid Serif";
font-style: italic;
color: #E3DBFF;
display: block;
margin-top: 20px;
text-align: center;
}
*/
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
left:0 !important;
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
width:100%;
display: block;
z-index: 5;
}
/***Responsive***/
#media screen and (max-width: 801px) {
.bigTitle {
font-size: 120%;
}
.positives {
margin-top: 50px;
}
.positives .point {
float: none;
width: 60%;
max-width: 225px;
min-width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
.btn-wrapper {
margin-top: 40px;
}
.feedback {
width: 112%;
left: -6%;
}
.feedback-wrapper {
width: 90%;
position: relative;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.feedback-wrapper span {
font-size: 14px;
display: block;
font-size: 100%;
}
}
https://jsfiddle.net/8ohnsf28/
Check this, and let me know.
.image-wrapper img {
display: inline-block;
width: 80%;
position: relative;
left: 50%;
transform: translate(-50%, 0);
}
.bigTitle {
text-align: center;
margin-top: -0.5%;
margin-bottom: 5%;
color: #766F82;
font-family: "ValeraRound";
}
.positives {
margin-top: 100px;
}
.positives .point {
width: 30%;
float: left;
margin-left: 3%;
}
.positives .point img {
width: 50%;
display: block;
margin: auto;
}
.btn-wrapper {
clear: both;
float: left;
width: 100%;
margin-top: 140px;
text-align: center;
}
.btn-wrapper .btn {
padding: 20px;
padding-right: 50px;
padding-left: 50px;
display: inline-block;
border-radius: 10px;
border: solid 1px #1D1846;
/*color: #746982;*/
color: #FFFFFF;
font-style: italic;
font-size: 22px;
}
.btn-wrapper span {
display: block;
margin-top: 15px;
font-style: italic;
color: #746982;
}
.outer-space {
overflow: hidden;
}
/*
.feedback {
clear: both;
float: left;
width: 1000%;
position: relative;
left: -500%;
margin-top: 0;
padding-bottom: 40px;
}
.feedback-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.feedback:before, .feedback:after {
content:"";
position: absolute;
height:20%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback:before {
left:-100%;
}
.feedback:after {
right:-100%;
}
.feedback-wrapper span {
font-size: 22px;
font-family: "Droid Serif";
font-style: italic;
color: #E3DBFF;
display: block;
margin-top: 20px;
text-align: center;
}
*/
.feedback {
background-color: #8904B1;
margin: 0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px 0;
left:0 !important
}
.feedback-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
display: flex;
}
.feedback-wrapper:before,
.feedback-wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.feedback-wrapper:before {
left: -100%;
}
.feedback-wrapper:after {
right: -100%;
}
.feedback span {
text-align: center;
display: block;
}
/***Responsive***/
#media screen and (max-width: 801px) {
.bigTitle {
font-size: 120%;
}
.positives {
margin-top: 50px;
}
.positives .point {
float: none;
width: 60%;
max-width: 225px;
min-width: 180px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10%;
}
.btn-wrapper {
margin-top: 40px;
}
.feedback {
width: 112%;
left: -6%;
}
.feedback-wrapper {
width: 90%;
position: relative;
left: 50%;
top: 0;
transform: translate(-50%, 0);
}
.feedback-wrapper span {
font-size: 14px;
display: block;
font-size: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>
<script src="/js/general.js"></script>
<link media="all" type="text/css" rel="stylesheet" href="https://ndvibes.com/css/index.css">
<title>NDVibes - Webdeveloper</title>
</head>
<body>
<div class="outer-space">
<div class="wrapper">
<div class="header">
<div class="myNavbar-wrapper">
<div class="myNavbar">
<ul>
<li><a class=active href="/">Home</a></li>
<li>Uw website</li>
<li>Over</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="image-wrapper">
<img src="/images/big_image.png" />
</div>
<h1 class="bigTitle">
Webdeveloper since 2017
</h1>
<div class="positives">
<div class="point">
<img src="/images/fast.png" />
</div>
<div class="point">
<img src="/images/responsive.png" />
</div>
<div class="point">
<img src="/images/secure.png" />
</div>
</div>
<div class="btn-wrapper">
<a href="/panel">
<div class="btn colorChange purple">
Geef mij die website!
</div>
</a>
<br>
<span>
Geen enkel probleem! klik gewoon op de knop en ik zal zo snel mogelijk reageren.
</span>
</div>
<div class="feedback-wrapper colorChange purple" id="test">
<div class="feedback">
<span>"Nooit zo een snelle service gehad"</span>
<span>"Mijn klanten kunnen mij nu eindelijk altijd en overal vanaf elk device bereiken"</span>
<span>"Eindelijk mijn online website gemoderniseerd"</span>
<span>"Mijn vorige website werd gehacked, nu kan ik weer gerust slapen"</span>
</div>
</div>
<div class="footer">
Copyright © 2017 - <span id="year">2017</span> Niel Duysters
</div>
</div>
</div>
<!---------------GOOGLE ANALYTICS----------------->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46774773-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
Related
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!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.0">
<title>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
I'd like to make a sticky navbar like the one in this link: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky
However, when I add the position: sticky; property to the element in my code it works and the navbar sticks after scrolling but when I scroll further down it goes away.
I would like it so that the navbar is sticky just like the one in the example.
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
#slider {
margin: 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
</header>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>
Your nav is correctly acting "sticky", which means it sticks to the top of the parent element.
You can either:
Move your nav element up outside the <header>, to just below <body>; or
Make your <header> sticky as well
Your choice will depend on your ui requirements and use of screen real estate in different viewport heights.
I think I may have found your issue, your navbar is inside the <header></header> tag, which is why its disappearing after you scroll past the page header.
Try removing the header tags and see if it stays on the page.
To have you code running like the example shown in the link, i had to move the slider outside the header element. Then I had to code the header element with a fixed position and 0px on top.
I just tested and it is working as you want. :)
body {
margin: 0;
box-sizing: content-box;
font-family: 'Lato', sans-serif;
}
/* Removed slider from the Header element. Header is a fixed and independent block now*/
header {
position:fixed;
top:0;
z-index:10;
width: 100%;
display:block;
}
.contenedor {
width: 100%;
margin: auto;
overflow: hidden;
}
.menu-navegacion {
padding: 0;
display: flex;
height: 100px;
justify-content: space-between;
align-items: center;
background-color: rgb(75, 75, 75);
position: sticky;
top: 0;
z-index: 30;
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
.menu-header {
height: 600px;
background-color: cornflowerblue;
}
/* Added margin top equal to header height, in this case 100px */
#slider {
margin: 100px auto 0 auto;
width: 80%;
max-width: 100%;
text-align: center;
}
#slider input[type=radio] {
display: none;
}
#slider label {
cursor: pointer;
text-decoration: none;
}
#slides {
padding: 10px;
border: 3px solid #ccc;
background: #fff;
position: relative;
z-index: 1;
}
#overflow {
width: 100%;
overflow: hidden;
}
#slide1:checked~#slides .inner {
margin-left: 0;
}
#slide2:checked~#slides .inner {
margin-left: -100%;
}
#slide3:checked~#slides .inner {
margin-left: -200%;
}
#slide4:checked~#slides .inner {
margin-left: -300%;
}
#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 400%;
line-height: 0;
height: 550px;
}
#slides .slide {
width: 25%;
float: left;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
}
#slides .slide_1 {
background: #00171F;
}
#slides .slide_2 {
background: #003459;
}
#slides .slide_3 {
background: #007EA7;
}
#slides .slide_4 {
background: #00A8E8;
}
#controls {
margin: -180px 0 0 0;
width: 100%;
height: 50px;
z-index: 3;
position: relative;
}
#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}
#controls label:hover {
opacity: 1;
}
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1) {
background: url(https://image.flaticon.com/icons/svg/130/130884.svg) no-repeat;
float: right;
margin: 0 -50px 0 0;
display: block;
}
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
background: url(https://image.flaticon.com/icons/svg/130/130882.svg) no-repeat;
float: left;
margin: 0 0 0 -50px;
display: block;
}
#bullets {
margin: 150px 0 0;
text-align: center;
}
#bullets label {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background: #ccc;
margin: 0 10px;
}
#slide1:checked~#bullets label:nth-child(1),
#slide2:checked~#bullets label:nth-child(2),
#slide3:checked~#bullets label:nth-child(3),
#slide4:checked~#bullets label:nth-child(4) {
background: #444;
}
#media screen and (max-width: 900px) {
#slide1:checked~#controls label:nth-child(2),
#slide2:checked~#controls label:nth-child(3),
#slide3:checked~#controls label:nth-child(4),
#slide4:checked~#controls label:nth-child(1),
#slide1:checked~#controls label:nth-child(4),
#slide2:checked~#controls label:nth-child(1),
#slide3:checked~#controls label:nth-child(2),
#slide4:checked~#controls label:nth-child(3) {
margin: 0;
}
#slides {
max-width: calc(100% - 140px);
margin: 0 auto;
}
}
#quienessomos {
margin: 0;
width: 100%;
height: 800px;
/*
background: palegoldenrod;*/
background: rgba(211, 211, 211, 0.199);
}
#grid1 {
margin: 0;
display: grid;
grid-template-columns: 10% 40% 0% 40% 10%;
grid-template-rows: 20% 20% 20% 20% 20%;
column-gap: 50px;
/*
border: 1px solid black;*/
width: 100%;
height: 100%;
}
#imagen1 {
background-image: url(../images/main1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
grid-area: 2 / 2 / 5 / 3;
}
#texto1 {
position: relative;
width: 100%;
height: 100%;
/*
background: olive;*/
grid-area: 2 / 3 / 5 / 5;
}
#contenedortexto1 {
position: absolute;
display: inline-block;
width: 50%;
height: 100%;
/*
background: red;*/
}
#contenedortexto1 h2 {
color: rgb(7, 83, 184);
font-weight: 900;
font-size: 2em;
}
#superior {
font-size: 1.4em;
line-height: 1.5em;
font-weight: 400;
}
#inferior {
font-family: 'Ubuntu', sans-serif;
font-size: 1.4em;
line-height: 1.3em;
font-weight: 300;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<body>
<header>
<nav class="menu-navegacion contenedor">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=#>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=#>CONTACTO</a></li>
</ul>
</div>
</nav>
</header>
<!-- Slider Is outside the header element -->
<div id="slider">
<input type="radio" name="slider" id="slide1" checked>
<input type="radio" name="slider" id="slide2">
<input type="radio" name="slider" id="slide3">
<input type="radio" name="slider" id="slide4">
<div id="slides">
<div id="overflow">
<div class="inner">
<div class="slide slide_1">
<div class="slide-content">
<h2>Slide 1</h2>
<p>Content for slide 1</p>
</div>
</div>
<div class="slide slide_2">
<div class="slide-content">
<h2>Slide 2</h2>
<p>Content for slide 2</p>
</div>
</div>
<div class="slide slide_3">
<div class="slide-content">
<h2>Slide 3</h2>
<p>Content for slide 3</p>
</div>
</div>
<div class="slide slide_4">
<div class="slide-content">
<h2>Slide 4</h2>
<p>Content for slide 4</p>
</div>
</div>
</div>
</div>
</div>
<div id="controls">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
<div id="bullets">
<label for="slide1"></label>
<label for="slide2"></label>
<label for="slide3"></label>
<label for="slide4"></label>
</div>
</div>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
<section id="main">
<div class="contenedor" id="quienessomos">
<div id="grid1">
<div id="imagen1"></div>
<div id="texto1">
<div id="contenedortexto1">
<h2>QUIMICA TRV</h2>
<p id="superior">Brindamos servicios sobre comercialización de productos químicos para mantenimiento y producción, seguridad e higiene industrial.</p>
<p id="inferior">Somos una empresa en expansión con amplia experiencia en la atención de clientes de todo tipo de industrias. Entre ellas metalúrgica, alimenticia, del transporte y rectificadoras. Además tratamientos de agua para calderas y torres de enfriamiento,
automotriz, empresas de servicios, etc.</p>
</div>
</div>
</div>
</div>
</section>
</body>
I want to make my website responsive to all the devices. It is working fine on desktops and Android phones as well. However, for other devices like ( Kindle Fire HDX, Nexus 7, iPad mini, iPhone 6,7,8, Ipad pro the website is not scrolling down. I am testing my website by using inspect element option.
I am using the following query to enable scrolling, but it's not working and the screen is stuck for the above-mentioned devices.
<!DOCTYPE html>
<html >
#media screen and (max-width: 1440px ) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html {
overflow-x: hidden; }
nav{
display: none;}
}
#media screen and (max-width: 960px ) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
header .headercontent {
width: 100%;
}
.page-wrap {
background: #fff ;
}
nav ul {
width: 100%;
}
section#hero {
width: 100%;
height: auto;
min-height: 40px;
}
div#hero {
width: 100%;
height: auto;
}
div #hero .cycle-slideshow {
min-height: 440px;
}
div.page div.content {
width: 85%;
padding-left: 5%;
padding-right: 5%;
}
div.page div.sidebar {
width: 90%;
margin: 0 5%;
padding: 0;
}
.bannerimage {
width: 90%;
padding: 5%;
position: static !important;
margin-left: auto;
margin-right: auto;
/*box-sizing: border-box;*/
float: left;
}
/* div#hero img {
max-width: 60%;
}*/
div.page {
width: 100%;
}
div.copyrightinner {
width: 100%;
}
footer div.info {
width: 100%;
}
}
#media screen and (max-width: 1920px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
html {
overflow-x: hidden; }
nav{
display: none;
}
}
#media screen and (max-width: 805px) {
/* Do something about the footer */
/* html, body {
overflow-x: hidden;
}*/
.navbar{
display: none;
}
.bannerimage {
width: 90%;
padding: 5%;
position: static !important;
margin-left: auto;
margin-right: auto;
/*box-sizing: border-box;*/
float: left;
}
div.page, div.sidebar div.services {
overflow:hidden;
}
div.contentcontact h1{
display: none;
}
div.contentcontact{
height: 50px;
padding-top: 30px;
}
div.contentcontact p#blue{
display: none;
}
div.contentcontact img{
display: none;
}
.page-wrap {
background: #fff;
}
#slider-prev, #slider-next {
display: none;
}
div.page div.sidebar div.latestnews{
display:none;
}
.slider-image {
background-color: #fff;
margin-left: 0;
/* padding-left: 20px;*/
}
/* .slider-image h2 {
margin-top: 10px;
}*/
footer {
height: auto;
position: relative;
}
div.copyright {
background-color: #0053a0;
}
div.column2, div.column3
{display:none;
}
div.column1, div.column2, div.column3 {
float: none;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.page-wrap {
/*min-height: 80%;*/
margin-top: 0;
}
header
{
border-top: 3px solid #0053a0;
}
header div.logo {
float: none;
margin-left: auto;
margin-right: auto;
padding-right: 0;
width: 216px;
}
header h2.cta {
display: block;
float:none;
display:none;
}
nav {
display: none;
background: #02407c;
height: auto;
margin-bottom: 0;
border-bottom: 0;
}
nav ul {
border: 0;
margin-left: auto;
margin-right: auto;
}
nav ul li {
width: 100%;
border: 0;
border-bottom: 2px solid #0069BD;
}
nav li ul li a {
background-image: none !important;
padding-left: 50px;
}
nav ul li ul li a {
border-top: none;
border-bottom: none;
}
nav ul li ul li.last a {
border-bottom: none;
}
img {
max-width: 100%;
}
nav a {
width: 100%;
display: block;
}
div.mobilenavbtn {
display: block;
width: 100%;
background: #02407c;
position: relative;
padding-top: 3px;
}
div.mobilenavbtn .content {
width: 30px;
margin-left: auto;
margin-right: auto;
}
div.mobilenavbtn img {
margin-left: auto;
margin-right: auto;
height: 30px;
}
footer hr {
margin-bottom: 0;
}
div.copyright {
height: 80px;
padding-top: 20px;
border-bottom: 1px solid #fff;
}
div.copyright div.left {
float: none;
width: 100%;
text-align: center;
}
div.copyright div.right {
float: none;
width: 100%;
margin-top: 20px;
text-align: center;
}
div.search {
box-sizing: border-box;
margin-top: 0;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
margin-left: auto;
margin-right: auto;
background: #03386b;
}
div.smalllinks {
margin-top: 10px;
}
div.search form {
width: 180px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div.breadcrumb ul {
margin-left: 20px;
}
nav li ul {
width: 100%;
visibility: visible;
position: static;
display: none;
}
nav {
position: relative;
z-index: 100;
}
nav .menucontainer {
width: 100%;
}
nav li ul li {
width: 100%;
}
nav ul li ul li a {
width: 100%;
}
div.breadcrumb {
width: 100%;
}
.services {
display: none;
}
.latestnews .image {
width: 100px;
margin-top: 20px;
float: left;
}
.latestnews .info {
display: none;
}
.latestnews .info:first-of-type {
width: 100%;
margin-top: 20px;
float: left;
padding-left: 10px;
font-size: 16px;
color: #03396d;
font-weight: 600;
display: block;
}
.readmore {
display: block;
height: 24px;
margin-top: 26px;
}
.latestpubs .viewall {
display: block;
height: 24px;
margin-top: 10px;
color: #03396d;
font-weight: 600;
}
.latestpubs .viewall a {
color:#03396d !important;
font-size: 15px;
}
.readmore img {
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.readmore a {
color: #03396d;
}
.latestpubs .viewall img {
display: inline-block;
position: relative;
top: 4px;
left: 10px;
}
.latestnews h2 {
display: block;
width: 100%;
font-size: 20px;
padding-left: 30px;
padding-bottom: 5px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/news.jpg');
background-repeat: no-repeat;
background-position: top left;
box-sizing: border-box;
}
.latestpubs h2 {
display: block;
font-size: 20px;
width: 100%;
padding-left: 30px;
padding-bottom: 5px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/publications.jpg');
background-repeat: no-repeat;
background-position: top 2px left;
}
.services h2 {
display: block;
font-size: 20px;
width: 100%;
padding-left: 30px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #0053a0;
background-image: url('/bundles/pcaapp/images/services.png');
background-repeat: no-repeat;
background-position: top -1px left;
}
.services ul {
margin-left: 0;
margin-bottom: 20px;
}
.services ul li a {
color: #03396d;
font-size: 16px;
font-weight: 600;
}
.services ul li {
display: block;
background-image: url('/bundles/pcaapp/images/li.png');
background-repeat: no-repeat;
background-position: top 13px left;
padding-bottom: 8px;
padding-left: 25px;
border-bottom: 1px dotted #0053a0;
padding-top: 7px;
}
.services ul li.active a, .services ul li:hover a {
color: #e35b00;
}
.services ul li.active, .services ul li:hover{
background-position: top 13px left 5px;
}
.latestpubs ul {
list-style-image: url('/bundles/pcaapp/images/dlbullet.png');
margin-top: 10px;
margin-left: 20px;
}
.latestpubs ul li {
color: #0271d8;
font-size: 13px;
padding-top: 8px;
}
div.smalllinks {
width: auto;
}
}
/* iPad in portrait and below */
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.latestnews .info {
width: 49%;
padding-left: 1%;
}
div.smalllinks {
text-align: center;
}
div.smalllinks ul {
margin-left: 0;
}
div.page div.content div.contact div {
width: 90% !important;
margin: 0 5% 20px 5%;
float: left;
}
div.contact form label {
margin-bottom: 5px;
width: 100%;
margin-left: 0;
}
div.contact form label {
margin-bottom: 5px;
width: 100%;
margin-left: 0;
}
div.contact {
height: auto;
padding-bottom: 20px;
}
div.page div.content #google_map {
width: 100% !important;
}
div.page div.content div.contact {
width: 100%;
}
div.contact input[type=text],
div.contact input[type=email],
div.contact textarea {
width: 90%;
padding: 3%;
left: 0;
}
}
#media screen and (max-width: 540px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.subFooter .break {
clear: both;
margin-bottom: 20px;
}
}
/* iPhone 6 Plus and below */
#media screen and (max-width: 414px) {
body {
overflow-x: hidden;
overflow-y: auto;
}
.latestnews .info {
width: 100%;
padding-left: 0;
}
footer h3 {
width: 100%;
}
ul.news-articles li article div h3 {
margin-bottom: 5px;
}
div.contact form label {
margin-left: 0;
width: 100%;
}
}
#media screen and (-webkit-min-device-pixel-ratio: 2) {
body {
overflow-x: hidden;
overflow-y: auto;
}
header div.logo a {
background-image: -webkit-image-set( url('/bundles/pcaapp/images/site_logo.jpg') 1x,
url('/bundles/pcaapp/images/site_logo_2x.png') 2x);
}
}
nav a {
text-decoration: none;
color: inherit;
}
nav {
/* border-top: 1px solid #04294d; */
/* border-bottom: 2px solid #04294d; */
height: 37px;
/* background: url('/bundles/pcaapp/images/nav_bg.jpg') repeat-x; */
}
nav ul li { display: inline;
}
nav .menucontainer {
width: 980px;
margin-left: auto;
margin-right: auto;
position: relative;
}
nav ul {
list-style-type: none;
float: left;
}
ul {
display: block;
margin: 0;
padding: 0;
}
nav ul li {
position: relative;
float: left;
}
nav ul li a {ow
box-sizing:border-box;
padding-left: 17px;
padding-right: 17px;
color: #fff;
text-transform: uppercase;
height: 39px;
display: inline-block;
padding-top: 10px;
font-size: 14px;
float: left;
}
nav ul li.first {
}
nav ul li.current, nav ul li.current a, nav ul li:hover, nav ul li:hover > a {
border-bottom: 1px solid #0069BD;
}
nav ul li.last a {
}
<!DOCTYPE html>
<html >
<! head >
<head profile="http://www.w3.org/2005/10/profile"> <! image displayed on the tab alongwith the title>
<link rel="icon"
type="image/png"
href="images/logo.jpg" /> <! image displayed on the tab alongwith the title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <! encoding scheme>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
<title>Marvel Tech</title> <!title of the tab>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <!icons used in footer>
<link rel="stylesheet" href="style.css" /> <!stylesheet Linking>
<script src="jquery.min.js"></script> <! javascript used for slider animation>
<script type='text/javascript' src='slider.js'></script> <! javascript used for slider animation>
</head>
<! Body>
<body>
<div class="page-wrap">
<!- Header section >
<header>
<div class="headercontent">
<div class="logo">
<img src="images/newlogo.jpg" >
</div>
<div class="navbar">
<a class="current" href="Marvel_Tech.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
Design
Consulting
R&D
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Software
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
Steam Turbine Design Package
Gas Turbine Design Tools
Power Plant Monitoring
Prognostic System
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Products
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
ORC Turbine
Gas Turbine
Saturated Team Turbine
</div>
</div>
About
Contact
<div class="dropdown">
<button class="dropbtn">Language
<i class="fa fa-caret-down"></i> <!arrow displayed next to drop-down list>
</button>
<div class="dropdown-content">
<img src="images/english.png"> English
<img src="images/chinese.png"> Chinese <!- Mention the name of chinese page in place of hash.>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!–– Navigation Bar to be dispalyed in mobiles and tablets>
<nav>
<div class="menucontainer">
<ul>
<li class="current first"> Home</li>
<li> Services</li>
<li> Software</li>
<li> Products</li>
<li> About</li>
<li > Contact </li>
<li class="last"> Language </li>
</ul>
</div>
</nav>
<!- Navigation bar icon displayed on mobiles and tablets>
<div class="mobilenavbtn">
<div class="content">
<img src="images/mobilenavbtn.png" alt="Menu">
</div>
</div>
<!- Slider Section >
<section id="hero">
<div id="hero" style="position:relative;">
<div id="slider-prev">
<img src="images/slide_left.png" alt="Previous Slide"> <!image of arrow head on the left side of the slider to slide on previous image>
</div>
<div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="5000" data-cycle-slides="> div" data-cycle-prev="#slider-prev" data-cycle-next="#slider-next" style="position: relative
; overflow: hidden;"> <! slider animation>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 95; opacity: 1; display: block; visibility: hidden;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/Turbomachinery.jpg"> <! slider image>
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 200px; left: 655px;" class="bannerimage">
<h2>Steam Turbine <em>Technology</em></h2>
<p align="justify">We are experts in the design, retrofit and analysis of steam turbines of all scales. With complete and powerful in-house design tools and procedures, we can design steam
turbines from 1MW up to 1000MW.
</p> <! text on slider image>
<div class="readmore">
Read More
</div>
</div>
</div>
<! Second image of the slider>
<div class="slider-image cycle-slide cycle-slide-active" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/engine.png">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 170px; left: 655px;" class="bannerimage">
<h2>Special Turbomachinery <em>Products</em></h2>
<p align="justify">We design, test and build not only traditional turbomachinery, but also products with completely new concepts like TRT
(Top-gas Recovery Turbine), ORC (Organic Rankine Cycle) turbines, SCO2 (super-critical CO2) compressors and turbines.
</p>
<div class="readmore">
Read More
</div>
</div>
</div>
<!- Third image of the slider>
<div class="slider-image cycle-slide cycle-slide-active" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 99; visibility: visible; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/power.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 185px; left: 655px;" class="bannerimage">
<h2>Power Plant <em>Technology</em></h2>
<p align="justify">We develop our unique digital solution for the monitoring and prognostic system of the whole Combined Cycle Power Plants. This system is able to record and predict the performances of key equipment
in CCCP like gas and steam turbine, HRSG.
</p>
<div class="readmore">
Read More
</div>
</div>
</div>
<! Fourth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 97; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/aircraft.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 210px; left: 655px;" class="bannerimage">
<h2>Aircraft <em>Propulsion</em></h2>
<p align="justify"> We provide design and consulting services for key components of the aircraft engines.
For aerodynamic problems of the aircraft like the fuselage, engine housing etc. we can also deliver experienced design and analysis services.
.</p>
<div class="readmore">
Read More
</div>
</div>
</div>
<! Fifth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/industrail compressor.jpg">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 210px; left: 655px;" class="bannerimage">
<h2>Gas Turbine <em>Technology</em></h2>
<p align="justify">We have long years of experiences in gas turbine development. We have independent design capabilities of gas turbine compressors, combustors and turbine blades, all from
scratch to tests and delivering top performance design.
</p>
<div class="readmore">
Read More
</div>
</div>
</div>
<! Sixth image of the slider>
<div class="slider-image cycle-slide" style="clear: both; width: 100%; box-sizing: border-box; position: absolute; top: 0px; left: 0px; z-index: 96; visibility: hidden; opacity: 1; display: block;">
<div style="width: auto;position: static; top: 0; left: 0; z-index: 70;">
<img src="images/rods.png">
</div>
<div style="position: absolute; z-index: 80; background-color: rgba(255,255,255,0.9); top: 230px; left: 655px;" class="bannerimage">
<h2 >Combustion <em>Technology</em></h2>
<p align="justify">We understand the combustion processes very well and are few of the teams in world that can exactly calculate complex combustion processes from household boilers to large gas
turbines.
</p>
<div class="readmore">
Read More
</div>
</div>
</div>
</div>
<div id="slider-next"> <!image of arrow head on the right side of the slider to slide on previous image>
<img src="images/slide_right.png" alt="Next Slide">
</div>
</div>
</section>
<!- Overview section >
<div class="pagecontainer">
<div class="page">
<div class="content" style="clear: both;">
<h1 class="homepage">Marvel-Tech Limited provides following services and product for both domestic and international clients:
</h1>
<ul>
<li ><div class="readmore">Gas Turbine Technology:</i> Design, Retrofit and Analysis, R&D, Design Tools, test support</li>
<li><div class="readmore">Steam Turbine Technology: </i> Design and Analysis, R&D, Design Tools</li>
<li><div class="readmore">Power Plant Technology: </i> CCCP Monitoring and Prognostic System </li>
<li><div class="readmore">Combustion Technology: </i> Design, Analysis, R&D, test support, design tools </li>
<li><div class="readmore">Aircraft Propulsion: </i> Design, Analysis, R&D, Design Tools</li>
<li><div class="readmore">Special turbomachinery: </i> Concept and Detailed Design, test, R&D</li></ul>
</div>
<!- News Section >
<div class="sidebar">
<div class="latestnews">
<h2>Latest <em>News</em></h2>
<! First News>
<div class="info">Marvel Tech was crowned champions in intelligent manufacturing.<! News Headline>
<p>The Pujian branch of Caohejing Hi-tech Park held the final of the intelligent manufacturing section of Shanghai Youth Innovation and Entrepreneurship
Competition. </p>
<div class="readmore">Read More <i class="fa fa-external-link" aria-hidden="true"></i> <! read more link and symbol in front of read more>
</div>
</div>
<! Second News>
<div class="info">IMechE Webinar on centrifugal compressor design
<p>Hear the seminar given by Hamid Hazby and Mick Casey online via the IMechE's website.</p>
<div class="readmore">Read More <i class="fa fa-external-link" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!- Footer Section >
<footer>
<div class="info">
<! First Column in the footer>
<div class="column1">
<h3>Marvel<span><em>Tech</em></span></h3>
<p>
Home
.
Services
.
Software
.
Products
.
About
.
Contact
</p>
<p>MARVEL-TECH LIMITED © 2016</p>
</div>
<! Second Column in the footer>
<div class="column2">
<h3>Contact Us</h3>
<div class="footer-center">
<div>
<span><i class="fa fa-map-marker"></i> <! adding the location symbol>
<p>Dongchuan Road No. 555<br> Minhang, Shanghai</p>
</span>
</div>
<div>
<i class="fa fa-phone"></i> <! adding the phone symbol>
<p>+86 60676923</p>
</div>
<div>
<i class="fa fa-envelope"></i> <! adding the email symbol>
<p> info#marvel-tech.cn
</p>
</div>
</div>
</div>
<! Third Column in the footer>
<div class="column3">
<h3>About the Company</h3>
<div class="footer-right">
<p align="justify" class="footer-company-about">
Since 2015, we have been providing a range of innovative services on design, calculations and expertise for energy conversion machinery.
</p>
</div>
</div>
</div>
</footer>
</body>
</html>
How can I resolve this issue to make the website adaptable to these devices as well.
Have you tried:
body {
overflow-x: hidden;
overflow-y: auto;
}
I face some problem in my html and css.
My requirement like this image:-
My code below:-
#font-face {
font-family: "OpenSans-CondLight";
src: url('fonts/OpenSans-CondLight.woff') format('woff');
}
#font-face {
font-family: "Rubik-BoldItalic";
src: url('fonts/Rubik-BoldItalic.woff') format('woff');
}
#font-face {
font-family: "RobotoSlab-Regular";
src: url('fonts/RobotoSlab-Regular.woff') format('woff');
}
/*header area */
header{
height: 350px;
background: #050000;
overflow: hidden;
display: block;
}
.container{
background: #050000;
}
.top-area{
float: left;
width: 20%;
font-family: "Rubik-BoldItalic";
font-size: 60px;
color: #FFFFFF;
text-transform: uppercase;
overflow: hidden;
}
.logo-area {
width: 60%;
overflow: hidden;
display: block;
position: relative;
z-index: 9999;
}
.logo-area img {
width: 500px;
height: auto;
z-index: 9999;
margin-left: 35px;
}
.search-box {
width: 25%;
float: right;
margin: -300px 73px 0 0;
}
.all-events {
overflow: hidden;
background: #FF9D34;
height: 100px;
width: 80%;
margin: auto;
display: block;
position: absolute;
top: 178px;
border-radius: 10px;
z-index: 0;
}
.all-events .left-side span{
float: left;
color: #000000;
text-transform: uppercase;
font-size: 25px;
padding-left: 20px;
padding-top: 40px;
}
.all-events .left-side .glyphicon {
font-size: 45px;
color: #000;
}
.all-events .right-side span{
float: right;
color: #000000;
text-transform: uppercase;
font-size: 25px;
}
.main-content {
width: 100%;
height: 100%;
overflow: hidden;
display: block;
background: #FF931D;
margin: auto;
}
.main-content .left-content .top-content{
float: left;
overflow: hidden;
display: block;
width: 55%;
height: 340px;
margin-top: 22px;
}
.main-content .left-content .top-content img {
width: 600px;
height: 300px;
}
.main-content .left-content .bottom-content{
float: left;
overflow: hidden;
display: block;
width: 75%;
height: 340px;
margin-top: 10px;
}
.main-content .left-content .bottom-content img {
width: 600px;
height: 300px;
}
.main-content .right-content {
float: right;
overflow: hidden;
display: block;
width: 40%;
margin: -688px 52px 0 0;
}
.main-content .right-content img {
width: 522px;
height: 648px;
}
footer{
overflow: hidden;
display: block;
height: 410px;
width: 90%;
margin: auto;
background-color: #FF931D;
}
footer .left-footer {
float: left;
width: 350px;
overflow: hidden;
display: block;
}
footer .middle-footer {
width: 350px;
overflow: hidden;
display: block;
}
.about {
height: 400px;
width: 400px;
border-radius: 50%;
background: #fff;
float: right;
position: relative;
top: -79px;
}
.about p {
position: absolute;
font-family: "OpenSans-CondLight";
font-size: 25px;
text-align: center;
top: 62px;
}
.about img {
width: 80px;
height: auto;
position: relative;
top: 240px;
left: 98px;
margin-left: 31px;
}
.button {
font-size: 15px;
color: blue;
cursor: pointer;
}
.button:active{
color: #000;
}
.caption {
background: #fff;
width: 599px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="IE=edge">
<title>Spotlight</title>
<!-- style -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="all" />
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<!-- js -->
<link rel="stylesheet" type="text/css" href="js/modernizr.js" media="all" />
</head>
<body>
<header>
<div class="container">
<div class="top-area">
<h2>24 hour event</h2>
</div>
<div class="logo-area">
<img src="images/logo.gif" alt="Logo">
</div>
<div class="search-box">
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
<div class="all-events">
<div class="left-side">
<span>donate here</span>
<div class="donate_img">
<img src="images/07.tif" alt="">
</div>
</div>
<div class="right-side">
<span>all events faq</span>
</div>
</div>
</div>
</header>
<section class="main-content">
<div class="container">
<div class="left-content">
<div class="top-content">
<img src="images/damien-rice-tour-italia.jpg" alt="">
<div class="caption">
<span>Damien Rice, Kildare Culture Centre at 8pm. Ref: DMK</span>
<div class="button">
Book now
</div>
</div>
</div>
<div class="bottom-content">
<img src="images/glenhansard_100x445.jpg" alt="">
<div class="caption">
<span>Glen Hansard, Olympia Theatre Dublin at 7pm. Ref: GHO </span>
<div class="button">Book now
</div>
</div>
</div>
</div>
<div class="right-content">
<img src="images/tommytiernan.jpg" alt="">
<div class="caption">
<span>Tommy Tiernan, Cork Comedy Club at 7pm. Ref: GHO</span>
<div class="button">Book now
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="left-footer">
<span>Click on the blue <div class="button">Book now</div> now link on any
event enter your email and you will recive your
ticket via email.
Alternativly or if you have any questions not
listed on the faq tab you can book your tocket
dierectly with us qouting the event refrence
number.
</span>
</div>
<div class="middle-footer">
<span>phone:0741237451
email:24hourevent#spotlight.ie
get involved
Would you like to volunteer even one
hour of your time. Make a diffrence
contact us at:
volunteer#spotlight.ie
</span>
</div>
<div class="about">
<p>ABOUT <br>
Focas Ireland works with
people who are homeless or
who are at risk of losing there
homes across ireland.
<br> Focas Ireland website click </p>
<img src="images/d2c4efe596a6d313c1005ff33ff627ff.jpeg" alt="focus">
<img src="images/here_fixed_wm.jpg" alt="download">
</div>
<div class="social-icons">
<img src="images/youtube heart shaped free social media icon .png" alt="you tube">
<img src="images/Facebook heart shaped free social media icon.png" alt="facebook">
<img src="images/twitter heart shaped free social media icon.png" alt="twitter">
</div>
</div>
</footer>
</body>
</html>
My main problem is in my footer I can't change the color. Image bottom side. Can anyone help me?
You can try adding this line of CSS:
footer:after {
content: "";
display: table;
clear: both;
}
I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
And the height of the header depends on the font-size of the text in it. How can I set the height of the header manually by a command?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
bottom: 0px;
left: 50%;
border-left: 1px dotted #333333;
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
JS:
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
Codepen
Try this:
<div class="row col-md-12">
...
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
...
</div>
If you want change height of header try to set height for div, for example:
<div class="col-md-10 text-center" style="height:100px;">
<li><a>!</a></li>
</div>
Of course for good style, create a specific style at css with value of height and add to class of your div.
But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.
<div class="col-md-10 text-center">
<a>!</a>
</div>
How can I set the height of the header manually by a command?
You can assign the height property. I also set a background-color, so you can see that the header actually grows.
.header {
height: 200px;
background-color: blue;
}
actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.
here is demo...
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
border-left: 1px dotted #333333;
bottom: 0;
content: "";
display: block;
left: 0;
margin: 0 auto 0 50%;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="navbar">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header ">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div></div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>