I'm currently cleaning up my code for a responsive menu, but for some reason the output changes when I add the id to the nav item.
#charset "UTF-8";
/* CSS Document */
/*=========== MAIN CODE ===========*/
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
}
div#container {
width: 100%;
}
/*=================================*/
/*=========== MAIN MENU ===========*/
div#menu-wrapper {
width: 100%;
text-align: center;
position: fixed;
z-index: 1000;
}
div#wrapper {
width: 100%;
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
/* Hide the navigation menu by default */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
padding: 14px 20px;
border: none;
font-family: 'Zilla Slab', serif;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.label {
text-align: left;
}
.toggle:hover {}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
nav#main {
background: rgba(0, 0, 0, 1);
}
nav#main:after {
content: "";
display: table;
}
nav#main ul {
list-style: none;
position: relative;
}
nav#main ul li {
display: block;
}
nav a {
display: block;
padding: 14px 20px;
font-family: 'Zilla Slab', serif;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
/* Hide Dropdown */
nav ul ul {
display: none;
position: static;
color: #ffffff;
}
/* Dropdown */
nav#main ul ul li {
display: block;
position: relative;
width: 100%;
}
/* '+' = Dropdown symbol
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
/* Media Queries
--------------------------------------------- */
#media all and (min-width: 768px) {
nav#main ul li {
display: inline-block;
}
/* Display Dropdowns on Hover */
nav#main ul li:hover > ul {
display: block;
}
nav#main ul ul {
display: none;
position: absolute;
}
nav#main ul ul li {
display: list-item;
}
/* Hide the navigation menu by default */
.toggle + a,
.menu {
display: inherit;
}
.toggle {
display: none;
}
}
/*=================================*/
<body>
<div id="container">
<div class="menu-wrap" id="wrapper">
<nav id="main">
<label for="drop" class="toggle label">
<div id="hamburger">☰</div>
</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Portfolio</label>
Portfolio
<input type="checkbox" id="drop-1" />
<ul>
<li>Photography
</li>
<li>Visuals
</li>
<li>Webdesign
</li>
<li>Videos
</li>
<li>Papers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</div>
</body>
I'm trying to add '#main' to the css nav items (because my nav item has the id 'main') so that the css code is specific for the main menu, since some of the pages of my website require a secondary menu and I want to keep those apart in my code, obviously. There are two css-items that change the output when changing nav to nav#main, the rest I could change without any issues:
nav a {
display: block;
padding: 14px 20px;
font-family: 'Zilla Slab', serif;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
nav ul ul {
display:none;
position: static;
color: #ffffff;
}
The issues:
- When changing nav a to nav#main a: the portfolio tag is displayed double (both the a and the label one).
- When changing nav ul ul to nav#main ul ul: the click-action to display the dropdown underneath 'portfolio' doesn't work anymore.
The issues are seen this fiddle: https://jsfiddle.net/2z9gdabt/1/
By adding an ID (or class, for that matter) I'm only calling on that specific element, right? So why does the output change when specifically calling that element, when there are no other nav elements?
I'm sure I'm missing something, but can someone explain to me why the output changes when adding an ID to the css code?
It's a CSS specificity issue. Adding an id increases specificity, so your other rules that hide .toggle + a and show the submenu via [id^=drop]:checked + ul don't have enough specificity to override the default rules. Just add nav#menu to those selectors, too.
https://jsfiddle.net/2z9gdabt/2/
#charset "UTF-8";
/* CSS Document */
/*=========== MAIN CODE ===========*/
* {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
min-height: 100%;
}
div#container {
width: 100%;
}
/*=================================*/
/*=========== MAIN MENU ===========*/
div#menu-wrapper {
width: 100%;
text-align: center;
position: fixed;
z-index: 1000;
}
div#wrapper {
width: 100%;
text-align: center;
}
.toggle,
[id^=drop] {
display: none;
}
/* Hide the navigation menu by default */
nav#main .toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
padding: 14px 20px;
border: none;
font-family: 'Zilla Slab', serif;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.label {
text-align: left;
}
.toggle:hover {}
/* Display Dropdown when clicked on Parent Lable */
nav#main [id^=drop]:checked + ul {
display: block;
}
nav#main {
background: rgba(0, 0, 0, 1);
}
nav#main:after {
content: "";
display: table;
}
nav#main ul {
list-style: none;
position: relative;
}
nav#main ul li {
display: block;
}
nav#main a {
display: block;
padding: 14px 20px;
font-family: 'Zilla Slab', serif;
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
/* Hide Dropdown */
nav#main ul ul {
display: none;
position: static;
color: #ffffff;
}
/* Dropdown */
nav#main ul ul li {
display: block;
position: relative;
width: 100%;
}
/* '+' = Dropdown symbol
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
*/
/* Media Queries
--------------------------------------------- */
#media all and (min-width: 768px) {
nav#main ul li {
display: inline-block;
}
/* Display Dropdowns on Hover */
nav#main ul li:hover > ul {
display: block;
}
nav#main ul ul {
display: none;
position: absolute;
}
nav#main ul ul li {
display: list-item;
}
/* Hide the navigation menu by default */
.toggle + a,
.menu {
display: inherit;
}
.toggle {
display: none;
}
}
/*=================================*/
<body>
<div id="container">
<div class="menu-wrap" id="wrapper">
<nav id="main">
<label for="drop" class="toggle label">
<div id="hamburger">☰</div>
</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Portfolio</label>
Portfolio
<input type="checkbox" id="drop-1" />
<ul>
<li>Photography
</li>
<li>Visuals
</li>
<li>Webdesign
</li>
<li>Videos
</li>
<li>Papers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
</div>
</div>
</body>
Related
I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle k :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
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.
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>
Having trouble with how the drop-down-menu looks like when the mouse hovers over it. Note that the problem only started when I converted my nav li's from fixed to fluid. (instead of specifying it in px I specify it in %)
Here is my code:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, Helvetica, sans-serif;
font-size: 100%;
width: 99%;
max-width: 800px;
margin: 0 auto;
background-color: rgba(255, 248, 228, 0.95);
border: 2px solid #585858;
}
a:link {
color: #e07400;
}
a:visited {
color: gray;
}
a:hover,
a:focus {
font-style: italic;
}
header img {
float: left;
width: 100%;
max-width: 136.078px;
}
.orange_header {
color: #e07400;
}
header h1 {
margin: 0;
font-size: 200%;
text-shadow: 2px 1px 1px black;
/*text-align: center;*/
padding-left: 7em;
padding-top: 0.7em;
padding-bottom: 0.5em;
}
/*====================NAV MENU========================*/
#nav_menu a {
margin: 0;
}
#nav_menu a.current {
color: white;
display: block;
background-color: #a78349;
}
#nav_menu ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
height: 34px;
}
#nav_menu ul li {
float: left;
/*width:165.985px;*/
/*(800-136.06)/4 - fixed layout - uncomment to see that the dropdown menu at the lessons tab looks fine*/
width: 20.748125%;
/* 165.985/800*100 - here the dropdown menu looks strange...how to I fix this?*/
}
#nav_menu ul li a {
display: block;
text-align: center;
text-decoration: none;
padding: 0.5em 0;
margin: 0;
background-color: #ab6b06;
color: white;
}
#nav_menu ul ul {
display: none;
position: absolute;
top: 100%;
}
#nav_menu ul ul li {
float: none;
}
#nav_menu ul li:hover>ul {
display: block
}
#nav_menu>ul::after {
content: "";
clear: both;
display: block;
}
<body>
<header>
<img src="images/guitarlogo2.png" alt="Guitar" height="109.93">
<h1 class="orange_header">Annemie's Guitar School</h1>
</header>
<nav id="nav_menu">
<ul>
<li>Home</li>
<li>Useful links</li>
<li>Lessons
<ul>
<li>Sitting position</li>
<li>Reading music</li>
<li>Right Hand Technique</li>
<li>Left Hand Technique</li>
<li>Practising and Memorization</li>
</ul>
</li>
<li>Bio</li>
</ul>
</nav>
</body>
Change this css:
#nav_menu ul li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
to this
#nav_menu > ul > li {
float: left;
/* width: 165.985px; */
width: 20.748125%;
}
I'd like to have the navigation bar centered and the text placed to left as it is, but when I add the h3-tag the navigation bar moves to the right. How can I do this?
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
display: inline-block;
float: left;
font-style: bold;
font-size: 2em;
color: white;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
I used the navigation bar from: http://css-snippets.com/drop-down-navigation/
Anything that is in the document flow is going to affect the position of the menu. So you would would have to take the h3 out of the flow by positioning it absolutely.
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
This has other issues but solves your initial problem.
html,
body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#toptext {
margin: 5px 0px 0px 10px;
padding: 0;
/*
display: inline-block;
float: left;
*/
font-style: bold;
font-size: 2em;
color: white;
position: absolute;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<h3 id="toptext">Text text text text</h3>
<ul>
<li class="home"><a class="active" href="#">Home</a>
</li>
<li class="about">About
</li>
<li>Other
<ul>
<li>Site1
</li>
<li>Site2
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
Its because your h3 is inside the nav div. try making the h3 absolute positioned and your .nav class relatively positioned.