I ran into a small problem while creating my website where an anonymous padding appears between my banner and nav-bar:
Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
padding-top: 0px;
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}
nav ul#menu {
padding-left: 0;
display: flex;
padding-top: 0px;
}
nav ul li {
flex-grow: 1;
}
.nav-bar {
/* 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%;
text-align: center;
}
//-------------------------------------------------------
/*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;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
</head>
<body>
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></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>
*View in full screen to see it.
Is there a way I can fix this? Thank you in advance!
As I have tried adding padding-top: 0px; to the nav bar so it could stick to the banner but it didn't work. My question is not a duplicate as the other questions problem is under a different circumstance.
You need to do two things. 1) set the vertical alignment on your image to top so it removes the gap reserved for descender text elements, and 2) remove the margin on your <ul>
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
padding-top: 0px;
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}
nav ul#menu {
padding-left: 0;
display: flex;
padding-top: 0px;
}
nav ul li {
flex-grow: 1;
}
.nav-bar {
/* 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%;
text-align: center;
}
//-------------------------------------------------------
/*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;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
vertical-align:top;
}
#menu {
margin:0;
}
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></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>
You can add
img.hero-image {
float: left;
}
img.hero-image {
float: left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
nav {
padding-top: 0px;
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
box-shadow: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.13);
}
nav ul#menu {
padding-left: 0;
display: flex;
padding-top: 0px;
}
nav ul li {
flex-grow: 1;
}
.nav-bar {
/* 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%;
text-align: center;
}
//-------------------------------------------------------
/*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;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
</style>
</head>
<body>
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></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>
Add this to your styling to remove default margins and padding.
* {
padding: 0px;
margin: 0px;
}
ul is the culprit. You need to add margin-top to 0 to your ul menu selector.
nav ul#menu {
padding-left: 0;
display: flex;
padding-top: 0px;
margin-top: 0;
}
To remove the tiny gap, as #j08691 mentioned, add the vertical-align: top; to your hero-image class.
Related
I am trying to create a nav-bar however when I run my project random lines appear between the nav-elements.Like this:
Project:
https://codepen.io/anon/pen/jKWbRv
As you can see I have used HTML and CSS to program this, however, I can not remove the lines and there is also an unnecessary line at the last Contact element.
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
margin: 0px 0px 0px 0px;
}
nav {
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
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 {
/* 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%;
text-align: center;
}
//-------------------------------------------------------
/*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;
}
/*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: 0px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
vertical-align: top;
}
#menu {
margin: 0;
}
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></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>
This is not a duplicate of How do I remove the space between inline-block elements? as I have tried either solution but it still has not worked.
You have this bunch of CSS code,
li {
display: inline-block;
float: center;
margin-right: 1px;
}
Remove the margin-right:1px and remove invalid float: center; - which is not a valid float property - see docs for float, and make it like this
li {
display: inline-block;
}
Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
#import 'https://fonts.googleapis.com/css?family=Work+Sans:400,500,900';
body {
margin: 0px 0px 0px 0px;
}
nav {
position: fixed;
width: 100%;
transition: top 0.2s ease-out;
}
.banner {
text-align: center;
width: 100%;
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 {
/* 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%;
text-align: center;
}
//-------------------------------------------------------
/*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;
}
/*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;
}
/*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: 0px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
.hero-image {
/* The image used */
/* Set a specific height */
height: 50%;
width: 100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
vertical-align: top;
}
#menu {
margin: 0;
}
</style>
</head>
<body>
<nav>
<div class="banner animated"><img class="hero-image" src="https://picsum.photos/1080/200/?random"></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 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
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%;
}
}
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%;
}