This question already has answers here:
How to remove white space left and right side of page?
(10 answers)
Closed 5 years ago.
My Nav bar isn't spanning the whole page (run the snippet code to see). As you can see, there are white borders on the left and right side. Here is the code:
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
</body>
Every single thing that pertains to the nav bar is set on width: 100%. Please help me understand why the nav bar isn't filling the whole width of the page.
The CSS below should prevent the white spacing around your Nav bar
body {
margin: 0;
padding: 0;
}
every tag has some default margin and padding at first you have to clear that margin and padding using *{ padding:0px; margin:0px} that * select all the element and set margin and padding 0.
*{
margin: 0px;
padding:0px;
}
nav {
width: 100%;
height: 100px;
text-align: center;
z-index: 30;
position: relative;
}
li {
display: inline;
font-family: "Lato";
font-size: 20px;
text-transform: uppercase;
display: inline-block;
margin: 20px 10px;
padding: 20px 25px 25px 25px;
z-index: 30;
position: relative;
}
ul {
background-color: #80DED9;
margin: 0;
padding: 0;
width: 100%;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
.dropdown {
display: inline-block;
cursor: pointer;
position: relative;
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
z-index: 25;
}
.dropdown-content {
visibility: hidden;
display: block;
opacity: 1;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-20em);
z-index: -100;
transition: all .5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
font-size: 10px;
margin: 0px;
z-index: -250;
}
.dropdown-content li {
display: block;
margin: 40px;
padding: 0px;
z-index: -250;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
visibility: visible;
z-index: -10;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.5s;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
color: #6d9dc5;
}
.dropbtn {
padding: 35.5px 0px;
margin: -35.5px 40px;
background-color: #80DED9;
}
<head>
<title>JAM Bakery</title>
<link rel="stylesheet" type="text/css" href="home.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Gloria+Hallelujah|Lato" rel="stylesheet">
</head>
<nav>
<ul>
<div class="dropdown">
<li class="dropbtn">Products</li>
<ul class=dropdown-content>
<li>Cupcakes</li>
<li>Cakes</li>
<li>Bagles
<li>
</ul>
</div>
<li class="buttons">About Us</li>
<li class="buttons">Contact Us</li>
</ul>
</nav>
The best thing to do is set your CSS like this:
body{ margin: 0; padding: 0; width: 100vw;}
nav{width: 100vw;}
Using the 100vw will set the item's to be 100% of the viewable width. This should eliminate your problem.
Related
I have a pure css hamburger menu based on this codepen and I made my hamburger menu only show up on devices with 768px width and below, the hamburger menu also has some transitions when opening and closing to make it look smooth but the problem is that when the page is refreshed, you can see the menu show up for a split second before it transitions under the header. This can also be seen when you're manually resizing the viewport from a width larger than 768px and when it gets to 767px, you can the see the menu appear for a split second before it disappears. Please I need help to make this behaviour stop. Below is the code required to recreate this problem:
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Product Landing Page</title>
</head>
<body>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
</body>
</html>
I also provided a fiddle you can use to check out the problem.
P.S: The original codepen I got the idea from also has the same issue if you copy the code and preview it in a browser and reload the page.
Using javascript we can add the stop-transition class to the body for some few milliseconds. Then in the css we can add the rule to stop play any transition momentarily. After that, when the resize is done, we can remove the stop-transition class from the body to make sure that everything acts accordingly.
Here's the fiddle.
(function () {
const classes = document.body.classList;
let timer = null;
window.addEventListener('resize', function () {
if (timer){
clearTimeout(timer);
timer = null;
} else {
classes.add('stop-transition');
}
timer = setTimeout(() => {
classes.remove('stop-transition');
timer = null;
}, 100);
});
})();
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
/* Stop playing transition momentarily on viewport resize. */
body.stop-transition .menu {
transition: none;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</main>
So I have a header and some menu links on the right and a logo on the left side of the header.
So currently, the logo is small in size but as soon as I change the logo's height to suit my needs, it also increases the height of the actual header.
However, I just want the logo's height to increase not the actual header's height.
I have also searched other questions on stack overflow and on google and the question is similar to mine but still I have some problems. Please help me.
This is my code for the header:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home - Diamond Collections</title>
<style>
#import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');
:root {
--background: rgba(0, 214, 170, .85);
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
background:
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to
allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.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: white;
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: white;
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;
}
#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 {
// all: unset; /* this causes issues with Edge, since it's unsupported */
position: relative;
text-align: left;
transition: none;
transform: scale(1,1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
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: 1.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1,1);
}
}
</style>
</head>
<body>
<header>
<h1 class="logo"><img src="Images/Logo5.JPG"></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</header>
here a jsfifed for your answer jsfiddle
i've addded dummy image.. becuse your relative path image not open as here... below code added to your code
h1 {
margin:0
}
.logo a {
display: flex;
justify-content: center;
}
.logo img {
height: 45px;
}
.logo {
grid-column: 2 / 3;
transform: scale(2);
}
Update your logo class.
read up on devtools - This will help you easily troubleshoot problems like this.
As the child elements grows, so must the parent in order to accommodate the child.
Your previous logo text had a top and bottom margin as well on the h1 tag that it was enclosed in. Removing some top and bottom margins on the h1 will help you increase the logo
When adding padding, margin, just general distance to a text element on my page, my top menu kind of "mirrors" down on the page and i get a non-functional second menu at the middle of the page. Identical to the second one, and cuts through all other elements like images, text, etc.. Colors and all other aspects are still retained on the new menu and on the page in general.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>something</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body class="fade-in">
<div id="meny">
<div id="menyknapp1">
<div class="dropdown">
<button class="dropbtn">Mobile Enheter</button>
<div class="dropdown-content">
Enheter
Operativsystemer
</div>
</div>
</div>
<div id="menyknapp2">
<div class="dropdown">
<button class="dropbtn">Teknologi</button>
<div class="dropdown-content">
Webtjenester
Teknologier
</div>
</div>
</div>
</div>
</div>
<div id="bilde1">
<img src="Technology.png" style="width: 400px; height: 350px;">
</div>
</div> </div>
<div id="tekst">
<p> text
</p>
</div>
</body>
</html>
CSS code:
#import url('https://rsms.me/inter/inter-ui.css');
/*fade in animasjon body */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
}
body {
height: 100%;
width: 100%;
margin-left: 2%;
}
#meny {
background-color: #CACACA;
position: absolute;
width: 100%;
height: 10%;
top: 0%;
left: 0%;
padding-left: 10px;
padding-top: 5px;
padding-right: 5px;
}
#tekst
{
top: 20%;
font-family: 'Inter UI', 'sans-serif';
font-size: 30px;
position: absolute;
}
.dropbtn {
background-color: #89cff0;
color: black;
padding: 16px;
font-size: 18px;
border: none;
cursor: pointer;
font-family: 'Inter UI', 'sans-serif';
border-radius: 3px;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #89cff0;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: 'Inter UI', 'sans-serif';
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #6599b2;
}
#menyknapp1 {
position: absolute;
left: 3%;
top: 10%;
padding: auto;
}
#menyknapp2 {
position: absolute;
left: 20%;
padding: auto;
top: 10%;
}
#tekst {
margin-left: 18px;
font-size: 18px;
line-height: 25px;
position: relative;
padding-top:
}
#bilde1 {
position: absolute;
left: 18px;
width: 600px;
height: 400px;
}
It has to do with absolute position in your .dropdown-content css definition.
Maybe take some time to understand how absolute positioning works:
https://www.w3schools.com/css/css_positioning.asp
I made a navigiation bar that changes photo on hover. It works when I hover on links (first level menu) but when I hover on the dropdown's (second level menu) the photo goes off. How do I make photo to stay when hover on both main menu and submenu (dropdown). The photo should not disappear when I hover on submenu.
I would like to achieve this without using JavaScript, purely with CSS.
nav{
background-color: #fff;
width:150px;
height: 667px;
float:right;
}
nav h1{
padding: 20px;
color: #777;
font: 20px tahoma,times,serif;
}
ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
width: 150px;
text-align: right;
}
ul li {
position: relative;
}
li ul {
position: absolute;
right: 149px;
top: 0;
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border-bottom: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}
li:hover ul {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
background: #333;
background: url("http://vignette1.wikia.nocookie.net/logopedia/images/6/69/FC-Barcelona-old-logo.png/revision/latest?cb=20120211172615");
background-repeat: no-repeat;
}
.container{
overflow: hidden;
margin-right: 0;
height: 500px;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
width: 800px;
}
.container img{
margin-top: 0px auto;
position: fixed;
top: 0px;
left: 0px;
z-index: -60;
height: 500px;
width: 800px;
}
.container li img {
opacity: 0.5;
margin-top: 0px auto;
position: absolute;
left: 0px;
z-index: -50;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
li:nth-child(1){
padding-top: 0px;
}
li a:hover {
background: #eee;
}
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<LINK rel=stylesheet type="text/css" href="StyleSheet.css"/>
<title></title>
</head>
<body>
<div class="container">
<nav><h1><b>ברצלונה</b></h1>
<ul>
<li>ברצלונה<img src="http://media3.fcbarcelona.com/media/asset_publics/resources/000/160/456/size_640x360/pic_2015-01-11_BARCELONA-ATLETICO_45.v1431011244.JPG" alt="1"></li>
<li>לה ליגה<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTd6ngNNGapdLhqdS4KbuoNNCaaUMP4Svu-e_9rXMh_wLDtPpSE" alt="1">
<ul>
<li>ברצלונה</li>
<li>ריאל</li>
<li>אתלטיקו</li>
</ul>
</li>
<li>בונדסליגה<img src="http://static3.demotix.com/sites/default/files/imagecache/a_scale_large/2000-5/photos/1368393557-club-atletico-de-madrid-v-fc-barcelona--la-liga_2046465.jpg" alt="1">
<ul>
<li>באיירן</li>
<li>וולפסבורג</li>
<li>הנדובר</li>
<li>דורטמונד</li>
</ul>
</li>
<li>סיירה א<img src="http://barcelonacamps.com/wp-content/uploads/2014/04/barca-new-team.jpg" alt="1">
<ul>
<li>אינטר</li>
<li>מילאן</li>
<li>יובה</li>
<li>רומא</li>
</ul>
</ul>
</li>
</nav>
</div>
</body>
</html>
See this fiddle
Just do the below slight change in your CSS..
Replace
li a:hover + img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
with
li:hover a +img {
opacity: 1;
position: fixed;
margin-top: 0px auto;
left: 0px auto;
height: 500px;
width: 800px;
}
Also, your <li> and <ul> tags are not properly closed at the end. Bring </li> before the </ul>.
I have a transition that animates the height of the UL within my navigation. This is only for mobiles. I have used a media query to change the navigation when the viewport is wider.
When you make the viewport smaller in width, once the media query is triggered you can see that the UL height animates because I have a transition going on. The only two ways I've found that stop this are either lose the transition completely, or only have it so the transition happens when the checkbox is checked. Initially displaying the UL as none worked, however as I need to then set the display to block, the transition is lost.
Here is my code example. Hopefully someone can help with a workaround.
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Ovo|Varela' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navigation -->
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" autocomplete="off">
<nav>
<div id="nav_overlay"></div>
<ul>
<li>Home</li>
<li>My Work</li>
<li>Contact</li>
</ul>
<div class="navbar_handle">
<label for="navbar-checkbox" class="navbar_menu"></label>
</div>
</nav>
</body>
</html>
CSS:
a {
text-decoration: none;
color: inherit;
}
.navbar-checkbox {
display: none;
}
nav {
position: fixed;
width: 100%;
top: 0;
}
nav ul {
position: relative;
-webkit-transition: height .2s linear;
transition: height .2s linear;
height: 0;
background-color: #2b2b2b;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
z-index: 3;
}
nav li {
-webkit-transition: visibility .4s linear;
transition: visibility .4s linear;
visibility: hidden;
}
nav li:hover {
background-color: #0b0b0b;
}
nav li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: block;
padding: 1.25em;
}
nav .border {
border-bottom: 1px solid #f6f6f6;
}
nav .navbar_handle {
position: relative;
border-top: 4px solid #de1b1b;
width: 100%;
background: #f6f6f6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
z-index: 3;
}
nav .navbar_handle .navbar_menu {
font-family: dan_custom-font;
width: auto;
height: 100%;
float: right;
padding: 10px;
margin-right: 0.5em;
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
nav .navbar_handle .navbar_menu:before {
content: 'Menu';
font-size: 2em;
line-height: 1em;
}
nav .navbar_handle .navbar_menu:after {
display: none;
}
nav #nav_overlay {
width: 100%;
height: 100%;
position: fixed;
visibility: hidden;
background: #000;
opacity: 0;
-webkit-transition: all .4s;
transition: all .4s;
z-index: 2;
}
#navbar-checkbox:checked + nav ul {
height: 12.1875em;
}
#navbar-checkbox:checked + nav li {
visibility: visible;
width: 100%;
display: block;
}
#navbar-checkbox:checked + nav #nav_overlay {
visibility: visible;
opacity: .7;
}
#navbar-checkbox:checked + nav .navbar_menu:before {
display: none;
}
#navbar-checkbox:checked + nav .navbar_menu:after {
display: block;
content: 'Close';
font-size: 2em;
line-height: 1em;
}
.main {
line-height: 1.5em;
}
#media only screen and (min-width: 42em) {
nav {
background: #f6f6f6;
}
nav ul {
display: block;
background: none;
float: right;
height: 3.75em;
color: #2b2b2b;
-webkit-transition: none;
transition: none;
}
nav ul li {
visibility: visible;
display: inline-block;
-webkit-transition: none;
transition: none;
}
nav .navbar_handle {
display: none;
}
nav .border {
border-bottom: none;
}
}