I have a navbar at the top of my page with an image logo and some hyperlinks. I want to make it so the image is always the max height it can be while staying within the foot print of the navbar. Here's what I mean:
As you can see, the image in the top left has 10px padding, but the image is slightly too small and has a larger gap at the bottom.
This is my code:
HTML:
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<img src="./images/logo.png" title="Aeron" alt="logo" class="header-logo">
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.header-logo {
margin: 10px;
float: left;
height: 72px;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
How can I make it so no matter what screen size is, the image is always as big as it can be without influening the navbar height?
Basically by making it position:absolute inside the position:relative header, you can control where it begins top:0 and where it'll end bottom:0.
Update:
We will wrap the image inside a container. That container will take 100% of the height by using absolute position with top and bottom equals 0. It will have a padding of the desired 10px, where as inside of it the image will reside having a height of 100%.
:root {
color-scheme: dark;
}
html {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
height: 100%;
}
body {
margin: 0;
background: linear-gradient(45deg, #280036 0%, #000836 100%);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
.heading {
margin: 20px;
font-size: 2.5vw;
text-align: center;
color: #ffffff;
}
p {
color: #ffffff;
font-size: 20px;
}
a {
text-decoration: none;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 0%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 50px;
right: 50px;
z-index: 99;
border: none;
background-color: #3a3a3a;
cursor: pointer;
border-radius: 100px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #2a2a2a;
}
.progress-container {
padding: 10px;
}
.headar-logo-container {
position: absolute;
left: 0;
top: 0;
bottom: 0;
padding: 10px;
}
.header-logo {
height: 100%;
}
.header {
background-color: #000000;
overflow: hidden;
width: 100%;
position: relative;
}
.desktop-nav-links {
float: right;
margin-right: 1.5vw;
}
.desktop-nav-links a {
margin: 1.5vw;
display: block;
color: white;
font-size: 1vw;
}
.desktop-nav-links a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav-links li {
float: left;
list-style: none;
}
.menu-button {
display: none;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #000000;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
margin: auto 10px auto 10px;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.mobile-nav {
display: none;
}
.footer-logo {
width: 160px;
}
.table-container {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
background-color: white;
color: black;
border: 2px solid black;
}
td,
th {
border: 1px solid black;
padding: 10px 20px;
}
th {
font-size: 20px;
}
td {
font-size: 15px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.output {
display: grid;
grid-template-columns: auto;
justify-content: center;
border-radius: 10px;
}
.total1 {
border: none;
}
.pc-border-title {
text-align: center;
}
.intro-heading {
font-size: 25px;
text-align: center;
color: #ffffff;
}
.pcbuilder-link {
color: #cecece;
}
.pcbuilder-link:hover {
color: #adadad;
}
.table-heading {
font-size: 50px;
text-align: center;
color: #000000;
margin-bottom: 10px;
margin-top: 0px;
border: 2px solid #000000;
}
#photo {
padding: 10px;
background-color: #ffffff;
border-radius: 10px;
}
.scrn_button {
font-size: 30px;
background-color: #bfbfbf;
border: 2px solid black;
border-radius: 10px;
color: black;
}
.scrn_button:hover {
cursor: pointer;
background-color: #9b9b9b;
}
.scrn_button:active {
background-color: #797979;
}
.contact-form {
border-radius: 10px;
background-color: #ffffff;
color: #000000;
padding: 10px;
width: auto;
}
.input {
width: 100%;
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
font-size: 18px;
}
.contact-form-container {
margin: 10px 300px;
}
.submit-button-container {
text-align: center;
}
.submit-button {
font-size: 25px;
border-radius: 10px;
border: none;
background-color: #818181;
user-select: none;
}
.submit-button:active {
background-color: #414141;
transition: ease 0.1s;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.price::before {
content: "\00a3";
}
#msg {
background-color: #bfbfbf;
border: none;
color: black;
border-radius: 10px 0px 10px 0px;
padding: 5px;
resize: none;
width: 100%;
font-size: 15px;
}
.submit-button:hover::after {
content: ' >';
}
.upload-label {
background-color: #0030b0;
color: white;
padding: 10px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
border: none;
user-select: none;
}
.upload {
margin: 10px;
text-align: center;
}
#output {
width: 100%;
text-align: center;
padding: 10px;
}
.portfolio-intro {
font-size: 30px;
}
.content {
margin: 10px;
}
.professional:hover:before {
content: 'un-';
font-weight: bolder;
}
.learn-more {
color: #ffd000;
font-size: 20px;
}
.learn-more:hover {
color: #dab200;
transition: all ease 0.3s;
}
.learn-more:active {
color: #bb9900;
transition: all 0s;
}
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<title>Home | Aeron</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" media="screen and (min-width: 1294px)" href="main.css">
<link rel="stylesheet" media="screen and (max-width: 1294px)" href="mobile.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="header">
<div class="headar-logo-container">
<img src="https://picsum.photos/30/20" title="Aeron" alt="logo" class="header-logo">
</div>
<div class="desktop-nav">
<ul class="desktop-nav-links">
<li>Home</li>
<li>Portfolio</li>
<li>Contact me</li>
<li>About me</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
<div class="mobile-nav">
<span class="menu-button" onclick="openNav()">☰</span>
<div id="mobile-nav-panel" class="mobile-nav-panel">
+
<ul class="mobile-nav-link-list">
<li class="mobile-nav-link">Home</li>
<hr>
<li class="mobile-nav-link">Portfolio</li>
<hr>
<li class="mobile-nav-link">Contact me</li>
<hr>
<li class="mobile-nav-link">About me</li>
<hr>
<li class="mobile-nav-link">Recipes</li>
<hr>
<li class="mobile-nav-link">Progress</li>
<hr>
<li class="mobile-nav-link">PC Setup Designer</li>
<hr>
<li class="mobile-nav-link">Gallery</li>
<hr>
<li class="mobile-nav-link"></li>
</ul>
</div>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div class="content">
</div>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron</p>
<div class="footer-links">
About me
<p>|</p>
Policy
<p>|</p>
<a href=contact.html>Contact me</a>
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top"><img src="./images/arrow_upward.svg" width="30px" alt="Return"></button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mobile-nav-panel").style.width = "100%";
}
function closeNav() {
document.getElementById("mobile-nav-panel").style.width = "0";
}
</script>
</body>
</html>
I have a horizontal navbar at the top of the screen and a vertical one in a side bar. How can I make the list elements lineup below eachother like this:
This is what I get using my code:
This is my code (the snippet sort of works but it should suffice and get the point across):
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.aside-1 {
float: right;
margin-right: 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
color: white;
}
.mobile-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.mobile-nav li {
float: right;
list-style: none;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
<br>
<ul class="mobile-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
How can I do this? Thanks very much.
You could just remove the float: right and add text-align: right to the .mobile-nav li selector like so:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500&display=swap');
* {
box-sizing: border-box;
scroll-behavior: smooth;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient( to right,#ff0000,#0000ff);
margin: 0;
}
p {
color:#ffffff;
font-size:20px;
padding: 10px;
}
.heading {
margin: 20px;
font-size: 50px;
text-align: center;
color: black;
}
a {
text-decoration: none;
}
.favcolorcontainer {
border: 2px solid black;
border-radius: 4px;
width: auto;
padding: 5px;
background: white;
display: inline-flex;
}
.colorpicker {
border:none;
background: white;
display: inline-flex;
}
.favcolor {
font-family: verdana;
margin-top: 3px;
}
.slideshow-container {
display: block;
width: 80%;
position: relative;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
.mySlides {
display: none;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #a6a6a650;
}
.slide-name {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.slide-number {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.progress-bar {
width: 100%;
border: none;
border-radius: 100px;
background-color: #FFFFFF;
padding: 3px;
}
.progress-tag {
color: #DDDDDD;
margin-left: 10px;
}
.fill-html {
width: 75%;
background-color: #FA3200;
border-radius: 100px;
}
.fill-css {
width: 60%;
background-color: #0000C8;
border-radius: 100px;
}
.fill-js {
width: 10%;
background-color: #C80000;
border-radius: 100px;
}
.fill-php {
width: 3%;
background-color: #00C832;
border-radius: 100px;
}
.fill-rwpd {
width: 100%;
background-color: #450099;
border-radius: 100px;
}
#return {
display: none;
position: fixed;
bottom: 30px;
right: 35px;
z-index: 99;
border: none;
outline: none;
background-color: #0000d1;
color: white;
cursor: pointer;
border-radius: 100px;
font-size: 45px;
width: 60px;
height: 60px;
}
#return:hover {
background-color: #0101bb;
}
.progress-container {
padding: 10px;
}
.header-logo {
margin: 10px;
float: left;
}
.header {
background-color: #303030;
overflow: hidden;
width: 100%;
}
.desktop-nav {
float: right;
margin-right: 20px;
}
.desktop-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
display: block;
color: white;
}
.desktop-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.desktop-nav li {
float: left;
list-style: none;
}
.menu-button {
display: block;
margin: 15px;
font-size:25px;
cursor:pointer;
color:white
}
.menu-button:hover {
cursor: pointer;
}
.copyright {
color: #b4b4b4;
font-size: 15px;
}
footer {
background: #303030;
padding: 25px 0;
text-align: center;
bottom: 0;
width: 100%;
height: auto;
display: block;
}
.hyperlink {
display: inline-block;
position: relative;
color: #b4b4b4;
}
.hyperlink:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 15px;
left: 0;
background-color: #b4b4b4;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hyperlink:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
.recipe-container {
margin: 0px;
padding: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: center;
}
.recipe-window {
margin: 10px;
padding: 10px;
border: 1px solid #ffffff;
background-color: #ffffff;
word-break: break-word;
width: min-content;
border-radius: 10px;
}
.recipe-title {
color: black;
margin-top: 5px;
padding: 0px;
font-size: 25px;
}
:root {
color-scheme: dark;
}
.footer-links {
display: flex;
justify-content: center;
align-items: center;
}
.footer-links p {
margin: 0;
}
.footer-links a {
color: #ffffff;
}
.footer-links a:hover {
color: #b4b4b4;
}
.about {
text-align: center;
padding: 0 300px;
}
.aside-1 {
float: right;
margin-right: 300px;
}
.mobile-nav {
float: right;
margin-right: 20px;
}
.mobile-nav a {
margin: 20px 30px 0 30px;
padding: 0 0 20px;
color: white;
}
.mobile-nav a:hover {
color: #b4b4b4;
transition: 0.2s all ease;
}
.mobile-nav li {
list-style: none;
text-align: right;
}
<html>
<head>
<title>Home</title>
<link rel="icon" type="image/x-icon" href="./images/favicon.png">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
</head>
<body>
<div class="header">
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="header-logo">
<ul class="desktop-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
<li><span class="menu-button" onclick="openNav()">☰</span></li>
</ul>
<div id="mySidenav" class="sidenav">
×
<br>
<ul class="mobile-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
<li>About Us</li>
<li>Recipes</li>
<li>Progress</li>
<li>PC Setup Designer</li>
<li>Gallery</li>
</ul>
</div>
</div>
<h1 class="heading">Welcome to Aeron</h1>
<div style="height:100%"></div>
<footer>
<img src="./images/logo.png" width="150px" title="Aeron" alt="logo" class="footer-logo">
<p class="copyright">Copyright © 2022 Aeron Corporation</p>
<div class="footer-links">
About Us
<p>|</p>
Policy
<p>|</p>
Contact Us
</div>
</footer>
<button onclick="topFunction()" id="return" title="Return To Top">^</button>
<script>
let mybutton = document.getElementById("return");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
}
function openNav() {
document.getElementById("mySidenav").style.width = "25%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
</body>
</html>
PROBLEM: I am having problems in my bootstrap imports that seems to be affecting my link logo and social icon border. If i remove the link for the bootstrap, the logo and icon borders will work fine. However, I need the bootstrap tag for the gallery. Can someone help me fix this?
this is the code with errors
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
This is the source of error (Specifically the code above) :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
This is my current output with the link for the bootstrap enabled.You could see that the logo and social box is not properly placed.
This is what it looks like when i commented the bootstrap link. You can see that the logo and social border works fine, but the gallery does not.
Is there anyway for me to fix both?
HERE IS THE HTML CODE
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" >
</head>
<body>
<a name="home">
<!--- Start Navigation -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/main.js"></script> <!--- For Navigation -->
<!---ADD NAVIGATION HERE-->
<div class="logo">
<img src="images/seafoodLogo.png">
</div>
<div class="nav-outer">
<div class="nav-wrap">
<nav class="navigation">
<div class='nav' nav-menu-style="yoga">
<ul class="nav-menu">
<li> EXPLORE</li>
<li> MENU</li>
<li> GALLERY</li>
<li> RESERVATION</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="nav-clear"></div>
<!--- End Navigation -->
<div class="clearfix"></div>
<!-- Start of Content -->
<h1> Check out some of our Suggested Paluto!</h1>
<section class="paluto">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs1.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab</h3>
<p>Considered as one of our year-round staples, our bright and bold #ChiliCrab packs a lot of flavor and heat! If you prefer to have it mildly spiced, our kitchen team is flexible with all types and tastes and preference.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs2.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Grilled Crab</h3>
<p>Our take on #GrilledCrab is deliciously simple and oozing with smoky flavor. Plus it's meaty and guaranteed fresh! Contact us on our Facebook fan page for booking and inquiries.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="box-paluto">
<div class="imgBox-paluto">
<img src="images/menu/crabs3.jpg" class="img-responsive">
</div>
<div class="content-paluto">
<h3>Sweet Chili Crab with Black Pepper</h3>
<p>Thankfully, crabs are always at full swing and piled high in our #seafoodrestaurant! Roll up your sleeves and get ready to indulge our #chilicrab that's deliciously drenched with garlic and herbs. We're open 'til 10:30 pm so it's never too late to satisfy your cravings for crustaceans!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Content -->
<div class="clearfix"></div>
<footer>
<center>
</center>
<p> © 2018 SABREEN'S SEAFOOD MARKET & RESTAURANT ALL RIGHTS RESERVED</p>
</footer>
</body>
HERE IS THE CSS CODE FOR MY NAV.CSS AND STYLES.CSS
/*styles.css*/
/*---Body Font--*/
#import url(https://fonts.googleapis.com/css?family=Hindi);
/*---Heading Font--*/
#import url(https://fonts.googleapis.com/css?family=Nobile);
/*---Social Font--*/
#import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);
/*---Menu Gallery Font--*/
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
* {
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #fffdf9;
font-family: 'Times New Roman', Times, serif;
font-size: 18px;
position: relative;
}
h1 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 175%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h2 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
font-size: 150%;
color: #494949;
text-transform: uppercase;
letter-spacing: 3px;
padding: 3% 0;
}
h3 {
font-family: 'Times New Roman', Times, serif;
text-align: center;
color: #494949;
text-transform: uppercase;
letter-spacing: 1%;
}
p {
padding: 2%;
color: #4A4444;
text-align: justify;
font-size: 125%;
}
img {
max-width: 100%;
max-height: auto;
}
#banner-wrapper {
max-width: 1280px;
margin: 0 auto;
}
/*---Start Image Slider Style--*/
.slider {
width: 100%;
}
.slider1 img {
min-width: 100%;
}
.slider .bx-wrapper .bx-controls-direction a {
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
z-index: -1;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
z-index: 5;
}
.slider .bx-wrapper .bx-prev {
background: #000 url("img/left-arrow-white.png") no-repeat 8px 13px;
left: 0;
opacity: 0.3;
}
.slider .bx-wrapper .bx-prev:hover {
opacity: 0.6;
}
.slider .bx-wrapper .bx-next {
background: #000 url("img/right-arrow-white.png") no-repeat 10px 12px;
right: 0px;
opacity: 0.3;
}
.slider .bx-wrapper .bx-next:hover {
opacity: 0.6;
}
/*---End Image Slider Style--*/
.reservation {
margin-top: 25px;
}
.reservation p {
width: 70%;
text-align: center;
}
.one-half {
width: 44%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.one-third {
width: 28%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
}
.left-col {
width: 60%;
float: left;
margin: 4% 0 4% 4%;
}
.sidebar {
width: 26%;
float: right;
margin: 4% 4%;
}
.sidebar img {
opacity: 1;
}
.clearfix {
clear: both;
}
/*---Start Parallax Section--*/
.parallax-1 {
background: url("../images/parallaxBG.jpg") fixed 100%;
text-align: center;
max-height: 300px
}
.parallax-inner {
padding-top: 90px;
padding-bottom: 300px;
}
.parallax-2 {
background: url("https://www.w3newbie.com/wp-content/uploads/black-pattern.jpg") repeat fixed 100%;
text-align: center;
}
.parallax-inner h3, .parallax-inner p{
color: #F1F1F1;
}
/*---End Parallax Section--*/
/*Start of Menu Gallery Section*/
section.paluto {
padding: 50px 0 0 ;
}
.box-paluto {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
background: #000;
box-shadow: 0 5px 15px rgba(0,0,0,.5);
transition: .5s;
}
.box-paluto:hover {
transform: translateY(-30px);
}
.box-paluto .imgBox-paluto {
position: relative;
}
.box-paluto .imgBox-paluto img {
transition: .5s;
width: 100%;
}
.box-paluto:hover .imgBox-paluto img {
opacity: .5;
transform: translateY(-20px);
}
.box-paluto .content-paluto{
position: absolute;
bottom: -30px;
left: 0;
padding: 20px;
box-sizing; border-box;
transition: .5s;
opacity: 0;
}
.box-paluto:hover .content-paluto{
opacity: 1;
bottom: 0;
}
.box-paluto .content-paluto h3{
font-size: 28px;
color: #fff;
font-weight: 700;
}
.box-paluto .content-paluto p{
font-size: 15px;
color: #fff;
font-weight: 400;
}
#media only screen and (max-width: 700px){
.box-paluto{
height: auto;
max-width: 100%;
margin: 6px 0;
}
}
#media only screen and (max-width: 500px){
.box-paluto{
max-height: 300px;
max-width: 300px;
margin: 15px 0;
}
}
/*End of Menu Gallery Section*/
/*Start of Social*/
.fa {
padding: 5px;
margin: 2px;
font-size: 15px;
width: 15px;
height: 15px;
border-radius: 25%;
text-align: center;
justify-content: center;
text-decoration: none;
border: 4px solid #d3d3d3;
transition: all 0.5s;
background: #fff;
}
.fa:hover {
-webkit-animation: expand 0.5s ease-in-out;
-moz-animation: expand 0.5s ease-in-out;
animation: expand 0.5s ease-in-out;
color: #fff;
}
#keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-webkit-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
#-moz-keyframes expand {
33% { transform: scale(1.1); }
66% { transform: scale(0.9); }
100% { transform: scale(1.0); }
}
.fa-facebook {
color: #3B5998;
}
.fa-facebook:hover {
background: #3B5998;
}
/*End of Social*/
/*---Start Footer--*/
footer {
background: #fffdf9;
opacity: 0.9;
width: 100%;
/*margin-top: 5%;*/
padding: 1% 0;
overflow: auto;
}
footer p{
color: #fff;
text-align: center;
font-size: 12px;
background-image: linear-gradient(to left, #d0d5de, #001947 40%, #001947 60%, #d0d5de 100%);
padding: 7px 0;
}
iframe {
width: 60%;
height: 400px;
}
/*---Start Media Queries--*/
#media screen and (max-width: 768px) {
.slider .bx-wrapper .bx-controls {
display: none;
}
.parallax-inner {
display: none;
}
.one-third {
width: 100%;
margin: 4% 0;
}
.one-half {
display: none;
}
h1 {
font-size: 125%;
}
.left-col {
width: 100%;
margin: 0 0 3% 0;
}
.sidebar {
width: 100%;
margin: 0;
}
.sidebar img {
max-width: 75%;
height: auto;
}
h3 {
padding-top: 3%;
}
.social-container {
display: block;
}
footer{
margin-top: 15px;
}
.reservation p {
margin-top: 155px;
width: 80%;
}
iframe {
width: 80%;
height: 400px;
}
}
/*nav.css*/
#import url(https://fonts.googleapis.com/css?family=Questrial);
/*--- Nav Font --*/
/*--- Start Navigation Style --*/
.nav-outer {
width: 100%;
height: 67px;
background: #fffdf9;
position: fixed !important;
z-index: 1;
}
.nav-wrap {
max-width: 100%;
margin: 0 auto;
}
nav {
margin-top: 0;
background: #fffdf9;
font-family: 'Times New Roman', Times, serif;
}
.nav ul {
overflow:hidden;
list-style:none;
}
.nav-button:hover {
cursor:pointer;
}
.navigation {
clear: both;
width: 100%;
position: relative;
}
.nav a {
color: #494949;
text-transform: uppercase;
text-decoration:none;
}
body .nav .nav-menu li a {
display:inline-block;
margin-top: 10px;
padding:15px 20px;
color: #494949;
font-size: 19px;
}
.nav.yoga .nav-menu li.active a {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-menu li a:hover {
color: #494949;
text-decoration: underline;
}
.nav.yoga .nav-toggled {
min-height:36px;
border-radius:6px;
margin-top: -7px;
}
.nav.yoga .nav-toggled-controls {
display:block;
height:40px;
text-align:left;
position:relative;
}
.nav.yoga .nav-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
}
.nav.yoga .nav-button {
display:block;
position:absolute;
right:15px;
top:8px;
background: #0a0c42;
}
.nav.yoga .nav-button span {
display:block;
margin-top:4px;
height:2px;
background: #0a0c42;
width:24px;
}
.nav-toggled-controls{
border-bottom: 0px solid #0a0c42;
}
.nav.yoga .nav-toggled ul li a {
display:block;
width:100%;
background-color: #505E67;
text-align:left;
padding:10px 0px 10px 15px;
border-bottom:1px solid #FFF;
text-align: center;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.nav.yoga .nav-toggled ul li ul a {
font-size: 15px;
text-transform: none;
}
.nav.yoga .nav-toggled ul li.active a {
background-color: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li a:hover {
background: #F5F5F5;
color: #505E67;
}
.nav.yoga .nav-toggled ul li {
position: relative;
}
.toggle-sm:after {
position: absolute;
right: 15px;
top: 10px;
font-size: 18px;
line-height: 25px;
}
.toggle-sm:after {
content: '+';
cursor: pointer;
}
.toggle-sm.open:after {
content: '-';
cursor: pointer;
}
.nav .nav-menu {
text-align: center;
overflow: visible;
min-height: 56px;
padding-left: 0;
margin: 0;
}
#media (min-width: 823px) {
.nav {
float: right;
}
.logo {
float: left;
}
}
#media screen and (max-width: 822px) {
body .nav .nav-menu li a {
margin-top: 4px;
}
.logo img {
max-width: 135px !important;
margin-bottom: 3px;
}
.nav-outer {
height: 21px;
}
.nav.yoga .nav-toggled-controls {
top: -40px;
margin-bottom: -36px;
}
.nav-clear {
padding-top: 37px;
margin-bottom: -15px;
}
}
.logo img {
max-height: 100px;
height: auto;
margin-left: 30px;
margin-bottom: 5px;
background-color: #002859;
z-index: 2;
position: absolute;
padding: 70px 10px 50px 10px;
background-image: linear-gradient(#253688, #060729);
}
.navigation:after {
content: "";
display: table;
clear: both;
}
.nav .nav-menu li {
display:inline-block;
padding:0px;
margin:0px !important;
position: relative;
}
.nav-button:hover {
cursor:pointer;
}
.nav .nav-toggled ul {
display:none;
margin:0px ;
padding:0px ;
position: relative;
}
.nav .nav-menu > li > ul {
position: absolute;
z-index: 10000000000;
top: 50px;
text-align: left;
background: #505E67;
width: 100%;
padding-left: 0;
display: none;
}
.nav.yoga .nav-menu > li > ul a {
padding: 11px 15px;
font-size: 18px;
font-weight: normal;
text-transform: none;
}
.nav .nav-menu > li > ul li {
position: relative;
width: 100%;
text-align: center;
}
.nav .nav-menu > li > ul > li ul {
position: absolute;
right: -100%;
top: 0;
width: 100%;
padding-left: 0;
background: #505E67;
}
.nav .nav-menu > li > ul > li ul a {
white-space: nowrap;
}
.nav ul {
overflow: visible;
}
.has-children {
position: relative;
}
.has-children:after {
content: '+';
color: #FFF;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
cursor: pointer;
}
.has-children:hover:after {
content: '-';
color: #FFF;
cursor: pointer;
}
body .nav .nav-menu li a {
padding: 15px 30px;
}
.clicker {
width: 45px;
height: 45px;
position: absolute;
right: 0;
z-index: 30000;
}
.nav-clear {
clear: both;
padding-top: 67px;
}
/*--- End Navigation Style --*/
/*--------------------MEDIA!!!---------------*/
#media screen and (max-width: 768px) {
#banner-wrapper {
position: relative;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
.nav-menu {
display: none;
}
}
add your bootstrap css at the top
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sabreen's Seafood Market & Restaurant</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
rel="stylesheet" >
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/seafood-favicon.png"/>
</head>
As you have not posted the full code here , I can suggest you to do this
List out all the properties that are overlapping when you add the external CSS File.
for suppose i have a <div class="firstDiv" id="firstDivId"></div>
1.Overwrite the properties which are affecting using !important property.
In file1 i have
.firstDiv{
width:33%;
}
which is overridden by bootstrap css
.firstDiv{
width:100%;
}
In file1 you update the property using !important
.firstDiv{
width:33%!important;
}
2.download the css file , attach to your project then update the bootstrap.css file with :not selector
In bootstrap.css property should be like
.firstDiv:not('#firstDivId'){
width:33%;
}
Hope this may help you.
I can't get an element to go where I want it to. I am only having this problem because of the way I did my header. I applied position: absolute. You can see an example here: http://jacobgasser.com and you can find all the code on there, or you can read down a little farther and I put it there.
I want the text in the top left of the page to be on the white part of the page
Here is the index.html
<body onload="loadUp();">
<div class="menu">
<a href="https://github.com/jacobgasser" target="_blank"><div
class="menuItem">Projects</div></a>
</div>
<div class="titleBG">
<h1 class="title" onmouseover="coolThing();"onmouseout="notCoolThing();">Jacob Gasser</h1>
</div>
<div class="article">
<div class="articleHead">Who am I?</div>
</div>
<script src="scripts/main.js"></script>
</body>
Here is main.css
body {
margin:0;
padding:0;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
}
a {
text-decoration: none;
color: inherit;
}
.article {
font-family: "Arial";
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
text-align: center;
position: relative;
}
.articleHead {
display: inline-block;
padding: 5px 10px 5px 10px;
margin: 5px 10px 5px 10px;
}
.menu {
display: block;
color: white;
float: right;
margin-right: 10px;
margin-top: 5px;
opacity: 0;
}
.menuItem {
font-size: 400%;
display: block;
padding-left: 20px;
padding-right: 20px;
-webkit-transition: 0.2s;
border-radius: 5px;
}
.menuItem:hover {
background-color: white;
color: black;
cursor: pointer;
-webkit-transition: 0.2s;
}
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
position: fixed;
top: 0;
}
::selection {
color: #23272A;
background-color: white;
}
::-moz-selection {
color: #23272A;
background-color: white;
}
#font-face {
font-family: lemon;
src: url("fonts/LemonMilk.otf");
}
#font-face {
font-family: cavs;
src: url("fonts/CaviarDreams.ttf");
}
A simple solution to this issue is to remove the position: fixed; top: 0; and adjust the margin-top and margin-bottom of the page. Just change the CSS for .titleBG and .title to be the following:
.titleBG {
background-color: #23272A;
display: block;
width: 100%;
z-index: -1;
}
.title {
color: white;
text-align: center;
font-size: 1000%;
opacity: 0;
-webkit-transition: 0.2s;
margin: 0 /* You can add a margin-left or margin-right if you want, or even margin-bottom, just keep the margin-top at 0*/;
}
This will give you the following result:
Probably pretty basic question but I'm having issues with it. I'm using bootstrap design for website that I'm making. By default, website didn't have any image sliders.
After adding in img slider, it appears that my navigation bar is always above it and never over the slider, which I don't like. Here's example:
This is how it looks at the moment when you load up the page
And this is how I want it to look when you load the page (note that It works fine when i scroll down a bit)
So basicly my navigation works just fine, It's just not on top of the slider.
I'll include whole .css file that has everything, I linked an image to the slider and created navbar that sits on top (Opacity is 0.7).
I just want to make it sit on top of the slider at start and continue being on top of everything as I scroll (Note scrolling will not work in snippet). It works fine when scrolling just start position is what I'm having problems with.
Also don't worry about the blue stuff over the image in slider. It's WIP.
.slider {
box-shadow: 0px 4px 10px #9d9d9d;
padding: 0;
margin: 0;
max-width: 100%;
max-height: 600px;
margin: 0 auto;
overflow: hidden;
border-radius: 4px;
}
.slider ul {
width: 1000%;
height: 600px;
position: relative;
list-style: none;
left: 0;
margin: 0;
padding: 0;
line-height: 0;
-moz-animation:slide-animation 5s infinite;
-webkit-animation:slide-animation 25s infinite;
}
.slider li {
width: 10%;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
border-radius: 4px;
}
span.desc1 {
position: absolute;
height: 240px;
width: 600px;
display: block;
font-size: 50px;
bottom: 250px;
left: 800px;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.7);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
span.desc2 {
position: absolute;
height: 80px;
width: 300px;
display: block;
font-size: 0.8em;
bottom: 0;
padding: 0.5px 20px 0px 20px;
margin-top: -450px;
overflow: hidden;
background-color:rgba(47, 118, 171, 0.6);
color: #fcfcfc;
font-family: "Roboto", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 1px #9d9d9d;
font-weight: normal;
border-radius: 4px;
z-index:2;
}
p.desc{
color: #FFF;
}
#-webkit-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
#-moz-keyframes slide-animation {
1% {left: 0%; opacity: 1;}
18% {left: 0%; opacity: 1}
19% {opacity: 0.2;}
20% {left: -100%; opacity: 1;}
58% {left: -100%; opacity: 1;}
59% {opacity: 0.2;}
60% {left: -200%; opacity: 1;}
98% {left: -200%; opacity: 1;}
99% {opacity: 0.5;}
100% {left: 0%;}
}
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
p {
line-height: 1.55;
color: #333;
font-size: 400;
font-family: "Raleway", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 62px;
}
h2 {
font-size: 30px;
margin-bottom: 65px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
/* ==================================================
General
================================================== */
a {
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
/* ==================================================
Elements
================================================== */
.btn {
background-color: #2f76ab;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 800;
color: #fff;
padding: 15px 45px;
border-radius: 50px;
}
.btn:hover {
background-color: #E04F00;
color: #fff;
}
.btn:focus {
color: #fff;
}
.btn-ghost {
border: 3px solid #fff;
background-color: transparent;
}
.btn-ghost:hover {
background-color: #fff;
color: #2f76ab;
}
section {
padding: 85px 0;
}
.card {
position: relative;
padding: 0;
border: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
}
a:hover {
text-decoration: none !important;
}
.scrolltop {
display: none;
position: fixed;
bottom: 15px;
right: 15px;
width: 42px;
height: 42px;
border-radius: 50%;
background: #199EB8;
color: #fff;
text-align: center;
font-size: 24px;
}
.scrolltop:hover, .scrolltop:active, .scrolltop:focus {
color: #fff !important;
opacity: .75;
}
/* ==================================================
Hero Styling
================================================== */
.hero {
display: table;
position: relative;
background-image: url(../img/cover.jpg);
background-size: cover;
padding: 150px 0;
color: #fff;
width: 100%;
height: 100vh;
}
.hero:after {
content: '';
z-index: 0;
position: absolute;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.hero .container {
position: relative;
z-index: 1;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.hero-brand {
margin-bottom: 75px;
display: inline-block;
}
.hero-brand:hover {
opacity: .75;
}
.tagline {
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 26px;
margin: 45px 0 75px 0;
color: #fff;
}
/* ==================================================
Header Styling
================================================== */
#header {
background: rgba(47, 118, 171, 0.7);
height: 70px;
}
#header #logo {
margin: 14px 25px 0 0;
}
#header #logo h1 {
font-size: 36px;
margin: 0;
padding: 2px 0;
line-height: 1;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
}
#header #logo h1 a, #header #logo h1 a:hover {
color: #fff;
}
#header #logo img {
padding: 0;
margin: 0;
max-height: 40px;
}
#media (max-width: 768px) {
#header {
height: 50px;
}
#header #logo {
margin: 10px 0 0 0;
}
#header #logo h1 {
padding: 2px 0;
font-size: 26px;
}
#header #logo img {
max-height: 30px;
}
}
#header .social-nav {
margin-top: 15px;
}
#header .social-nav a {
font-size: 24px;
margin-left: 15px;
color: #fff;
}
#header .social-nav a:hover {
color: rgba(255, 255, 255, 0.75);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Nav Menu Essentials */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 999;
}
.nav-menu li {
position: relative;
white-space: nowrap;
}
.nav-menu > li {
float: left;
}
.nav-menu li:hover > ul,
.nav-menu li.sfHover > ul {
display: block;
}
.nav-menu ul ul {
top: 0;
left: 100%;
}
.nav-menu ul li {
min-width: 180px;
}
/* Nav Menu Arrows */
.sf-arrows .sf-with-ul {
padding-right: 30px;
}
.sf-arrows .sf-with-ul:after {
content: "\f107";
position: absolute;
right: 15px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
}
.sf-arrows ul .sf-with-ul:after {
content: "\f105";
}
/* Nav Meu Container */
#nav-menu-container {
margin: 0;
}
#media (max-width: 768px) {
#nav-menu-container {
display: none;
}
}
/* Nav Meu Styling */
.nav-menu a {
padding: 22px 15px 18px 15px;
text-decoration: none;
display: inline-block;
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 15px;
outline: none;
}
.nav-menu a:hover, .nav-menu li:hover > a, .nav-menu .menu-active > a {
color: rgba(255, 255, 255, 0.75);
}
.nav-menu ul {
margin: 4px 0 0 15px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.08);
}
.nav-menu ul li {
background: #fff;
border-top: 1px solid #f4f4f4;
}
.nav-menu ul li:first-child {
border-top: 0;
}
.nav-menu ul li:hover {
background: #199EB8;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.nav-menu ul li a {
color: #333;
-webkit-transition: none;
-o-transition: none;
transition: none;
padding: 10px 15px;
}
.nav-menu ul li a:hover {
color: #fff;
}
.nav-menu ul ul {
margin: 0;
}
/* Mobile Nav Toggle */
#mobile-nav-toggle {
position: fixed;
right: 0;
top: 0;
z-index: 999;
margin: 8px 10px 0 0;
border: 0;
background: none;
font-size: 24px;
display: none;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
outline: none;
cursor: pointer;
}
#mobile-nav-toggle i {
color: #fff;
}
#media (max-width: 768px) {
#mobile-nav-toggle {
display: inline;
}
}
/* ==================================================
About styling
================================================== */
.about h2{
color: #2f76ab;
}
img.tbasr{
width: 50%;
height: 50%;
margin: 10px;
float: right;
}
img.tbasl{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Features Styling
================================================== */
.features {
padding-bottom: 45px;
}
.features h2 {
color: #2f76ab;
}
.features img {
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* Mobile Nav Styling */
#mobile-nav {
position: fixed;
top: 0;
padding-top: 18px;
bottom: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.9);
left: -260px;
width: 260px;
overflow-y: auto;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#mobile-nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#mobile-nav ul li {
position: relative;
}
#mobile-nav ul li a {
color: #fff;
font-size: 16px;
overflow: hidden;
padding: 10px 22px 10px 15px;
position: relative;
text-decoration: none;
width: 100%;
display: block;
outline: none;
}
#mobile-nav ul li a:hover {
color: #fff;
}
#mobile-nav ul li li {
padding-left: 30px;
}
#mobile-nav ul .menu-has-children i {
position: absolute;
right: 0;
z-index: 99;
padding: 15px;
cursor: pointer;
color: #fff;
}
#mobile-nav ul .menu-has-children i.fa-chevron-up {
color: #199EB8;
}
#mobile-nav ul .menu-item-active {
color: #199EB8;
}
#mobile-body-overly {
width: 100%;
height: 100%;
z-index: 997;
top: 0;
left: 0;
position: fixed;
background: rgba(0, 0, 0, 0.6);
display: none;
}
/* Mobile Nav body classes */
body.mobile-nav-active {
overflow: hidden;
}
body.mobile-nav-active #mobile-nav {
left: 0;
}
body.mobile-nav-active #mobile-nav-toggle {
color: #fff;
}
/* ==================================================
Stats Styling
================================================== */
.stats-row {
margin-top: 65px;
}
.stats-col .circle {
display: inline-block;
width: 160px;
height: 160px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-weight: 500;
color: #666;
border: 6px solid #2f76ab;
border-radius: 50%;
padding: 55px 25px 0 25px;
position: relative;
}
.stats-col .circle .stats-no {
color: #fff;
width: 75px;
height: 75px;
line-height: 70px;
top: -25px;
right: -15px;
font-family: "Raleway", Helvetica, Arial, sans-serif;
font-size: 18px;
background-color: #E04F00;
position: absolute;
border-radius: 50%;
font-weight: 700;
}
/* ==================================================
Call-to-action Styling
================================================== */
.cta {
background-color: #2f76ab;
padding: 25px 0;
}
.cta h2 {
margin-bottom: 5px;
}
.cta h2,
.cta p {
color: #fff;
}
.cta p {
margin-bottom: 0;
opacity: .75;
}
.cta .btn-ghost {
position: relative;
top: 13px;
}
/* ==================================================
Portfolio Styling
================================================== */
.portfolio {
background-color: #edf6ff;
padding-bottom: 0;
}
.portfolio h2 {
color: #2f76ab;
margin-bottom: 25px;
}
.portfolio-grid {
margin-top: 65px;
}
.portfolio-grid .row {
margin: 0;
}
.portfolio-grid .row > div {
padding: 0;
}
.portfolio-grid .row > div .card img {
width: 100%;
}
.portfolio-grid .row > div .card .portfolio-over {
position: absolute;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.portfolio-grid .row > div .card .portfolio-over > div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.portfolio-grid .row > div .card .portfolio-over .card-title {
color: #fff;
font-size: 30px;
}
.portfolio-grid .row > div .card .portfolio-over .card-text {
color: #fff;
opacity: .75;
padding: 0 45px;
}
.portfolio-grid .row > div .card:hover .portfolio-over {
opacity: 1;
visibility: visible;
}
.portfolio img{
width: 50%;
height: 50%;
margin: 10px;
float: left;
}
/* ==================================================
Team Styling
================================================== */
.team h2 {
color: #199EB8;
}
.team .col-sm-3 {
padding: 0;
}
.team .card > a {
display: block;
}
.team .card img {
width: 100%;
}
.team .card h4 {
color: #fff;
text-transform: uppercase;
}
.team .card p {
font-size: 11px;
color: #fff;
opacity: .75;
margin: 0;
padding: 0 35px;
}
.team .card .social-nav {
margin-bottom: 45px;
}
.team .card .social-nav a {
color: #fff;
font-size: 16px;
margin: 0 4px;
}
.team .card .social-nav a:hover {
opacity: .75;
}
.team .card:hover .team-over {
opacity: 1;
visibility: visible;
}
.team .card:hover .card-title-wrap {
background-color: #199EB8;
}
.team .card:hover .card-title-wrap .card-title, .team .card:hover .card-title-wrap .card-text {
color: #fff;
}
.team .team-over {
padding-top: 45px;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
text-align: center;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.team .card-title-wrap {
padding: 15px 25px;
position: relative;
z-index: 9;
background-color: #fff;
}
.team .card-title-wrap .card-title, .team .card-title-wrap .card-text {
font-family: "Raleway", Helvetica, Arial, sans-serif;
display: block;
margin: 0;
}
.team .card-title-wrap .card-title {
font-size: 24px;
color: #333;
}
.team .card-title-wrap .card-text {
font-size: 18px;
color: #999;
}
/* ==================================================
Contact Section
================================================== */
#contact {
background: #f7f7f7;
padding: 80px 0;
}
#contact h2 {
font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #199EB8;
}
#contact .info i {
font-size: 32px;
color: #199EB8;
float: left;
}
#contact .info p {
padding: 0 0 10px 50px;
line-height: 24px;
}
#contact .form #sendmessage {
color: #199EB8;
border: 1px solid #199EB8;
display: none;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #errormessage {
color: red;
display: none;
border: 1px solid red;
text-align: center;
padding: 15px;
font-weight: 600;
margin-bottom: 15px;
}
#contact .form #sendmessage.show, #contact .form #errormessage.show, #contact .form .show {
display: block;
}
#contact .form .validation {
color: red;
display: none;
margin: 0 0 20px;
font-weight: 400;
font-size: 13px;
}
#contact .form input, #contact .form textarea {
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
#contact .form button[type="submit"] {
background: #199EB8;
border: 0;
padding: 10px 24px;
color: #fff;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
}
#contact .form button[type="submit"]:hover {
background: #23c2e1;
}
/* ==================================================
Footer Styling
================================================== */
.site-footer {
background-color: #111;
padding: 0;
}
.site-footer h2, .site-footer p {
color: #fff;
}
.site-footer p {
opacity: .75;
line-height: 2.0925;
}
.site-footer h2,
.site-footer .btn {
margin-bottom: 25px;
}
.site-footer .social-nav a {
color: #fff;
opacity: .25;
}
.site-footer .social-nav a:hover {
opacity: 1;
}
.site-footer .bottom {
background-color: #000;
padding: 20px 0;
}
.site-footer .bottom .list-inline, .site-footer .bottom p {
margin: 0;
}
.site-footer .bottom .list-inline {
position: relative;
top: 5px;
}
.site-footer .bottom .list-inline a {
color: #fff;
font-family: "Roboto", Helvetica, Arial, sans-serif;
margin-right: 15px;
}
.site-footer .bottom .list-inline a:hover {
color: #199EB8;
}
.site-footer .credits {
color: #ddd;
}
.site-footer .credits a {
color: #199EB8;
}
/* ==================================================
Responsive Styling
================================================== */
#media (max-width: 61.9em) {
section,
.block,
.cta {
padding: 35px 0;
}
.features {
padding-bottom: 5px;
}
p,
.block p {
margin: 0;
}
.hero-brand {
margin-bottom: 35px;
}
.tagline {
margin: 35px 0;
}
h1 {
font-size: 32px;
margin: 0;
}
h2,
.tagline {
font-size: 24px;
}
h2 {
margin-bottom: 25px;
}
h3 {
font-size: 14px;
}
.hero {
padding: 75px 0;
}
.stats-col {
margin-bottom: 25px;
}
.block {
height: auto;
}
.feature-col {
padding-bottom: 30px;
}
.portfolio-grid .card h3.card-title {
font-size: 18px !important;
}
.portfolio-grid .card .card-text {
font-size: 13px;
}
.team .team-over {
padding-top: 20px;
}
.team .card .social-nav {
margin-bottom: 15px;
padding: 0;
}
.site-footer .social-nav {
margin-bottom: 35px;
}
.site-footer .list-inline {
text-align: center;
padding-bottom: 15px;
}
.site-footer .list-inline li {
display: inline-block;
}
}
#media (max-width: 767px) {
.block {
padding-left: 30px;
padding-right: 30px;
}
}
<!-- Header -->
<header id="header">
<div class="container">
<div id="logo" class="pull-left">
<img src="img/logo-nav.png" alt="" title="" /></img>
</div>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li><?php echo $lang['nav_tbas']; ?></li>
<li><?php echo $lang['nav_hansaworld']; ?></li>
<li><?php echo $lang['nav_solutions']; ?></li>
<li><?php echo $lang['nav_about']; ?></li>
<!--<li class="menu-has-children">Drop Down
<ul>
<li>Drop Down 1</li>
<li class="menu-has-children">Drop Down 2
<ul>
<li>Deep Drop Down 1</li>
<li>Deep Drop Down 2</li>
<li>Deep Drop Down 3</li>
<li>Deep Drop Down 4</li>
<li>Deep Drop Down 5</li>
</ul>
</li>
<li>Drop Down 3</li>
<li>Drop Down 4</li>
<li>Drop Down 5</li>
</ul>
</li>-->
<li><?php echo $lang['nav_contact']; ?></li>
<li><?php echo $lang['nav_support']; ?></li>
</ul>
</nav>
<!-- #nav-menu-container -->
<nav class="nav social-nav pull-right hidden-sm-down">
<i class="fa fa-facebook"></i>
<i class="fa fa-envelope"></i>
</nav>
</div>
</header>
<!-- /header -->
<!-- Slider -->
<div class="slider">
<ul>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc1">
<p class="desc1"><div id="slide01">You are awesome<div></p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc2">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
<li>
<img src="http://www.sofido.net/img/slider/sofido-slide-01.jpg" />
<span class="desc">
<h4><br />Another caption title</h4>
<p class="desc">More lorem ipsum dolor...</p>
</span>
</li>
</ul>
</div>
<!-- /Slider -->
Using position: absolute on #header will take it out of the static layout flow and the slider should "slide" up, so to say. You will also need to specify the width since it's out of the flow: width: 100% or width: 100vwshould work. For good measure you should also add top: 0 and left: 0.
You will probably need to set a z-index as well.
Note, I am not very familiar with Bootstrap and there might be a more "Bootstrap-way" to accomplish this, but it should work.
Also note, that I do not know if this will mess with the plugin, you use, that makes the header fixed.