I'm new with html and css but I'm making a responsive dropdown menu and I cant find why my menu/navigation bar won't center in the desktop version.
I found the menu from here and downloaded it.
Here is my code:
<style>
#import url(http://fonts.googleapis.com/css?family=roboto);
body {
background: #212121;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'roboto', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a { color: #FFF; }
a { color: #FFF; }
h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'roboto', sans-serif;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p { text-align: center; }
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
}
nav a {
display: block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #000000; }
nav a:hover { background-color: #000000; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav { margin: 0; }
.toggle + a,
.menu { display: none; }
.toggle {
display: block;
background-color: #254441;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
border: none;
}
.toggle:hover { background-color: #000000; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
nav ul ul ul a { background-color: #000000; }
nav ul li ul li .toggle,
nav ul ul a { background-color: #212121; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static;
}
}
#media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
</style>
<body>
<nav>
<div id="logo">Demo Page</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Service +</label>
Service
<input type="checkbox" id="drop-1"/>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Portfolio +</label>
Portfolio
<input type="checkbox" id="drop-2"/>
<ul>
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Works +</label>
Works
<input type="checkbox" id="drop-3"/>
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Python</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
</body>
Try this.
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
Method #1 is primarily using margin:auto; to center the nav. If your menu items (li/a) are a fixed width, then this method is probably the easiest way to center your nav. The essentail pieces of code used to center the nav are in bold.
Check out this site for more. Hope it helps!
Related
I have created a custom flexbox nav that works exactly the way I intended it to, except for one thing. I need to add dropdowns on a few of the navbar items and I have tried every resource I can. I know some of the formatting is a little strange, and that is just the way the Real Geeks platform makes one edit.
CSS
.bg-palette-navigationBackground-color {
background-color: transparent;
}
#import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body {
background: transparent;
font-size: 1.1em;
line-height: 1.45em;
color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Barlow Semi Condensed', sans-serif;
}
a {
color: #FFF;
}
p {
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #404041;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 500;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 0.9em;
line-height: 1.45em;
}
#logo img{
display: none;
padding: 0 15px;
float: left;
max-width: 25%;
}
#main-toggle {
cursor: pointer;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
padding-right: -10px;
}
.nav-icon {
background: #fff;
display: block;
height: 2px;
position: relative;
width: 18px;
}
.nav-icon:before,
.nav-icon:after {
background: #fff;
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
.nav-icon:before {
top: 5px;
}
.nav-icon:after {
top: -5px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #404041;
}
nav a {
display: block;
padding: 0 20px;
color: #FFF;
font-size: 1.1em;
line-height: 2.5em;
text-decoration: none;
}
nav ul li ul li:hover {
text-decoration: overline 3px #beaf87;
}
nav a:hover {
text-decoration: overline 3px #beaf87;
}
nav ul ul {
display: none;
position: relative;
}
nav ul li:hover>ul {
display: inherit;
}
nav ul ul li {
width: auto;
float: none;
display: list-item;
position: absolute;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li>a:after {
content: '';
}
li>a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
nav {
margin: 0;
}
nav ul{
float:none;
}
.toggle+a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: #404041;
padding: 0 20px;
color: #FFF;
font-size: 1.1em;
line-height: 2.5em;
text-decoration: none;
border: none;
}
.toggle:hover {
text-decoration: overline 3px #beaf87;
}
[id^=drop]:checked+ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav ul ul ul a {
background-color: #404041;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #404041;
}
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover>ul,
nav ul li:hover>ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}
}
HTML
<nav><label id="main-toggle" class="toggle" for="drop"><span class="nav-icon"></span></label> <input id="drop" type="checkbox" />
<ul class="menu">
<li>HOME</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">SELLER SERVICES</label> SELLER SERVICES <input id="drop-1" type="checkbox" />
<ul>
<li>SERVICES OVERVIEW</li>
<li>INSTANT HOME VALUATION</li>
</ul>
</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">BUYER SERVICES</label> BUYER SERVICES <input id="drop-1" type="checkbox" />
<ul>
<li>SERVICES OVERVIEW</li>
<li>FINANCING</li>
</ul>
</li>
<li>RELOCATION</li>
<li>MILITARY SERVICES</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">FIND AN AGENT</label> FIND AN AGENT <input id="drop-1" type="checkbox" />
<ul>
<li>BOILING SPRINGS OFFICE</li>
<li>SPARTANBURG OFFICE</li>
<li>GREENVILLE OFFICE</li>
</ul>
</li>
<li><!-- First Tier Drop Down --> <label class="toggle" for="drop-1">ABOUT</label> ABOUT <input id="drop-1" type="checkbox" />
<ul>
<li>CENTURY 21 BLACKWELL</li>
<li>CENTURY 21</li>
<li>CONTACT US</li>
</ul>
</li>
<li>CAREERS</li>
<li>AGENT PORTAL</li>
</ul>
</nav>
I'm afraid your code is quite messy and overcomplicated, it would be easier to redo it from scratch.
I'd suggest you take a look at this:
https://css-tricks.com/solved-with-css-dropdown-menus/
It might help you understand what you need to replicate to achieve the desired effect.
If you still want to edit your own code, you basically have to replicate the same ul > li structure even within your code, i.e.:
<li>
<label class="toggle" for="drop-1">TEST DPDWN</label>
<input id="drop-1" type="checkbox" />
<ul>
<li>SERVICES OVERVIEW</li>
<li>INSTANT HOME VALUATION</li>
</ul>
</li>
It might be a bit tough because you really need to clean your code. Also try to avoid absolute positioning and float unless absolutely necessary (you should just forget about float entirely)
I want to create a website which is responsive for every size of screen.
If I use the Chrome emulator, it works fine.
But if i call the website from my smartphone, I see the complete navigation bar instead of the resized navigation bar.
JSFiddle: https://jsfiddle.net/Simagdo/2b9f6nh1/
HTML
<nav>
<div id="logo">Fluidtechnik Fiedler</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop"/>
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Service +</label>
Service
<input type="checkbox" id="drop-1"/>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Portfolio +</label>
Portfolio
<input type="checkbox" id="drop-2"/>
<ul>
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Works +</label>
Works
<input type="checkbox" id="drop-3"/>
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Python</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
CSS:
#import url(http://fonts.googleapis.com/css?family=roboto);
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'roboto', sans-serif;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p {
text-align: center;
}
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #254441;
height: 150px;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
text-decoration: none;
}
nav a {
display: block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
nav a:hover {
background-color: #000000;
}
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:after {
content: ' +';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
.toggle + a,
.menu {
display: none;
}
.toggle {
display: block;
background-color: #254441;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #000000;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
You should add this mate tag and media all in css
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style-media.css" media="all">
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
Any suggestions for this one?
I've added a background image of an arrow for any list item that has a drop down with the class of 'dropable' now because of this the list items are no longer evenly spaced to account for the added arrow, any suggestion on how to solve this as had no success so far.
CodePen: http://codepen.io/nickelse/pen/GJezQX?editors=110
HTML:
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
CSS:
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat 93% center;
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
Cheers
Nick
Instead of using images for caret, I would suggest using fonts from font-awesome.
This works pretty good
/* CSS Document */
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
#import url(http://fonts.googleapis.com/css?family=Bree+Serif);
body {
background: #212121;
font-family: 'Open Sans', sans-serif;
margin: 0;
}
.wrapper {
background: #454545;
border-bottom: 3px solid #666;
width: 100%;
}
.container {
margin: 0 auto;
width: 1000px;
}
nav {
margin: 0;
font-size: 0;
text-align: center;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
}
nav a {
display: block;
padding: 0 20px;
color: #fff;
font-size: 14px;
line-height: 56px;
text-decoration: none;
}
nav a:hover {
background-color: #000000;
}
nav > ul > li {
background: url(http://i.imgur.com/ijNENpN.png) no-repeat left 50%;
}
nav > ul > li:first-child {
background: none;
}
nav li:hover + li {
background-image: none;
}
nav > ul > li:hover > a {
background-color: #666;
}
nav ul li:hover > ul {
display: block;
text-align: left;
}
nav ul ul {
display: none;
position: absolute;
top: 56px;
background-color: #666;
}
nav ul ul li {
border-top: 1px solid #454545;
width: 270px;
float: none;
display: list-item;
position: relative;
}
nav ul ul li:first-child {
border-top: none;
}
nav ul ul li a {
line-height: 42px;
}
nav ul > li.dropable > a:after {
/* display:inline;
content: "\00a0\00a0\00a0\00a0";*/
/* background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;*/
}
nav li.dropable li a {
background-image: none;
}
nav li.dropable li a:hover {
background: #333;
}
/*
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="wrapper">
<div class="container">
<nav>
<ul class="clearfix">
<li>Home</li>
<li class="dropable">WordPress <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li class="dropable">Web Design <i class="fa fa-caret-down"></i>
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials</li>
</ul>
</li>
<li>Graphic Design</li>
<li>Inspiration</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
</div>
</div>
I would take advantage of the :after pseudo class in CSS. The margins become evenly spaced and you forgo having to put the image into the navigation unnecessarily.
CodePen
nav ul > li.dropable > a:after {
display:inline;
content: "\00a0\00a0\00a0\00a0";
background:url(http://i.imgur.com/5Clqhz5.png) no-repeat center center;
}
Figured it out, cheers anyway.
I did this:
nav li.dropable a {
background: url(http://i.imgur.com/5Clqhz5.png) no-repeat right 20px center ;
padding-right: 34px;
}
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;
}
}