I'm trying to create a Responsive mobile navigation menu.
I'm having a few problems, on trying to work out how to do everything.
Wanted to know how to hide my Responsive drop down menu once i have clicked on a link.
Also how would i style it so that when its a full size website the menu items show next to each other on the top right of screen?
#NavBar {
position: fixed;
margin: 0 auto;
padding: 0;
top: 0;
width: 100%;
color: #fff;
background-color: #3498db;
z-index: 1;
}
/*Create a horizontal list with spacing*/
li {
list-style-type: none;
height: 40px;
}
/*Style for menu links*/
li a {
height: 50px;
text-align: center;
color: #fff;
text-decoration: none;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
/* position: static;*/
display: none;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
<div id="NavBar">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
Related
I am working on a project and I have created one navbar. In this dropdown menu also present. In this dropdown, the hover effect is there.
Now I am trying to click event and open and close dropdown's submenu. But not working. I am using only HTML and CSS.
Now on hover dropdown is open. But I am trying to do:
open and close drop-down when I click.
My code is:
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li>Products
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
You can use a checkbox (<input type="checkbox">) with the adjacent sibling combinator (+) to toggle the sub menu. Convert the link (a) to a label. Set the label's for attribute to the input's id, and hide the input using display: none.
/* define a fixed width for the entire menu */
.navigation {
width: 300px;
}
/* reset our lists to remove bullet points and padding */
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a,
.mainmenu label {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu input {
display: none;
}
/* add hover behaviour */
.mainmenu a:hover {
background-color: #C5C5C5;
}
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu :checked+.submenu {
display: block;
max-height: 200px;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ddd;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color: #993;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
}
<nav class="navigation">
<ul class="mainmenu">
<li>Home</li>
<li>About</li>
<li><label for="products">Products</label><input type="checkbox" id="products">
<ul class="submenu">
<li>Tops</li>
<li>Bottoms</li>
<li>Footwear</li>
</ul>
</li>
<li>Contact us</li>
</ul>
</nav>
This is your solution
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.navigation{
width: 300px;
}
.mainmenu,
.submenu {
list-style: none;
padding: 0;
margin: 0;
}
.mainmenu a {
display: block;
background-color: #CCC;
text-decoration: none;
padding: 10px;
color: #000;
}
.mainmenu a:hover {
background-color: #C5C5C5;
}
/**/
.dropbtn {
background-color: #ccc;
color: #000;
border: none;
cursor: pointer;
padding: 10px;
display: block;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #ccc;
}
.dropbtn:hover{
background-color: #C5C5C5;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ddd;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
width: 300px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #993;}
.show {display: block;}
<nav class="navigation">
<ul class="mainmenu">
<li><a>Home</a></li>
<li><a>About</a></li>
<div class="dropdown">
<li onclick="myFunction()" class="dropbtn">Products</li>
<div id="myDropdown" class="dropdown-content">
<a>Tops</a>
<a>Bottoms</a>
<a>Footwear</a>
</div>
</div>
<li>Contact us</li>
</ul>
</nav>
u can achieve with javascript and this is right solution
I'm having a hard time practicing and can't figure this out to save my life. 7 hours trying to find solutions to no avail! Nothing will budge.
I simply want the text to be in the middle like this site or this site a link. Instead of all white I want an opaque black box with text over it. My text is just all over the place. And the logo on the left and the nav bar/ menu to the right of it.
https://imgur.com/a/1oCKaco
Link to the code.
https://codepen.io/admitdefeat/pen/BEyMzK
HTML
<div class="post-body">
<p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
its look and how you feel when you see it!</p>
</div>
CSS
post-body{
padding-top: 3rem;
position: relative;
box-sizing: inherit;
}
div {
display: block;
}
Thank you.
I've watched videos on how positioning, divs, containers and tried putting information together.However, there is something I'm not understanding.
I want the page to be aligned and positioned.
Just don't get stressed out, if you want the menu to be always on top right just give it the rules:
`#menu{
position: fixed;
right: 5px; /* or the amount you want */
top: 5px; /* or the amount you want */
}`
apply the same logic on the logo, and finally add text-align: center; for your text to be centered in the page, and voila !
In your .post-body class, remove the padding-top: 3rem and position: relative as they are messing up your formatting. Then add text-align: center to center the text on the page, and add margin: 100px 20% to restrict the positioning of the text. You can change both of these values to whatever you desire, depending on the positioning you are aiming for. The first value (100px) is how far from the top you want the text to begin (y-axis), and the second value (20%) is how far from the left and right edge you want the text to be (x-axis).
Note that using a % value for the second value will dynamically resize the text for you depending on the screen size. In this case, it will always be 20% of the screen size from the left and right edge of whatever device you are using.
body {
font-family: "Basier";
font-size: 20px;
}
html {
background: url(summer.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.post-body {
box-sizing: inherit;
text-align: center;
margin: 100px 20%;
}
div {
display: block;
}
#font-face {
font-family: "Basier";
src: url("basiersquare-regular-webfont.ttf");
}
.logo {
width: 150px;
height: 140 px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
margin-right: 0 px;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Basier";
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #F4D03F;
}
/*Style for dropdown links*/
li:hover ul a {
background: #F4D03F;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: f1c40f;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Basier";
text-decoration: none;
color: #F4D03F;
background: #F4D03F;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CLT Designs</title>
<link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<link href="designs.css" rel="stylesheet">
</head>
<body>
<img class="logo" src="clt.png" alt="logoclt">
<h2> RENOVATION PROJECT</h2>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="hidden">
<li>What is Design + Build?</li>
<li>Our Process</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="post-body">
<p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
its look and how you feel when you see it!</p>
</div>
</body>
</html>
I tried doing it with absolute and relative positioning, hope this solves your question. i modified your code just a little bit.
Check this codepen
https://codepen.io/jls314/pen/oOgVGz
You wanted the logo to the left and the navbar to the right so I put them together in a header tag and position them.
<header>
<img class="logo" src="clt.png" alt="logoclt">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>
Services
<ul class="hidden">
<li>What is Design + Build?</li>
<li>Our Process</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</header>
this is the CSS:
header {
position: relative;
}
.logo {
position: absolute;
left: 10px;
width: 150px;
height: 140px;
float: left;
}
#menu {
position: absolute;
right: 10px;
}
.post-body{
position: relative;
top: 200px;
box-sizing: inherit;
width: 50%;
margin: 0px auto;
background: rgba(0,0,0,.7);
color: white;
}
How can get a navbar at the top of the page that shrinks when a visitor scrolls down, and without using Javascipt?
This is done here, for example. It would be fine for it to shrink discretely from wide to narrow, rather than shrink continuously as on that site.
(I don't this is a duplicate, because I am specifically asking for this to be done without using Javascript.)
What you are asking for is unfortunately outright impossible without JavaScript, as CSS has no way of knowing when the users scrolls down the page.
However, it is possible to shrink a header based on cursor position (which is almost the same thing) in pure CSS. See this answer by Mr Lister.
Hope this helps!
i this this will help you
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio </li>
<li>News</li>
<li>Contact</li>
</nav>
I have a problem and its been killing me, been following various tutorials to create my navigation bar for my website but cant seem to get it right. The problem i have is that i cant position my navigation to be next to my logo when the screen is large. Everytime i shrink it down then click my menu button it appears in the same position as the last screen so im unable to see it.
Any help from experiance users will be much appreciated, the CSS & HTML i have is below.
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: fixed;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#nav_wrapper{
}
#logo img{
max-width: 100%;
height: auto;
}
#nav{
background-color: #222;
width: 100%;
top:0px;
left:0px
}
<div id="pageWrapper"> <!-- page wrapper-->
<div id="nav"> <!-- nav-->
<div id="logo">
<img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div>
<div id="nav_wrapper"> <!-- nav wrapper-->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- end of nav wrapper-->
</div> <!-- end of nav-->
</div> <!-- end of page wrapper-->
Follow these steps:
remove position: fixed; from your ul
use float: left on logo.
use float: right on nav.
code:
#logo {
float: left;
}
#nav_wrapper {
float: right;
}
and for smaller resolution:
#media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}
#logo {
float: left;
}
#nav_wrapper {
float: right;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#nav_wrapper{
}
#logo img{
max-width: 100%;
height: auto;
}
#nav{
background-color: #222;
width: 100%;
top:0px;
left:0px
}
<div id="pageWrapper"> <!-- page wrapper-->
<div id="nav"> <!-- nav-->
<div id="logo">
<img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div>
<div id="nav_wrapper"> <!-- nav wrapper-->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- end of nav wrapper-->
</div> <!-- end of nav-->
</div> <!-- end of page wrapper-->
1st of all you have to remove the max-width for the logo and the auto height as well, also you'll need to float the image container "DIV" to the left to float the navigation menu to its right, so you will need to do it like the following
CSS:
#nav_wrapper{
overflow:auto;
}
#logo img{
float:left;
}
the rest will be the same :)
I've done lots of searching and testing on possible solutions, but can't get this responsive menu to sit central.
/**********HEADER ***************************/
.headerbar {
display:inline-block;
width:100%;
background:#007700;
margin-bottom:0px;
}
/******************/
/*********** NAVBACKER *********************/
.navback {
display:block;
height:32px;
border:2px solid grey;
background:grey;
margin:auto;
}
/***************/
/* START OF NAV STYLES ****************************/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #003300;
text-decoration: none;
border:1px solid green;
}
/*Hover state for top level links*/
li:hover a {
background: #006600;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #006600;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #003300;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
height:12px;
}
}
/* END OF NAV STYLES ****************
<div class="headerbar">
<h1>Logo and some text</h1>
</div>
<div class="navback">
<!-- START OF NAVIGATION MENU -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
Latest ￬
<ul class="hidden">
<li>Pictures</li>
<li>Comments</li>
<li>Threads</li>
</ul>
</li>
<li>
Explore ￬
<ul class="hidden">
<li>Counties</li>
<li>Towns</li>
<li>Attractions</li>
<li><a href='#'>Picture Tours</a></li>
</ul>
</li>
<li>Upload</li>
<li>Login</li>
</ul>
</div>
<!-- END OF NAVIGATION MENU -->`enter code here`
Here is where I have been trying to get it to work: http://jsfiddle.net/
Every time I change the position:absolute, the menu when hovered, formats wrong. I've also tried margin:0 auto; etc but nothing I've tried will work, and I've tried removing the float. Any help is hugely appreciated.
Tree
Put
display: table;
margin: 0 auto;
in ul tag, like this:
ul {
list-style-type:none;
margin: 0;
padding:0;
display: table;
margin: 0 auto;
}
Here is fiddle - http://jsfiddle.net/p5oypc72/70/