Hi
I need some help with my navigation bar. I need to be able to move the logo over to the left and shrink it while the nav bar moves to the right. I have it working for the most part but my problem is getting it centered when the site is first opened and then when you scroll back up to make sure it goes back to the center and same size as it started with. You can check it out
Preview site click here
I need some help with my navigation bar. I need to be able to move the logo over to the left and shrink it while the nav bar moves to the right. I have it working for the most part but my problem is getting it centered when the site is first opened and then when you scroll back up to make sure it goes back to the center and same size as it started with. You can check it out
Preview site click here
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 50000px;
position: relative;
margin-top: 500px;
margin-left: 100px;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 4px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
img {
display: block;
margin-left: auto;
margin-right: auto;
height= 500px
width= 500px
margin-left:300px;
}
* {box-sizing: border-box;}
header {
margin-left: auto;
margin-right: auto;
font-family: Arial, Helvetica, sans-serif;
}
#navbar {
overflow: hidden;
background-color: white;
padding: 20px 10px;
transition: 0.4s;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
#navbar a {
float: left;
color: darkgreen;
text-align: auto;
padding: 5px;
text-decoration: none;
font-size: 20px;
line-height: 20px;
border-radius: 4px;
}
#navbar #logo {
transition: 0.4s;
margin-left: 350px;
float: center;
}
#navbar a:hover {
background-color: white;
color: darkgreen;
}
#navbar a.active {
background-color: darkgreen;
color: white;
}
#navbar-right a:hover {
background-color: darkgreen;
color: white;
}
#navbar-right {
float: left;
margin-left: 450px;
}
@media screen and (max-width: 400px) {
#navbar {
padding: 20px 10px !important;
float: center;
}
#navbar a {
float: center;
display: block;
text-align: center;
}
#navbar-right {
float: left;
}
}
.bottom-left a{
font-size: 24px;
color: darkgreen;
font-weight: bold;
}
.bottom-left a:hover {
background-color: darkgreen;
color: white;
}
</style>
</head>
<header>
<div id="navbar">
<a href="index.html" id="logo"><img src="image/keto_logo.jpg" style="width:60%; "align="center"></a>
<div id="navbar-right">
<a href="#about">About Us</a>
<a href="full_menu.html">Full Menu</a>
<a href="#weekly_menu">Weekly Menu</a>
<a href="calendar.html">Calendar</a>
<a href="#delivery">Delivery</a>
<a href="#pickup">Pick Up</a>
<a href="say_hello.php">Say Hello</a>
</div>
</div>
</header>
<body>
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody>
<tr>
<td>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="image/chicken-gumbo.jpg" height="600" width="1200">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="image/Crispy Pecan Chicken Cutlets.jpg" height="600" width="1200">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="image/Beef Bourguignon.jpg" height="600" width="1200">
<div class="text">Caption Three</div>
</div>
</div>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="80%" align="center">
<tbody>
<tr>
<td colspan="3" align="center" height="320" valign="middle"><img src="image/All-meats.jpg" height="600" width="600" "align="center"/><span class="bottom-left"><a href="#about">About Us</a></span></td>
<td colspan="3" align="center" height="320" valign="middle"><img src="image/cheese-board.jpg" height="600" width="600" "align="center"/><span class="bottom-left"><a href="full_menu.html">Full Menu</a></span></td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="80%" align="center">
<tbody>
<tr>
<td colspan="3" align="center" height="320" valign="middle"><img src="image/keto_cake.jpg" height="600" width="600" "align="center"/><span class="bottom-left"><a href="#weekly_menu">Weekly Menu</a></span></td>
<td colspan="3" align="center" height="320" valign="middle"><img src="image/veggies.jpg" height="600" width="600" "align="center"/><span class="bottom-left"><a href="#calendar">Calendar</a></span></td>
</tr>
</tbody>
</table>
</body>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 70 || document.documentElement.scrollTop > 70) {
document.getElementById("navbar").style.padding = "20px 10px";
document.getElementById("logo").style.width = "10%";
} else {
document.getElementById("navbar").style.padding = "60px 10px";
document.getElementById("logo").style.width = "60%";
}
}
</script>
</html>