I'm still not too familiar with CSS, still working on it and learning through YouTube for the design purpose.
The sticky navigation bar will only stick on bottom IF its position: absolute. And here comes the problem: How do I put my content next to the navigation bar? Foremost the content that I put beneath it won't let the page expand more space/ letting me to scroll anyway.
I've tried to figure this out by adjusting everything like position, float, etc, and I'm still stuck. Forgive me for my ignorance, and thanks for the help.
/* Background slider */
#font-face {
font-family: 'Bebas-Neue';
src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}
.slide-1,.slide-2,.slide-3 {
position:absolute;
width:100%;
height:100%;
z-index:1;
background-attachment:fixed;
}
.slider .line {
position: absolute;
width: 98%;
height: auto;
bottom: 40%;
margin: 10px;
z-index:999;
}
.slider .slider-caption {
font-family:Oswald;
height: 0%;
bottom:25%;
left:16px;
text-transform:uppercase;
font-size:50px;
min-height: 80px;
position: absolute;
font-weight:bold;
z-index:999;
}
.slider .slider-description {
font-family:Oswald;
bottom:20%;
left:16px;
font-size:15px;
height:0%;
position: absolute;
z-index:999;
}
.slide-1 {
background-image:url('../image/01_contentslider_1.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-1 12s infinite;
-webkit-animation: fade-1 12s infinite;
}
.slide-2 {
background-image:url('../image/01_contentslider_2.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-2 12s infinite;
-webkit-animation: fade-2 12s infinite;
}
.slide-3 {
background-image:url('../image/01_contentslider_3.jpg');
background-repeat: no-repeat;
background-size:cover;
animation: fade-3 12s infinite;
-webkit-animation: fade-3 12s infinite;
}
#-webkit-keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.transparency { /*Opacity 50*/
position: relative;
width: 100%;
height: 100%;
background:url('../image/00_Transparent.png');
top: 0;
bottom:0;
z-index: -1000;
overflow:hidden;
}
/* Sticky Nav Bar Settings */
.content-layer {
position: absolute;
bottom:0;
float:left;
padding:0;
}
#nav-bar {
overflow: hidden;
background-color: #333;
position:relative;
float:left;
width: 100%;
padding: 0;
bottom:0;
z-index:999;
}
#nav-bar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav-bar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#nav-bar li {
float: left;
}
#nav-bar a:hover {
background-color: #ddd;
color: black;
}
#nav-bar li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#nav-bar a.active {
background-color: #4CAF50;
color: white;
}
.page-content {
padding: 16px;
z-index: 999;
bottom: 0;
overflow:hidden;
position:relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .page-content {
padding-top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home | Reise Web-Portal </title>
<link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
<link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
<link rel="stylesheet" href="css/00_Loading....css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Loading Script -->
<script type="text/javascript">
$(window).on('load', function() {
$('.preloader').addClass('complete')
})
</script>
</head>
<body>
<!-- Loading the Page OP -->
<div class="preloader">
<div class="loader">
</div>
</div>
<!-- Loading the Page ED -->
<script type="text/javascript">
// Appearance of all content
$(function() {
setTimeout(function() {
$('.showcase').removeClass('hidden');
}, 4500);
})();
</script>
<div class="page">
<span class="menu-toggle">
<i class="menu-open fa fa-bars fa-lg"></i>
<i class="menu-close fa fa-times fa-lg"></i>
</span>
<ul class="menu-items">
<img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<!-- Stuff inside the page -->
<div class="content">
<!-- Home Page -->
<div class="background-slide">
<!-- Slide Show -->
<div class="slider">
<div class="slide-1">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Start Your Journey</h4>
</div>
<div class="slider-description">
<h2>Now or never.</h2>
</div>
</div>
</div>
<div class="slide-2">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Enjoy your life without regrets</h4>
</div>
<div class="slider-description">
<h2>By understanding the world in a greater depth.</h2>
</div>
</div>
</div>
<div class="slide-3">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Reach the sky with your hands</h4>
</div>
<div class="slider-description">
<h2>Fuck this shit.</h2>
</div>
</div>
</div>
</div>
</div>
<div id="nav-bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="page-content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
</div>
</div>
</div>
<!-- Sticky Nav Bar Script -->
<script type="text/javascript">
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("nav-bar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<!-- Off Canvas Script -->
<script type="text/javascript">
var $page = $('.page');
$('.menu-toggle').on('click', function() {
$page.toggleClass('shazam');
});
$('.content').on('click', function() {
$page.removeClass('shazam');
});
</script>
</body>
</html>
/*02_Parallax_Slider.css*/
/* Background slider */
#font-face {
font-family: 'Bebas-Neue';
src: url('BebasNeue.woff') format('woff'), /* Pretty Modern Browsers */
}
.slide-1,
.slide-2,
.slide-3 {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
background-attachment: fixed;
}
.slider .line {
position: absolute;
width: 98%;
height: auto;
bottom: 40%;
margin: 10px;
z-index: 999;
}
.slider .slider-caption {
font-family: Oswald;
height: 0%;
bottom: 25%;
left: 16px;
text-transform: uppercase;
font-size: 50px;
min-height: 80px;
position: absolute;
font-weight: bold;
z-index: 999;
}
.slider .slider-description {
font-family: Oswald;
bottom: 20%;
left: 16px;
font-size: 15px;
height: 0%;
position: absolute;
z-index: 999;
}
.slide-1 {
background-image: url('../image/01_contentslider_1.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-1 12s infinite;
-webkit-animation: fade-1 12s infinite;
}
.slide-2 {
background-image: url('../image/01_contentslider_2.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-2 12s infinite;
-webkit-animation: fade-2 12s infinite;
}
.slide-3 {
background-image: url('../image/01_contentslider_3.jpg');
background-repeat: no-repeat;
background-size: cover;
animation: fade-3 12s infinite;
-webkit-animation: fade-3 12s infinite;
}
#-webkit-keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes fade-1 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes fade-2 {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes fade-3 {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.transparency {
/*Opacity 50*/
position: relative;
width: 100%;
height: 100%;
background: url('../image/00_Transparent.png');
top: 0;
bottom: 0;
z-index: -1000;
overflow: hidden;
}
/* Sticky Nav Bar Settings */
.content-layer {
position: absolute;
bottom: 0;
float: left;
padding: 0;
}
#nav-bar {
overflow: hidden;
background-color: #333;
position: relative;
float: left;
width: 100%;
padding: 0;
bottom: 0;
z-index: 999;
}
#nav-bar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav-bar ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#nav-bar li {
float: left;
}
#nav-bar a:hover {
background-color: #ddd;
color: black;
}
#nav-bar li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#nav-bar a.active {
background-color: #4CAF50;
color: white;
}
.page-content {
padding: 16px;
z-index: 999;
bottom: 0;
overflow: hidden;
position: relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.page-content {
padding-top: 60px;
}
/* 00_Fundamentals.CSS */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
font-family: Comfortaa;
}
body {
color: white;
}
.page {
height: 200%;
background-color: #000;
}
.content {
height: 50%;
transform-origin: top left;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.24, 1);
}
.content-inner {
height: 100%;
overflow-y: auto;
line-height: 30px;
background-color: white;
}
.menu-toggle {
z-index: 1000;
position: fixed;
top: 0;
left: 0;
display: block;
cursor: pointer;
width: 80px;
height: 80px;
background-color: gray;
border-bottom-right-radius: 100%;
}
.menu-toggle:active i {
opacity: 0.8;
}
.menu-toggle i {
color: #f0f0f0;
}
.menu-toggle .menu-open,
.menu-toggle .menu-close {
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: : -12px;
transition: transform 0.7s cubic-bezier(1, 0.005, 0.25, 1), -webkit-transform 0.7s cubic-bezier(1, 0.005, 0.25, 1);
}
.menu-toggle .menu-open {
transform-origin: -100px -100px;
}
.menu-toggle .menu-close {
transform: rotate(20deg);
transform-origin: -100px -160px;
}
.menu-items {
position: fixed;
bottom: 0;
left: 50px;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-items li {
height: 60px;
margin-bottom: 30px;
transform: translateX(-300px);
transition: transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1), -webkit-transform 0.7s 0s cubic-bezier(1, 0.005, 0.24, 1);
}
.menu-items li:nth-child(2) {
margin-left: 40px;
}
.menu-items li:nth-child(3) {
margin-left: 80px;
}
.menu-items li:nth-child(4) {
margin-left: 160px;
}
.menu-items a {
display: block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
color: #fff;
transition: color .2s;
}
.menu-items a:hover {
color: #f0f0f0;
}
/* the class to Open the menu */
.shazam .content {
transform: rotate(-30deg);
}
.shazam .menu-open {
transform: rotate(-20deg);
opacity: 0;
transition: 0.7s;
}
.shazam .menu-close {
transform: rotate(0);
}
.shazam .menu-items li {
transform: translateX(0);
transition: transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.35s 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shazam .menu-items li:nth-child(2) {
transition-delay: .47s;
}
.shazam .menu-items li:nth-child(3) {
transition-delay: .48s;
}
h1 {
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
}
.menu-logo-pic {
width: 55%;
height: 55%;
opacity: 0;
display: block;
position: relative;
pointer-events: none;
transition: .6s;
left: -90px;
}
.shazam .menu-items .menu-logo-pic {
opacity: 1;
transition: .6s;
}
/* Footer */
.center {
text-align: center;
margin: auto;
}
.bg-light {
background: #f4f4f4;
color: #333;
}
.bg-dark {
background: #333;
color: #f4f4f4;
}
footer {
padding: 2.2rem;
position: relative;
bottom: 0;
}
footer p {
margin: 0;
}
.newone {
vertical-align: center;
text-align: center;
}
.row {
margin: 0 auto;
max-width: 840px;
font-family: Arial;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Home | Reise Web-Portal </title>
<link rel="stylesheet" type="text/css" href="vendor/fontawesome-free/css/all.min.css">
<link rel="stylesheet" type="text/css" href="css/00_Fundamentals.css">
<link rel="stylesheet" type="text/css" href="css/02_Parallax_Slider.css">
<link rel="stylesheet" href="css/00_Loading....css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/00_Bebas_Neue_Font.css">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Loading Script -->
<script type="text/javascript">
$(window).on('load', function() {
$('.preloader').addClass('complete')
})
</script>
</head>
<body>
<!-- Loading the Page OP -->
<div class="preloader">
<div class="loader">
</div>
</div>
<!-- Loading the Page ED -->
<script type="text/javascript">
// Appearance of all content
$(function() {
setTimeout(function() {
$('.showcase').removeClass('hidden');
}, 4500);
})();
</script>
<div class="page">
<span class="menu-toggle">
<i class="menu-open fa fa-bars fa-lg"></i>
<i class="menu-close fa fa-times fa-lg"></i>
</span>
<ul class="menu-items">
<img class="menu-logo-pic" alt="Reise Web-Portal" src="image/00_Logo_2.png">
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>
<!-- Stuff inside the page -->
<div class="content">
<!-- Home Page -->
<div class="background-slide">
<!-- Slide Show -->
<div class="slider">
<div class="slide-1">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Start Your Journey</h4>
</div>
<div class="slider-description">
<h2>Now or never.</h2>
</div>
</div>
</div>
<div class="slide-2">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Enjoy your life without regrets</h4>
</div>
<div class="slider-description">
<h2>By understanding the world in a greater depth.</h2>
</div>
</div>
</div>
<div class="slide-3">
<div class="transparency">
<div class="line">
<hr>
</div>
<div class="slider-caption">
<h4>Reach the sky with your hands</h4>
</div>
<div class="slider-description">
<h2>Fuck this shit.</h2>
</div>
</div>
</div>
</div>
</div>
<div id="nav-bar">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<div class="page-content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
</div>
</div>
</div>
<!-- Sticky Nav Bar Script -->
<script type="text/javascript">
window.onscroll = function() {
myFunction()
};
var navbar = document.getElementById("nav-bar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
<!-- Off Canvas Script -->
<script type="text/javascript">
var $page = $('.page');
$('.menu-toggle').on('click', function() {
$page.toggleClass('shazam');
});
$('.content').on('click', function() {
$page.removeClass('shazam');
});
</script>
</body>
</html>
If you want a navigation bar to always stay at the bottom of the screen regardless of window resizing/size, AND some more content below it scrolling down, you may want to use vh attribute (which stands for view height) doing something like this:
<div style="display:flex;flex-direction:column;height:100vh;background:red;">
<div style="display:flex;flex-direction:column;align-self:flex-start;flex-grow:2;">
//Your upper content
</div>
<div style="display:flex;align-self:flex-start;height:80px;">
//Your nav bar
</div>
</div>
<div style="height:300px;background:gray;">
//rest of the stuff below
</div>
Related
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://http://www.reliantindustrialsupply.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300,600">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": [
"logo.jpg"
]
}
</script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}#-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}#keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, .95);
}
*, *::before, *::after {
box-sizing: border-box;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, .75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1,1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: -.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
amp-carousel {
padding-top: 60em;
}
.content {
background-color: dark-grey;
}
.Centered{
text-align: center;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
}
.left {
padding-right: 50%;
margin: 2rem;
font-family: 'Work Sans';
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
}
.right {
float: right;
}
img {
margin-left: 50%
}
</style>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<header>
<h1>logo</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<body>
<amp-carousel layout="fixed-height"
type="slides"
height="500"
controls
loop
autoplay
delay="3000" data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide">
<amp-img src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/xxlkv2g.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/mKQncTG.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/F4jWDpd.jpg"
width="100%"
height="100%"></amp-img>
<amp-img src="https://i.imgur.com/wWyxGeL.jpg"
width="100%"
height="100%"></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="100%"
height="100%"
poster="https://i.imgur.com/lNFDJb1.png">
<source src="https://i.imgur.com/3TFahoU.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class='content'>
<h1 class="Centered">Providing solutions for all your surface treatments</h1>
<div class="clearfix">
<p class="left">Reliant Industrial Supply provides solutions for all your surface treatments.Our supplier sia Coated Abrasives, the oldest abrasive manufacturer in the world, brings one of the best abrasives on the market. We supply Flex Trim brushes for all liner and carousel sanding needs. We provide AirVantage Sanders and Coilhose Pneumatics, for when you want the best quality handsanding tools and results. When it comes to machines, we have one of the best and also one of the most experienced machinery manufacturers, Timesavers Wide Belt Sanders. For cutting and shaping we have a wide variety of Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or sanding, you can rely on Reliant. We provide solutions for surface preparation through complete sanding systems which include coated abrasives, pneumatic sanders and machinery.</p>
<img class="right"src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
layout="responsive"
width = 800px;
height = 200px;>
</div>
</div>
</body>
</html>
I have tried many solutions listed on stack overflow, such as display:inline, but they do not work. I have used things such as a responsive layout. Also I am trying to make the AMP compatible so that also might be an issue. I don't know exactly if the syntax of AMP might interfere with position of images and text Thank you for helping me out!
You can wrap the p and img in divs and assign container with the .clearfix class a display of flex. This aligns the bottom paragraph and text right next to eachother.
You would just need to play around with the behavior of the divs for responsiveness.
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
#keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
#media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
amp-carousel {
padding-top: 60em;
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.left {
margin: 2rem;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<header>
<h1>logo</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li>Products</li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
<body>
<amp-carousel
layout="fixed-height"
type="slides"
height="500"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="http://www.reliantindustrialsupply.com/images/banner1.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/xxlkv2g.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/mKQncTG.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/F4jWDpd.jpg"
width="100%"
height="100%"
></amp-img>
<amp-img
src="https://i.imgur.com/wWyxGeL.jpg"
width="100%"
height="100%"
></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="100%"
height="100%"
poster="https://i.imgur.com/lNFDJb1.png"
>
<source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class="content">
<h1 class="Centered">
Providing solutions for all your surface treatments
</h1>
<div class="clearfix">
<div>
<p class="left">
Reliant Industrial Supply provides solutions for all your surface
treatments.Our supplier sia Coated Abrasives, the oldest abrasive
manufacturer in the world, brings one of the best abrasives on the
market. We supply Flex Trim brushes for all liner and carousel
sanding needs. We provide AirVantage Sanders and Coilhose
Pneumatics, for when you want the best quality handsanding tools and
results. When it comes to machines, we have one of the best and also
one of the most experienced machinery manufacturers, Timesavers Wide
Belt Sanders. For cutting and shaping we have a wide variety of
Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
sanding, you can rely on Reliant. We provide solutions for surface
preparation through complete sanding systems which include coated
abrasives, pneumatic sanders and machinery.
</p>
</div>
<div>
<img
class="right"
src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b21f5a4-2e5f-41f0-8dad-efd23bed0d9a/d4afbws-c0d0181e-3af5-4396-8a25-03179fe90de4.png/v1/fill/w_800,h_200,q_80,strp/blitzle_banner_800x200_by_poketrainertk_d4afbws-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0yMDAiLCJwYXRoIjoiXC9mXC85YjIxZjVhNC0yZTVmLTQxZjAtOGRhZC1lZmQyM2JlZDBkOWFcL2Q0YWZid3MtYzBkMDE4MWUtM2FmNS00Mzk2LThhMjUtMDMxNzlmZTkwZGU0LnBuZyIsIndpZHRoIjoiPD04MDAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.i-LS_KPDS28_jEfNNLQ7CuIXHSH38heUTJKHQU_ZYZc"
layout="responsive"
width="800px;"
height="200px;"
/>
</div>
</div>
</div>
</body>
</html>
Trying to make logo/image become larger when cursor on it - however it enlarges when your are on areas where the image is not even there - https://gyazo.com/a505f013f6f18a16c13514458cf95f12
I watched a youtube tutorial to do the enlarging - im not sure if it is the image that for some reason is too wide but i have specified the width? The dimensions of the logo/image as per the file is 1024x1024
HTML:
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img{
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
It happen because your .logo div is taking a width at that place of the screen.
You can read about How to make a div not larger than its contents.
The solution I used was to define max-width to the logo div and that's it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
max-width: 300px;
}
.logo img {
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo:hover img {
transform: scale(1.35)
}
.navigation-links {
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a {
color: #fff;
text-decoration: none;
}
.gift img {
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main {
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0% {
background-position: 0 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
Note: in order to spot problems like this, just inspect the page's elements and check their sizes on the screen. Good Luck!
This is because you didn't give your Image hover, but the Parent div.
you need to change it like this:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat Alternates', sans-serif;
}
.logo {
flex-basis: 15%;
margin: 0;
}
.logo img{
padding: 35px;
width: 250px;
height: 250px;
transition: transform .9s ease;
overflow: hidden;
}
.logo img:hover{ /* <<<<--- You need to change here */
transform: scale(1.35)
}
.navigation-links{
flex: 1;
text-align: right;
margin-top: -205px;
margin-right: 96px;
}
.navigation-links ul li {
list-style: none;
display: inline-block;
margin: 15;
font: Montserrat;
font-weight: 700;
}
.navigation-links ul li a{
color: #fff;
text-decoration:none;
}
.gift img{
height: 60px;
float: right;
margin-top: -61px;
padding-right: 20px;
}
.main{
width: 100%;
height: 100vh;
color: fff;
background: linear-gradient(-60deg, #FFC300, #FF8166, #0087FF, #F44FFF);
background-size: 400% 400%;
position: relative;
overflow: hidden;
animation: changebackground 35s ease-in-out infinite;
}
#keyframes changebackground {
0%{
background-position: 0 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0 50%;
}
}
<html>
<head>
<title> Moral & Ethical Issues Concerning the use of Computer Technology </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
<body>
<div class="main">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<div class="navigation-links">
<ul>
<li>general</li>
<li>pages</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="gift">
<img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png">
</div>
</div>
</body>
</html>
I try to make responsive part of this size with bootstrap grid. And always when I do resize of window, so there is made new gradient on right. I tried to find it in developer tools what it is, but there is nothing defined. I'm not sure but I have on more site with same design without bootstrap and there it looks nice when I resize window, but here with bootstrap it's bad. I am not sure if it's really bootstrap but looking for solution, because I really don't have idea.
Here is code and screen how it looks
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover, .overlay ul li a:focus, .overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<div class="mobile"><p class="mobile">Zmizni z mobilu na PC.</p></div>
<div class="title-deti"><h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 1</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
<div class="col-sm-6 col-md-4 col-lg-6"><p>Box 2</p></div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
</i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
**
You have several mistakes in your snippet.
First off, you're supposed to load bootstrap(.min).js after jQuery. You also need popper.js for v4.x.
Secondly, you should never have a .container inside another .container.
Third, you want to keep your .menu-deti from oversizing <body>, using:
.title-deti {
max-width: 100vw;
overflow: hidden;
}
See it fixed:
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
#import url("https://fonts.googleapis.com/css?family=Titan+One");
body {
background: linear-gradient(45deg, #7b00e0, #ff006a);
margin: 0;
height: auto;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100vh;
margin: 0 auto;
overflow: hidden;
}
.menu-container {
background-color: #E59617;
border-radius: 100%;
color: white;
cursor: pointer;
position: absolute;
width: 250px;
height: 250px;
left: -120px;
top: -120px;
transition: all 0.3s;
}
.menu-container.full-menu {
border-radius: 0;
padding: 0 !important;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all 0.3s;
}
.full-menu .menu {
top: 40px;
left: 40px;
}
.menu {
color: white;
font-size: 2em;
position: absolute;
top: 160px;
left: 160px;
z-index: 100;
transition: all 0.3s;
}
.menu i {
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.menu i:hover {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
font-size: 3.2em;
font-family: "Titan One", san-serif;
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: block;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: block;
position: relative;
color: #fff;
text-decoration: none;
overflow: hidden;
opacity: 0.7;
transform: scale(1);
transition: all 0.3s;
}
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {
opacity: 1;
transform: scale(1.2);
transition: all 0.3s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
h1.deti {
font-size: 5em;
font-family: "Titan One", san-serif;
background-color: rgba(255, 0, 106, 0.4);
border-radius: 100%;
box-shadow: 0 0 2em 1em rgba(255, 0, 106, 0.4);
color: white;
margin: 30vh auto;
position: relative;
text-align: center;
text-shadow: 0 8px 0 rgba(123, 0, 224, 0.4);
transform: rotate(-12deg);
width: 800px;
height: auto;
z-index: -1;
}
h1 span {
color: #ffc901;
}
.blob {
animation: blobby 4s infinite;
}
.blob2 {
animation: blobby2 6s infinite;
}
#keyframes blobby {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
#keyframes blobby2 {
0% {
transform: scale(1);
}
50% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
svg {
position: absolute;
top: 0;
}
#svg-right {
display: block;
fill: #7b00e0;
opacity: 0.5;
right: 0;
width: 60%;
z-index: -10;
}
#svg-left {
fill: #ff006a;
margin: 0;
width: 60%;
z-index: -10;
}
#media all and (max-width: 980px) {
h1.deti {
font-size: 3em;
font-family: "Titan One", san-serif;
}
}
#media all and (max-width: 480px) {
h1.deti {
font-size: 2em;
font-family: "Titan One", san-serif;
}
.overlay li {
font-size: 0.5em;
}
}
/*komix*/
p {
color: #fff;
}
.row {
display: flex;
height: 200px;
background-color: #7b00e0;
z-index: -99999;
}
h1 span {
color: #ffc901;
}
h1.mobile {
visibility: hidden;
}
.mobile {
display: none;
}
.title-deti {
max-width: 100vw;
overflow: hidden;
}
#media (max-width: 800px) {h1.deti{width: 100vw;}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kajberšikana</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="mobile">
<p class="mobile">Zmizni z mobilu na PC.</p>
</div>
<div class="title-deti">
<h1 class="deti"><span>Lorem</span><br />Ipsum</h1>
<div class="circle"></div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 1</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
<div class="col-sm-6 col-md-4 col-lg-6">
<p>Box 2</p>
</div>
</div>
</div>
<div class="container">
<div class="menu-container" id="toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
<div class="overlay" id="overlay">
<nav class="overlay-menu">
<ul>
<li>Domov</li>
<li>Pre deti</li>
<li>Pre dospelých</li>
<li>Kontakt</li>
</ul>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I am working on a responsive Nav menu for a website. I changed the header image into an image slider however now on the index.html page the nav menu is no longer aligned to the websites grid.
In the 'about', 'services' and contact pages the menu is positioned perfectly.
In the index.html page I have css code to position the navbar and logo position:absolute; but the rest of navs on the other page are position relative.
I want all the nav menus on each page to align the same so there is no obvious difference when the user changes pages. It may not be obvious on small screens but when you compare the index and about pages on a mobile device it is obvious the nav is not in the correct grid.
Can someone point me in the right direction?
Here is a link to the live site
http://shaneogrady.me/navtest/
HTML
<!DOCTYPE html>
<html>
<head>
<title> HELLO </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content=""><script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.11.1.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<link href="css/animate.css" rel="stylesheet" type="text/css" media="all">
<script src="js/wow.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
new WOW().init();
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
});
});
</script>
</head>
<body>
<div id="home" class="banner a-banner">
<div class="container" style=" position: relative; z-index: 5; top: 0%; left: 5%;">
<div class="head-logo">
<img src="images/logo.png" alt="" />
</div>
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1">
<li class="hvr-sweep-to-bottom">Contact<i><img src="images/nav-but5.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">Services<i><img src="images/nav-but3.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom">About<i><img src="images/nav-but2.png" alt=""/></i></li>
<li class="hvr-sweep-to-bottom active">Home<i><img src="images/nav-but1.png" alt=""/></i></li>
<div class="clearfix"></div>
</ul>
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {});
});
</script>
</div>
</div>
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Batman</h1>
<h3>Batman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-2">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Superman</h1>
<h3>Superman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="about.html" role="button">See More</a>
</div>
</div>
</div>
<div class="item slides">
<div class="slide-3">
<div class="overlay"></div>
</div>
<div class="hero">
<hgroup>
<h1>Spiderman</h1>
<h3>Spiderman</h3>
</hgroup>
<div class="see-button">
<a class="btn btn-primary btn-lg see-button hvr-shutter-out-horizontal" href="services.html" role="button">See More</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
background:#fff;
font-family: 'Open Sans', sans-serif;
}
body a {
transition: 0.5s all;
-webkit-transition: 0.5s all;
-o-transition: 0.5s all;
-moz-transition: 0.5s all;
-ms-transition: 0.5s all;
}
.banner{
background: url(../images/banner2.jpg) no-repeat 0px 0px #eeece9;
min-height: 855px;
background-size: cover;
position: relative;
}
.head-logo{
float: left;
}
.head-logo a {
display: block;
margin-top: 3.5em;
}
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li {
display: inline-block;
width: 20%;
margin-right: .4em;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
.top-nav ul li.active{
background: #5abc5e;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 3em 0em 3em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul li a:hover{
text-decoration:none;
}
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 6em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .3;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../images/banner2.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../images/squad.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../images/roadside.jpg);
}
/********************************/
/* Media Queries */
/********************************/
#media screen and (min-width: 980px){
.hero { width: 980px; }
}
#media screen and (max-width: 640px){
.hero h1 { font-size: 4em; }
}
/* Sweep To Bottom */
.hvr-sweep-to-bottom {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
-o-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-ms-osx-font-smoothing: grayscale;
-o-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-property: color;
-o-transition-property: color;
-moz-transition-property: color;
-ms-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-bottom:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #5abc5e;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 0;
-o-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transition-property: transform;
-o-transition-property: transform;
-moz-transition-property: transform;
-ms-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-bottom:hover, .hvr-sweep-to-bottom:focus, .hvr-sweep-to-bottom:active {
color: white;
}
.hvr-sweep-to-bottom:hover:before, .hvr-sweep-to-bottom:focus:before, .hvr-sweep-to-bottom:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
.banner-bottom-grids{
margin: 5em 0;
}
.banner-bottom-left{
padding: 0;
padding-left: 0 !important;
padding-right: 0 !important;
margin: 0;
}
.banner-bottom-left h3{
color: #000;
font-size: 37px;
margin: 0;
line-height: 1.2em;
font-weight: 300;
}
.banner-bottom-left h5{
color: #969696;
font-size: 14px;
margin: 1em 0;
line-height: 1.8em;
}
.banner-bottom-left h5 span{
display:block;
}
.banner-bottom-left p{
color: #333333;
font-size: 14px;
margin: 0;
line-height: 1.8em;
font-weight: 600;
}
.banner-bottom-right img{
width:100%;
}
.see-button{
margin-top: 1em;
}
.see-button a{
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 1em 4em;
outline: none;
background: #393939;
border: none !important;
border-radius:0;
}
.jumbotron.banner-bottom-left {
background: none;
}
/*------------------ Slider Part starts Here----------*/
#slider2,
#slider3 {
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
margin: 0 auto;
}
.rslides_tabs {
list-style: none;
padding: 0;
background: rgba(0,0,0,.25);
box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);
font-size: 18px;
list-style: none;
margin: 0 auto 50px;
max-width: 540px;
padding: 10px 0;
text-align: center;
width: 100%;
}
.rslides_tabs li {
display: inline;
float: none;
margin-right: 1px;
}
.rslides_tabs a {
width: auto;
line-height: 20px;
padding: 9px 20px;
height: auto;
background: transparent;
display: inline;
}
.rslides_tabs li:first-child {
margin-left: 0;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.events {
list-style: none;
}
.callbacks_container {
position: relative;
float: left;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.callbacks img {
position: relative;
z-index: 1;
height: auto;
border: 0;
}
.callbacks .caption {
display: block;
position: absolute;
z-index: 2;
font-size: 20px;
text-shadow: none;
color: #fff;
left: 0;
right: 0;
padding: 10px 20px;
margin: 0;
max-width: none;
top: 10%;
text-align: center;
}
.callbacks_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 52%;
left: 0;
opacity: 0.7;
z-index: 3;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 55px;
background: transparent url("../images/themes.png") no-repeat left top;
margin-top: -65px;
}
.callbacks_nav:active {
opacity: 1.0;
}
.callbacks_nav.next {
left: auto;
background-position: right top;
right: 0;
}
#slider3-pager a {
display: inline-block;
}
#slider3-pager span{
float: left;
}
#slider3-pager span{
width:100px;
height:15px;
background:#fff;
display:inline-block;
border-radius:30em;
opacity:0.6;
}
#slider3-pager .rslides_here a {
background: #FFF;
border-radius:30em;
opacity:1;
}
#slider3-pager a {
padding: 0;
}
#slider3-pager li{
display:inline-block;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.rslides img {
height: auto;
border: 0;
width:100%;
}
.callbacks_tabs{
list-style: none;
position: absolute;
top: 78%;
z-index: 999;
left: 45%;
padding: 0;
margin: 0;
}
.slider-top{
text-align: center;
padding:10em 0;
}
.slider-top h1{
font-weight:700;
font-size:48px;
color:#010101;
}
.slider-top p{
font-weight:400;
font-size:20px;
padding:1em 7em;
color:#010101;
}
.slider-top ul.social-slide{
display:inline-flex;
margin: 0px;
padding: 0px;
}
You might want to try rebuilding your css from scratch instruction by instruction and see what is changing something. If a change doesn't apply, try adding !important at the end (like so :{ width : 30% !important;}), sometimes Bootstrap is a bit possessive.
Maybe throwing a position : absolute ; right :0; top:0; in the .top-nav and building from there would help do the trick.
An element with position: absolute is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed)
position: absolute allows an element to be positioned with respect
to a containing block using left, right, top or bottom (the containing
block is the nearest ancestor node with a position of relative,
absolute or fixed).
To fix it just add left: 0 and right: 0 to .container this will make the div stretch to document width.
Here a minimal snippet example to illustrate (without using left, right):
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Now with left: 0, right: 0
div.relative {
position: relative;
height: 200px;
border: 3px solid #8AC007;
}
div.absolute {
position: absolute;
height: 100px;
border: 3px solid blue;
display: block;
left: 0;
right: 0;
}
<div class="relative">This
<div>element has position: relative;
<div class="absolute">This
<div>element has position: absolute;</div>
</div>
Check this out to full information
This is what I am trying to code. I am having trouble with positioning elements on the page. To get an idea of where some of what I gave created in the HTML is, I am trying to put a border around a div. This div (id="container") in the end will actually need a border. However, I cannot get one to show up at all.
Here is my full HTML
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<meta charset="UTF-8">
<title>The Pantry</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li>HOME</li>
<li>MENU</li>
<li id="logo"><img src="Images/pantry logo.png" width="536" height="348"/></li>
<li>CONTACT</li>
<li id="last">ABOUT</li>
</ul>
</div>
</div><!--end header-->
<div id="container">
<div id="slider">
<figure>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
<img src="Images/G-lasagne-al-forno.jpg" width="600" height="400" alt="Lasagne al Forno"/>
<img src="Images/5357829-svickova.jpg" width="600" height="400" alt="Svickova"/>
<img src="Images/pork shoulder.jpg" width="600" height="400" alt="Pork Shoulder with Dumplings"/>
<img src="Images/hungarian-goulash_10-20-13_1_ca.jpg" width="600" height="400" alt="Hungarian Sausage Goulash"/>
</figure>
</div><!--end slider-->
<div id="menu ad">
</div><!--end menu ad-->
<div id="hours">
</div><!--end hours-->
</div><!--end container-->
<footer>
</footer>
And my CSS
#charset "UTF-8";
body {
background: #f8f8f1;
line-height: 1.5;
}
/*header*/
.header {
width: 960px;
height: 200px;
margin: 0 auto;
text-align: center;
position: relative;
padding: 100px 0px 0px 0px;
}
div ul li {
display: inline-block;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 18px;
color: #4f4d4b;
text-decoration: none;
list-style: none;
vertical-align: middle;
}
.nav ul li {
margin-right: 70px
}
.nav ul li:nth-child(5) {
margin: 0;
}
div ul li a {
list-style: none;
text-decoration: none;
color: #4f4d4b;
}
.nav ul li a:visited {
text-decoration: none;
color: #4f4d4b;
}
#logo a img {
width: 250px;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#logo {
width: 250px;
position: relative;
}
/*End Header*/
/*Container*/
div.container {
margin: auto 0;
position: relative;
width: 960px;
heigth: 438px;
border: 10px solid red;
}
/*slider*/
#-webkit-keyframes slidy {
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider { position: relative; overflow: hidden; width: 80%; max-width: 600px; height: auto; max-height: 400px;
margin: 0 auto}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
font-size: 0;
animation: 20s slidy infinite;
margin: 0; top: 0; left: 0;
-webkit-animation: 20s slidy ease-in-out infinite;
animation: 20s slidy ease-in-out infinite;
}
Please visit the site here to see what is happening.
Thanks for your help.
Your selector:
div.container
Should be:
div#container