I've to put a navigation along to the full width of the browser.
The problem is when click on the first item, along to the full browser width of that item shoild be effected.
This is also for last item
To do that, I've just worked with nav first-child and nav last child. You can see my work at here.
This works well at firefox. But, at chrome, if I zoom in/out the brwoser, the nav items will break.
HTML code:
<body>
<div id="header" class="outer">
<div class="inner">
<h1 class="logo"><img src="images/logo-1.png" width="314" height="158" alt="logo" /></h1>
<div class="nav">
<ul>
<li>home</li>
<li>Nieuws</li>
<li>Praktijk</li>
<li>Behandelingen
<ul>
<li>ouderen</li>
<li>Sport</li>
<li>Algemeen</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="inner">
<div id="content">
<p>Lorem...</p>
</div>
</div>
</body>
CSS code:
body {
background: #fff;
color: #000;
font-family: 'HelveticaNeueLTStd55Roman';
font-size: 14px;
line-height: 1em;
overflow-x: hidden;
}
.outer {
width: 100%;
float: left;
}
.inner {
width: 941px;
margin: 0 auto;
}
#header {
width: 100%;
float: left;
padding: 22px 0 5px 0;
background: url(../images/header-bg.png) repeat-x;
}
h1.logo a {
display: block;
float: left;
}
.nav {
width: auto;
float: left;
margin: 24px 0 0 0;
}
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
list-style: none;
}
.nav ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
.nav ul li a {
min-width: 155px;
text-align: center;
margin: 0 0 8px -21px;
padding: 0 22px 0 32px;
display: block;
font-size: 14px;
color: #cc3840;
line-height: 28px;
font-family: 'HelveticaNeueLTStd75Bold';
text-transform: uppercase;
border-radius: 14px;
background: #fff;
}
.nav ul li.active a, .nav ul li a:hover {
color: #cf383c;
background: none;
}
.nav ul li:first-child a {
margin-left: -900%;
padding-left: 900%;
}
.nav ul li:last-child a {
margin-right: -900%;
padding-right: 900%;
}
.nav ul li:hover a {
color: #cf383c;
background: none;
}
.nav ul ul {
position: absolute;
left: 10px;
right: 0;
display: none;
z-index: 5;
}
.nav ul ul li {
position: relative;
margin: 0;
border: none;
}
.nav ul ul li a, .nav ul li:hover ul li a {
width: 140px;
display: block;
background: #d0353e;
color: #ffe597;
font-size: 18px;
margin: 6px 0 0 0;
padding: 0;
line-height: 26px;
text-align: center;
border-radius: 12px;
}
.nav ul ul li a:hover, .nav ul li:hover li a:hover {
color: #fff;
}
#content {
width: 100%;
float: left;
border-top: 3px solid #fce696;
margin: 20px 0 0 0;
}
#content p {
font-size: 14px;
padding: 10px 0;
}
Can you please tell me how can I fix that for chrome and safari.
Thanks in advance
you need to set width to .nav > ul > li to fix this issue
.nav ul li:first-child, .nav ul li:last-child {
width: 165px;
}
its working fine
http://demo.sumedhasoftech.com/manoj/test/test.html
Related
This is how page looks:
First problem, that
If you look closer at this, it's a bit transparent, we can see div main behind this ul inside ul.
Second if we zoom the browser up... this happens
I would like this text no nowrap, just 3 and 4 li element won't fit in this zoomed screen and we won't see this.
And for last
I would like main to fit the rest of the screen we got (at least the rest, until there is no content that goes in width or height more)
To look like this:
Just main to at Minimum fill rest of the free space on website, and I don't want to do it by whole body background color declaration.
Whole code:
html:
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
#header {
position: fixed;
top: 0;
height: 20px;
width: 100%;
background-color: #23282d;
padding: 10px 0px;
z-index: 100;
}
#header a {
color: #ccc;
text-decoration: none;
}
#header ul, #header ul li ul{
list-style: none;
margin: 0px;
}
#header ul li {
float: left;
margin-right: 70px;
}
#header ul li ul {
padding: 0px;
text-align: center;
display: none;
border: 1px solid #FFF;
background-color: #EEE;
border-radius: 2px;
margin-top: 5px;
}
#header ul li ul a {
color: #000;
}
#header ul > li:hover > ul {
display: block;
}
#header ul li ul li {
float: none;
margin: 0px;
margin-top: 15px;
margin-bottom: 15px;
}
#aside {
left: 0;
position: fixed;
width: 170px;
height: 100%;
top: 40px;
background-color: #323435;
border-top: 2px dotted #333;
}
#aside ul {
list-style: none;
padding-left: 10px;
}
#aside ul li {
margin-bottom: 15px;
}
#aside ul li a {
color: #ccc;
text-decoration: none;
}
#header a:hover, #aside a:hover{
color: #2295cc;
}
#main {
background-color: #f1f1f1;
width: 100%;
height: 100%;
position: relative;
top: 40px;
left: 170px;
}
.clear {
clear: both;
}
<body>
<div id="header">
<ul>
<li>Nazwa Strony</li>
<li>0 Komentarze do moderacji</li>
<li>Dodaj nowy
<ul>
<li>Post</li>
<li>Stronę</li>
<li>Media</li>
</ul>
</li>
<li>Usuń cały cache</li>
</ul>
</div>
<div class="clear"></div>
<div id="aside">
<ul>
<li>Deszbord</li>
<li>Posty</li>
<li>Strony</li>
<li>Media</li>
<li>Wygląd</li>
<li>Użytkownicy</li>
<li>Ustawienia</li>
</ul>
</div>
<div class="clear"></div>
<div id="main">
asdasdasd
</div>
</body>
I made a navbar with a mobile media query, but when I try to hover over the hamburger menu, the navbar isn't static and I cant click any links.
Can anyone help me to fix this, I've already been trying for 90 mins :/
JSFiddle: https://jsfiddle.net/dxmbc5p6/
All code in Jsfiddle:
<body class="animated fadeIn">
<div class="nav animated fadeInDown">
<img src="hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>TITLE</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</body>
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #FFF;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 150px;
}
.nav .logo h1 {
color: #222;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 150px;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #FFF;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
}
.nav ul a {
color: #222;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 50%;
width: 100%;
background: url('bg.jpg');
background-size: cover;
position: relative;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#media only screen and (max-width: 850px){
.nav .hamburger {
height: 6%;
display: block;
float: left;
margin: 2% 0 0 2%;
left: 0;
top: 0;
position: fixed;
}
.nav .logo {
text-align: center;
margin: 0;
float: none;
}
.nav > ul {
display: none;
float: none;
width: 100%;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul:hover {
display: block;
width: 100%;
}
.nav ul:hover li {
width: 100%;
padding: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.nav > ul > li > ul > li {
background-color: #D4D4D4;
}
}
Try adding this to the css.
ul > li a,
.nav > ul > li > ul > li a
{
display:block;
}
I will also point out that with a media tag detecting width as your way of detecting mobile. Your mobile site will display on desktops as well when the browser is shrunk below 850px. This will be a problem with your hover event as it will not fire after to mouse leaves the hamburger.
It doesn't work because of the fact that as soon as you leave the image it looses it's hover state. Look at this example from your code:
<li>
<li>PAGE</li>
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
And the CSS
.nav li:hover > ul {
display: block;
}
You put the css on the first li which contains the section as well as the sub section. This way it doesn't matter if you are over the anchor element or the unordered list, they are still part of the first li so it is hovered.
In the hamburger situation you put the hover css on a element which doesn't contain the menu so as soon as you leave the hamburger image it looses it's hover state.
I am trying to make horizontal menu navigation. I have several links in navigation, and I would like to have equal horizontal space between them.
How to make links in horizontal menu with equal space between them?
HTML:
<div id="header">
<div class="secondary-navigation">
<div itemscope itemtype="http://schema.org/SiteNavigationElement">
<nav id="navigation">
<ul id="menu-main" class="menu">
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
<li class="menu-item">Link</li>
</ul>
Menu
</nav>
</div>
</div>
</div>
CSS:
#header {
position: relative;
float: left;
padding: 0 0 0 0;
clear: both;
}
/*-----------------------------------------------
/* Header navigation
/*---------------------------------------------*/
.secondary-navigation {
display: block;
width: 100%;
float: left;
}
.secondary-navigation a {
vertical-align: top;
color: #F1F1F1;
font-weight: bold;
margin-top: 8px;
margin-bottom: 4px;
line-height:18px;
font-size: 15px;
border-bottom: 2px solid #333888;
}
.secondary-navigation a:hover, .secondary-navigation .sfHover {
color: #F1F1F1;
border-bottom: 2px solid #F1F1F1;
}
.secondary-navigation li li a { line-height: 1 }
.secondary-navigation a .sub {
font-size: 12px;
font-weight: normal;
color: #CFCFCF;
text-transform: none;
}
.menu-item-has-children > a:after {
content: "▼";
font-size: 10px;
color: #F1F1F1;
position: absolute;
right: 12px;
top: 22px;
}
.footer-navigation .menu-item-has-children > a:after { display: none }
.sub-menu .menu-item-has-children>a:after {
right: 0;
top: 17px;
}
.menu .current-menu-item > a { background: #fff }
.menu .current-menu-item > a:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #fff;
bottom: 0px;
left: 0;
z-index: 1;
}
#navigation {
margin: 0 auto;
font-size: 13px;
width: 100%;
float: left;
}
#navigation ul {
margin: 0 auto;
list-style: none; /*Added*/}
#navigation .menu { float: left; }
#navigation ul li {
float: left;
position: relative;
margin-left: 0;
}
#navigation > ul li:first-child a { }
#navigation > ul li:last-child a { border-right: 0 }
#navigation ul .header-search { float: right }
#navigation > ul > li:last-child { border-right: none }
#navigation ul li a, #navigation ul li a:link, #navigation ul li a:visited { display: block }
#navigation > ul > .current a {
background: transparent;
color: #555 !important;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li li li:hover ul, #navigation li li li li:hover ul {
opacity: 1;
left: -228px;
top: 0;
}
#navigation ul ul {
position: absolute;
width: 226px;
z-index: 400;
font-size: 12px;
color: #333888;
border: 1px solid #F1F1F1;
background: #FFFFFF;
padding: 0;
}
#navigation ul ul li {
margin-left: 0;
padding: 0 10%;
width: 80%;
color: #333;
}
#navigation ul ul li:hover { background: #F1F1F1 }
#navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
padding: 12px 0;
position: relative;
border-left: 0;
background: transparent;
border-right: 0;
text-transform: none;
line-height: 1.4;
margin-right: 0;
min-height: 100%;
}
#navigation ul ul li:last-child a { border-bottom: none }
#navigation ul ul {
opacity: 0;
left: -999em;
}
#navigation ul li:hover ul {
left: -1px;
opacity: 1;
top: 81px;
}
#navigation ul ul li:hover ul {
top: -1px;
left: -228px;
padding-top: 0;
}
#navigation ul ul ul:after { border-color: transparent }
I tried something like this, but it does not work for me.
You can use justify-content: space-between or justify-content: space-around flexbox property
ul {
display: flex;
justify-content: space-between;
border: 1px solid black;
list-style-type: none;
padding: 10px;
margin: 0;
}
<ul>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
<li>Random Link</li>
</ul>
I am making a drop down menu using only HTML and CSS. The menu components are successfully dropping down and everything looks good except when there are two or more components to an element. Then the second one covers the first. I was able to fix this by putting "position: absolute" in "#nav ul li:hover ul" (code below), but then the first item does not clear the menu bar.
Sorry for the terrible description.
<!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="CSS/index.css" />
<title>Index</title>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
Here is the CSS
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
position: absolute;
background-color: #ff0000;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
Please check the below code. I have slightly modified your css.
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
padding: 0;
background-color: #ff0000;
}
#nav ul li:hover ul {
display: block;
}
#nav ul li ul li{
background: none;
float: none;
display: block;
}
#nav ul li ul li a {
display: block;
float: none;
background-color: #ff0000;
}
#nav ul li ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
pls replace your entire css with this one
body {
background-size: 100%;
background-repeat: no-repeat;
}
#main {
background-color: #00CCFF;
width: 70%;
}
ul {
list-style: none;
}
#header {
width: 100%;
background-color: blue;
text-align: center;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0px 0px 0px 0px;
}
#nav {
width: 100%;
}
#nav * {
margin: 0px 0px 0px 0px;
display: block;
float: left;
font-size: 1vw;
border: 0px 0px 0px 0px;
background-color: #00CCFF;
}
#nav a {
text-decoration: none;
background-color: #00CCFF;
padding: 1vw 3vw 1vw 3vw;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
position: absolute;
top: 100%;
padding: 0;
margin: 0;
}
#nav ul li:hover ul {
display: block;
float: none;
clear: both;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
float: none;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
#nav ul li li {
float: none;
}
The main dropdown trigger should be #main, the dropdown #nav and #header both have the MAIN PARENT #main. Set #main 'position: relative;' and set a height let's say 50px 'height: 50px;' THEN set #nav 'position: relative; top: 100%;' and the height of #header to 50px as #main.
#main { position: relative; height: 50px; }
#header, #nav { position: absolute; }
#header { width: 100%; height: 100%; top: 0; left: 0; }
#nav { top: 100%; left: 0; min-height: 100px; } /*set it to left or right 0*/
Now the dropdown should trigger on #main:hover #nav { display: block !important; }
Now you must style your dropdown as you want
Modify the below css :
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
Complete code:
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<style>
body {
background-repeat: no-repeat;
background-size: 100% auto;
}
#main {
background-color: #00ccff;
width: 70%;
}
ul {
list-style: outside none none;
}
#header {
background-color: blue;
text-align: center;
width: 100%;
}
#header p {
font-size: 3vw;
font-weight: bold;
}
#header * {
margin: 0;
}
#nav {
width: 100%;
}
#nav * {
display: inline-block;
font-size: 1vw;
margin: auto;
}
#nav a {
background-color: #00ccff;
padding: 1vw 3vw;
text-decoration: none;
}
#nav ul li {
position: relative;
}
#nav ul li a {
color: white;
font-weight: bold;
}
#nav ul li ul {
display: none;
padding: 0;
position: absolute;
}
#nav ul li ul li {
display: block;
}
#nav ul li:hover ul {
clear: both;
display: block;
float: none;
}
#nav ul li:hover ul li a {
background-color: #ff0000;
display: block;
}
#nav ul li:hover ul li a:hover {
background-color: #ff6666;
}
.center {
margin: auto;
}
</style>
</head>
<body background="Images/Sun.jpg">
<div class="center" id="main">
<div class="center" id="header">
<br/><p>JOSEPH T. IOSUE</p><br/>
</div>
<div class="center" id="nav">
<ul>
<li>HOME</li>
<li>ABOUT ME</li>
<li>PROJECTS
<ul>
<li>PYTHON</li>
<li>HTML/CSS</li>
</ul>
</li>
<li><a href="#" download>RESUME</a></li>
<li>CONTACT
<ul>
<li>joe.iosue#yahoo.com</li>
<li>301-980-9525</li>
</ul>
</li>
</ul>
</div>
<div style="background-color:white;clear:both;background-color:#00CCFF">
</div>
</div>
</body>
</html>
this might be a bit complicated but I really need some help here..
I made a HTML menu and a css file for it. This was for a desktop version of my website.
I was in need of a mobile menu and due to my low skills of html and css, I asked a friend to make a mobile css file for the menu.
He ended up changing a little bit of code of the original HTML menu, this means that the mobile version is working, but I have to update my original css file for desktop a bit.
That's where the problem is, I just can't get it done, I can't find the right tag to update the file.
Original Desktop HTML menu and css file
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" class="show-menu" role="button">
<div id="Logo"><img src="Images/logo.png" alt="logo"></div>
<nav id="primary_nav_wrap">
<ul id="menu" class="menu">
<ul>
<li class="current-menu-item">home</li>
<li>informatie
<ul id="navinformatie">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul id="navverblijf">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul id="navbezienswaardigheden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</ul>
</nav>
</header>
The new HTML menu and mobile css file for it
body {
margin: 0;
}
main {
margin: 0 auto;
width: 480px;
}
/*menu*/
ul{
list-style-type:none;
margin:0;
padding:0;
position: static;
display: none;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
border-bottom:1px solid #CCC;
}
li a {
display:block;
min-width:180px;
height: 50px;
text-align: center;
line-height: 50px;
color: black;
background: white;
text-decoration: none;
}
li:hover a {
border-bottom: 1px solid black;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
border-bottom: 1px solid black;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
text-align:center;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
#Logo {
display: none;
}
.show-menu {
text-decoration: none;
color: white;
background: black;
text-align: center;
padding: 10px;
display: block;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
ul li, li a {
width: 100%;
text-align:left;
}
ul li a{
padding:0 10px;
}
li ul li a {
text-align:center;
}
<header>
<label for="show-menu" class="show-menu">Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div id="Logo"><img src="logo.png" alt="logo"></div>
<ul id="menu" class="mobile-top">
<li class="current-menu-item">home</li>
<li>informatie
<ul class="hidden">
<li>algemene info</li>
<li>wijken</li>
<li>goed om te weten</li>
</ul>
</li>
<li>verblijf
<ul class="hidden">
<li>hotels</li>
<li>hostels</li>
</ul>
</li>
<li>bezienswaardigheden
<ul class="hidden">
<li class="dir">toers</li>
<li class="dir">entertainment</li>
<li class="dir">musicals</li>
<li class="dir">sport</li>
</ul>
</li>
</ul>
</header>
<div style="clear:both;"></div>
So what I need now is some help to adjust the desktop css file to the new html menu, I can't figure it out where to start and what I should change.
You might want to use media queries to apply a different set of CSS for mobile and desktop. You could wrap your original css like this, to only apply the desktop CSS when the width is bigger than 600px.
#media (min-width: 600px) {
body {
font-family: Raleway;
margin: 0;
}
main {
margin: 0 auto;
width: 1280px;
}
/*Menu*/
ul.menu {
margin-bottom: 50px;
}
label.show-menu {
display: none;
}
input.show-menu {
display: none;
}
a:visited {
border: none;
color: black;
text-decoration: none;
}
ul.menu > ul {
margin-left: 80px;
border: none;
}
ul.menu > ul li
{
display: inline-block;
list-style-type: none;
margin: 0;
margin-left: 80px;
}
ul.menu > ul {
position: relative;
}
ul.menu > ul li {
font-size: 30px;
min-height: 1px;
line-height: 1.3em;
padding: 10px;
}
ul.menu > ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
ul.menu > ul ul li {
float: none;
font-size: 20px;
margin: 30px;
}
ul.menu > ul li:hover {
border-bottom: 1px solid black;
}
ul.menu > ul li:hover > ul {
visibility: visible;
}
ul.menu ul > li > ul > li {
margin: 0 10px 0 0;
position: relative;
padding: 0;
float: left;
}
ul.menu ul > li > ul > li > a {
padding: 10px 20px 10px 10px;
display: block;
}
#Logo {
float: left;
display: inline-block;
position: absolute;
width: 56px;
height: 79px;
}
}