So i followed this tutorial (http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/) and made a responsive menu. But it's not 100% wide and i can't seem to make it so. Can you guys tell me how to fix it?
Here is the code:
https://jsfiddle.net/oyx9r4kh/1/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS-1.css">
</head>
<body>
<div class="nav">
<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>
<div class="hero">
<img src="http://www.shawcontractgroup.com.au/wp-content/uploads/2013/08/environmental-certifications.jpg">
</div>
CSS:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*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*/
.nav {
width: 100%;
display: block;
float: left;
clear: both;
background: #2f3036;
margin-top: 0;
margin-bottom: 0.5%;
}
.menu {
width: 100%;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
width: 100%;
min-width:170px;
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;
opacity: 0.9;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 170px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.hero {
margin-top: 50px;
display: block;
clear: both;
float: left;
width: 100%;
}
.hero img {
float: left;
max-width: 100%;
height: auto;
}
Here is your working and clean code. The navigation is in center and you can preview in full-screen.
Explanation
Position: absolute should be in your dropdown navigation
Need not to use display:inline-block and float together.
Always clear the float after the last floated element so that parent element can wrap it properly.
Set the #menu id to max-width and set the margin: auto
Suggestion : You should use media-queries for responsive navigation.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.clear {
clear: both
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*Create a horizontal list with spacing*/
.nav-wrap {
background: #2f3036;
}
.nav {
width: 100%;
background: #2f3036;
margin-top: 0;
margin-bottom: 0.5%;
}
#menu {
max-width: 855px;
margin: auto;
}
li {
margin-right: 1px;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 170px;
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;
position: absolute;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
opacity: 0.9;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 170px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
.col {
float: left;
width: 30%;
height: auto;
margin: 1.5% 1.5%;
border-radius: 10px;
border: 1px solid #FFF;
}
.col img {
max-width: 100%;
height: auto;
}
.col p {
text-align: center;
margin: 10px;
text-shadow: 1px 1px #ffF;
}
div.col:hover {
background-color: #FFFDD6;
}
<body>
<div class='nav-wrap'>
<div class="nav">
<ul id="menu">
<li>Home
</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are
</li>
<li>What We Do
</li>
</ul>
</li>
<li>
Products ￬
<ul class="hidden">
<li>Compounds
</li>
<li>Oils
</li>
<li>Illustration
</li>
</ul>
</li>
<li>News
</li>
<li>Contact
</li>
<div class='clear'></div>
</ul>
</div>
</div>
</body>
It's because you have position:absolute; on the ul. This takes it out of the .nav flow making it's height 0. So you either need to explicitly give the .nav a height, or make the ul a different position type.
You need to add a media call to your CSS to change the ul format on smaller screen sizes.
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
}
Related
I am using the pure css menu from this site. It works fine, but if I try to center or right-align the menu when it is not in 'hamburger menu' mode, I cannot get it to work.
I have tried the solutions from this stackoverflow question but it messes up the menu. The li-elements get placed beklow each other and/or the dropdown menus appear in wrong places.
So how can I center or right align this menu without messing it up? Any help is appreciated!
/*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;
}
/*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;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<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>
</body>
</html>
You can use flexbox to align your content:
#media (min-width: 768px) {
#menu {
width: 100%;
display: flex;
justify-content: center; /* or use end */
}
}
You can use this code
body {
margin: 0;
}
/*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;
}
/*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;
}
ul.hidden {
width: 20%;
}
ul.hidden li a {
display: block;
height: auto;
text-align: center;
line-height: normal;
padding: 15px 10px;
}
/*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;
}
ul.hidden {
width: 100%;
}
}
<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>
I am trying to center my menu, but I don't know why it isn't working. Can someone help me?
body {
margin: 0;
padding: 0;
}
/*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;
}
/*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;
}
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<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>
</body>
</html>
Thanks for helping.
You are declaring all of your ul elements as position:absolute. You will need to change your ul id="menu" item to static positioning, and also give it a defined width since you are defining the width of your li a elements. Check your updated fiddle here. Simply add the following to your css:
#menu {
width:705px;
margin:0 auto;
display:block;
position:static;
}
I am trying to create a nav-bar using HTML and CSS. However, the nav-Bar doesn't stretch to the end of the page like I would like it to. I have tried using padding-left-: 0px and padding-right: 0px; however this does not work.
Here is my work so far:
$banner-height: 50px;
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
height: $banner-height * 2;
position: fixed;
width: 100%;
top: 0;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
line-height: $banner-height;
top: 0;
width: 100%;
background: #FEFFB7;
box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.13);
}
.nav-bar {
top: $banner-height;
/* Rectangle 1: */
background: #FFFFFF;
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.11), 0px 4px 6px 0px rgba(0,0,0,0.11);
width: 100%;
line-height: $banner-height;
text-align: center;
}
.nav-up {
top: -$banner-height;
}
//-------------------------------------------------------
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: center;
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-left: 0px;
padding-right: 0px;
}
/*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-left: 0px;
padding-right: 0px;
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;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<nav class="nav-down">
<div class="banner animated">I'm a banner</div>
<div class="nav-bar"> <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>
</ul></div>
</nav>
</body>
</html>
The problem:
(View in full screen to see the full problem).
Updated: Solution in snippet, flexbox and paddding left for the UL set to 0.
Seeing some inconsistent behavior with the embedded snippet, so here is a fiddle:
https://jsfiddle.net/2u1kzy3c/
$banner-height: 50px;
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
height: $banner-height * 2;
position: fixed;
width: 100%;
top: 0;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
line-height: $banner-height;
top: 0;
width: 100%;
background: #FEFFB7;
box-shadow: inset 0px -1px 0px 0px rgba(0,0,0,0.13);
}
nav ul#menu {
padding-left: 0;
display: flex;
}
nav ul li {
flex-grow: 1;
}
.nav-bar {
top: $banner-height;
/* Rectangle 1: */
background: #FFFFFF;
box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.11), 0px 4px 6px 0px rgba(0,0,0,0.11);
width: 100%;
line-height: $banner-height;
text-align: center;
}
.nav-up {
top: -$banner-height;
}
//-------------------------------------------------------
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: center;
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-left: 0px;
padding-right: 0px;
}
/*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-left: 0px;
padding-right: 0px;
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*/
nav ul#menu {
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>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<nav class="nav-down">
<div class="banner animated">I'm a banner</div>
<div class="nav-bar"> <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>
</ul></div>
</nav>
</body>
</html>
I am creating a responsive menu and use only html and css for this.
But when I try to add content to the site it starts the div in the menu. I already tried to use overflow:hidden on the div around the entire menu but for some reason this doesn't work.
I created another menu and used overflow:hidden on the div around the menu and that worked but sadly can't used it because it has no dropdown menu.
I hope I provided you with enough information to help me other wise just asked!
Thanks.
#font-face
{
font-family: 'Gautami';
src: url('gautami.ttf');
}
body {
padding: 0px;
margin: 0px;
}
#menu {
width: 100%;
}
/*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;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Gautami', Arial;
color: #2072ba;
text-decoration: none;
}
/*Hover state for top level links*/
.MenuLink:hover {
background: #e5e6e8;
}
/*Style for dropdown links*/
li:hover ul a {
background: #2072ba;
color: white;
height: 40px;
line-height: 40px;
border-bottom: 1px solid white;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #e5e6e8;
color: #2072ba;
}
/*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;
}
#right {
float: right;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #2072ba;
text-align: center;
padding: 25px 0px 25px 0px;
display: none;
width: 100%;
border-bottom: solid 1px #2072ba;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
.content {
background-color: grey;
bottom: 0px;
margin: 0% 10% 0% 10%;
}
/*Responsive Styles*/
#media screen and (min-width: 1201px) {
#MenuDiv {
overflow: hidden;
}
#menu {
border-bottom: 1px solid #2072ba;
}
}
#media screen and (max-width: 1200px)
/*increase your windows size to see my problem or decrease the max width and min width until your can see the large menu*/
{
#MenuLinkImg {
display: none;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
padding: 0px;
overflow: hidden;
}
/*Create vertical spacing*/
li {
border-bottom: solid 1px #2072ba;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#right {
float: none;
}
.content {
margin: 0px 5% 0% 5%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="DD.css">
</head>
<body>
<div id="MenuDiv">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a class="MenuLink" href="#">Home</a></li>
<li><a class="MenuLink" href="#">Diensten</a></li>
<li><a class="MenuLink" href="#">Keurmerken</a></li>
<div id="right">
<li>
<a class="MenuLink" href="#">Mijn account ￬</a>
<ul class="hidden">
<li><a class="MenuLinkDD" href="#">Diensten</a></li>
<li><a class="MenuLinkDD" href="#">Account informatie</a></li>
</ul>
</li>
<li><a class="MenuLink" href="#">Inloggen</a></li>
</div>
</ul>
</div>
<div class="content">
<div id="text">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestttesttest esttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttestt esttesttesttest testtesttesttesttesttesttestt esttesttest testtesttesttesttesttesttesttesttesttesttesttestte sttesttes ttesttestt esttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
</body>
</html>
What you want has nothing to do with overflow.
Because on devices wider than 1201px your menu has position:absolute, you are removing it from normal flow of the document. If you don't want it to be rendered overlapping the page content, you need to set a top-padding on your content and place the menu in the provided space:
#media (min-width: 1201px){
body {
padding-top: 51px;
}
#menu {
top: 0;
}
}
#font-face
{
font-family: 'Gautami';
src: url('gautami.ttf');
}
body {
padding: 0px;
margin: 0px;
}
#menu {
width: 100%;
}
/*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;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Gautami', Arial;
color: #2072ba;
text-decoration: none;
}
/*Hover state for top level links*/
.MenuLink:hover {
background: #e5e6e8;
}
/*Style for dropdown links*/
li:hover ul a {
background: #2072ba;
color: white;
height: 40px;
line-height: 40px;
border-bottom: 1px solid white;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #e5e6e8;
color: #2072ba;
}
/*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;
}
#right {
float: right;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #2072ba;
text-align: center;
padding: 25px 0px 25px 0px;
display: none;
width: 100%;
border-bottom: solid 1px #2072ba;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
.content {
background-color: grey;
bottom: 0px;
margin: 0% 10% 0% 10%;
}
/*Responsive Styles*/
#media screen and (min-width: 1201px) {
#MenuDiv {
overflow: hidden;
}
#menu {
border-bottom: 1px solid #2072ba;
top: 0;
}
body {
padding-top: 51px;
}
}
#media screen and (max-width: 1200px)
/*increase your windows size to see my problem or decrease the max width and min width until your can see the large menu*/
{
#MenuLinkImg {
display: none;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
padding: 0px;
overflow: hidden;
}
/*Create vertical spacing*/
li {
border-bottom: solid 1px #2072ba;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#right {
float: none;
}
.content {
margin: 0px 5% 0% 5%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown menu </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="DD.css">
</head>
<body>
<div id="MenuDiv">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a class="MenuLink" href="#">Home</a></li>
<li><a class="MenuLink" href="#">Diensten</a></li>
<li><a class="MenuLink" href="#">Keurmerken</a></li>
<div id="right">
<li>
<a class="MenuLink" href="#">Mijn account ￬</a>
<ul class="hidden">
<li><a class="MenuLinkDD" href="#">Diensten</a></li>
<li><a class="MenuLinkDD" href="#">Account informatie</a></li>
</ul>
</li>
<li><a class="MenuLink" href="#">Inloggen</a></li>
</div>
</ul>
</div>
<div class="content">
<div id="text">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestttesttest esttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttesttesttesttesttesttestt esttesttesttest testtesttesttesttesttesttestt esttesttest testtesttesttesttesttesttesttesttesttesttesttestte sttesttes ttesttestt esttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte sttesttestte sttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>
</div>
</body>
</html>
As a side-note, your CSS is way too general. For starters, you don't want all unordered lists in your website to have position:absolute
Hi I have this navbar and wondering how to alight it to the right.
I've tried float:right but doesn't work. Also tried div align but not working
as well. I'm new to css though.
<div align="right">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
</ul>
</div>
css
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 01 27, 15, 9:58:38 AM
Author : jefloresca
*/
/*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: right;
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;
}
/*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;
}
}
Here's the link to codepen: http://codepen.io/anon/pen/JoJqMZ
The align="right" attribute is deprecated. Don't use it!
Either remove the absolute positioning on the ul element, and then float the element to the right, or add right: 0.
Updated Example
<div>
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
</ul>
</div>
ul {
list-style-type: none;
margin: 0;
padding: 0;
float: right;
}
li {
display: inline-block;
float: right;
margin-right: 1px;
}
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;
}
li:hover a {
background: #19c589;
}
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu {
display: block;
}
#media screen and (max-width : 760px) {
ul {
position: static;
display: none;
}
li {
margin-bottom: 1px;
}
ul li, li a {
width: 100%;
}
.show-menu {
display: block;
}
}
Found an answer on my position: relative not absolute
You need to add "width: 100%" in file css.
Code:
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
width: 100%;
}