I have two div's that I am trying to put space between <div id="menu"> and <div class="Content">.
Here is a screenshot of what it currently looks like and as you can see the image is right up against the bottom of the navigation menu.
I have added margins to both of them, but so far nothing that I do has worked. No amount of pixels has given any space between my navigation and the page content.
I have a margin-bottom on the <div class="Logo"> and that worked to put space below it so I just can't seem to figure out what I cant put space below the navigation and/or above the content.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>EGLT Home</title>
<link rel="stylesheet" type="text/css" href="site.css" />
<script language="javascript" type="text/javascript" src="responsivemenu.js"></script>
</head>
<body>
<div class="box-effect">
<div class="Header">
<div class="Logo">
<img src="images/EverClearLogo.png" width="306px" height="125px" alt="Company Logo" />
</div>
<div class="Contact-Info">
<img src="images/icon_Email.png" width="50px" height="50px" alt="Email Ever Clear" />
<img src="images/icon_Facebook.png" width="50px" height="50px" alt="Ever Clear Facebook Page" />
<img src="images/icon_Phone.png" width="50px" height="50px" alt="Go To Contact Us Page" />
</div>
<div id="menu" class="nav">
<ul>
<li><span class="icon"><i aria-hidden="true" class="icon-home"></i><span></span>Home</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-newspaper"></i><span></span>About Us</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-hammer"></i><span></span>Services</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-image"></i><span></span>Gallery</span></li>
<li><span class="icon"><i aria-hidden="true" class="icon-phone"></i><span></span>Contact Us</span></li>
</ul>
</div>
</div>
<div class="Content">
<div class="Home-Left">
<img src="images/EverClearEdited.jpg" width="547px" height="315px" alt="Ever Clear Grading Landscaping Trucking" />
</div>
<div class="Home-Right">
</div>
</div>
<div class="Footer">
<div class="Copyright">
© Copyright: Jason Milam - 2015
</div>
</div>
</div>
</body>
</html>
CSS:
/* SHARED STYLES */
body {
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
background-image: url("images/RedHexagons.jpg");
}
.Header {
height: 125px;
width: 100%;
position: relative;
margin-bottom: 20px;
}
.Footer {
float: left;
clear: left;
}
.box-effect {
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
width: 90%;
padding: 25px;
background-color:#FFF;
background: rgba(255,255,255,0.85);
border-radius: 15px;
overflow: hidden;
}
.Logo {
width: 306px;
margin-bottom: 20px;
}
.Contact-Info {
font-size: 20px;
display: block;
position: absolute;
right: 0;
top: 0;
}
.Copyright {
margin-top: 10px;
}
/* HOME PAGE STYLES */
.Content {
margin-top: 30px;
}
.Home-Left {
width: 50%;
float: left;
}
.Home-Right {
width: 50%;
}
/* NAVIGATION MENU */
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?8n7hjk');
src:url('fonts/icomoon.eot?#iefix8n7hjk') format('embedded-opentype'),
url('fonts/icomoon.woff?8n7hjk') format('woff'),
url('fonts/icomoon.ttf?8n7hjk') format('truetype'),
url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.svg?8n7hjk#icomoon') format('svg');
}
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#menu {
display: block;
margin-bottom: 20px;
}
.icon-home:before {
content: "\e900";
}
.icon-newspaper:before {
content: "\e904";
}
.icon-image:before {
content: "\e90d";
}
.icon-phone:before {
content: "\e942";
}
.icon-hammer:before {
content: "\e996";
}
.icon-menu:before {
content: "\e9bd";
}
/* Global CSS for all screen sizes */
.nav {
display: block;
margin-bottom:30px;
}
.nav ul {
max-width: 1200px;
margin: auto;
padding: 0;
list-style: none;
font-size: 1em;
font-weight: 300;
}
.nav li span {
display: block;
}
.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
transition: color .5s, background .5s, height .5s;
}
.nav i{
/* Make the font smoother for Chrome */
transform: translate3d(0, 0, 0);
}
/* Remove the blue Webkit background when element is tapped */
a, button {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* Hover effect for nav menu */
.no-touch .nav ul:hover a {
color: rgba(0, 0, 0, .5);
}
.no-touch .nav ul:hover a:hover {
color: rgba(0, 0, 0, 0.99);
}
.nav li:nth-child(6n+1) {
background: #000000;
}
.nav li:nth-child(6n+2) {
background: #000000;
}
.nav li:nth-child(6n+3) {
background: #000000;
}
.nav li:nth-child(6n+4) {
background: #000000;
}
.nav li:nth-child(6n+5) {
background: #000000;
}
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+3) a:hover,
.no-touch .nav li:nth-child(6n+3) a:active,
.no-touch .nav li:nth-child(6n+3) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+4) a:hover,
.no-touch .nav li:nth-child(6n+4) a:active,
.no-touch .nav li:nth-child(6n+4) a:focus {
border-bottom: 4px solid #E36220;
}
.no-touch .nav li:nth-child(6n+5) a:hover,
.no-touch .nav li:nth-child(6n+5) a:active,
.no-touch .nav li:nth-child(6n+5) a:focus {
border-bottom: 4px solid #E36220;
}
/* Place the icon */
.icon {
padding-top: 1.4em;
}
.icon + span {
margin-top: 2.1em;
transition: margin .5s;
}
/* Animating the height of the element*/
.nav a {
height: 7em;
}
/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
margin-top: 3.2em;
transition: margin .5s;
}
/* Positioning the icons and preparing for the animation*/
.nav i {
position: relative;
display: inline-block;
margin: auto;
padding:0.4em;
border-radius: 50%;
font-size: 1.8em;
box-shadow: 0 0 0 0.8em transparent;
background: rgba(255,255,255,0.1);
transform: translate3d(0, 0, 0);
transition: box-shadow .6s ease-in-out;
}
/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
display: none;
width: 100%;
padding: 0.5em 0.5em 0.8em;
font-family: 'Lato',Calibri,Arial,sans-serif;
font-weight: normal;
text-align: left;
color: rgb(7, 16, 15);
font-size: 1.2em;
background: none;
border: none;
border-bottom: 4px solid rgb(221, 221, 221);
cursor: pointer;
}
.navtoogle i{
z-index:-1;
}
.icon-menu {
position: relative;
top: 3px;
line-height: 0;
font-size: 1.6em;
}
/* RESPONSIVE STYLES */
#media (min-width: 800px) {
/* Transforms the list into a horizontal navigation */
.nav li {
float: left;
width: 16.66666666666667%;
text-align: center;
transition: border .5s;
}
.nav a {
display: block;
width: auto;
}
}
/* The "tablet" and "mobile" version */
#media (max-width: 799.9px) {
/* Instead of adding a border, we transition the background color */
.no-touch .nav ul a:hover,
.no-touch .nav ul a:active,
.no-touch .nav ul a:focus {
background: #000000;
}
.nav ul li {
transition: background 0.5s;
}
}
/* CSS for a 2x3 columns version */
#media (min-width: 520px) and (max-width: 799px) {
/* Creating the 2 column layout using floating elements once again */
.nav li {
display: block;
float: left;
width: 50%;
height: 90px;
}
/* Adding some padding to make the elements look nicer */
.nav a {
padding-left: 1em;
}
/* Displaying the icons on the left, and the text on the right side using inline-block */
.nav li span,
.nav li span.icon {
display: inline-block;
}
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 1em;
}
.icon + span {
position: relative;
/*top: -0.2em*/
}
/* Adapting the animation for smaller screens*/
.nav li i {
display: inline-block;
padding: 8% 9%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1);
transition: border .5s;
}
/* Transition effect on the border color */
.no-touch .nav li:hover i,
.no-touch .nav li:active i,
.no-touch .nav li:focus i {
border: 4px solid rgba(255,255,255,0.1);
}
}
/* Adapting the font size and width for smaller screns*/
#media (min-width: 32.5em) and (max-width: 38.688em) {
.nav li span.icon {
width: 50%;
}
.nav li .icon + span {
font-size: 0.9em;
}
}
#media (max-width: 32.438em) {
/* Unhiding the styled menu link */
.nav .navtoogle{
margin: auto;
display: block;
}
/* Animating the height of the navigation when the button is clicked */
/* If JavaScript is disabled, the menu stays open */
.no-js .nav ul {
max-height: 30em;
overflow: hidden;
}
/* When JavaScript is enabled, we hide the menu */
.js .nav ul {
max-height: 0em;
overflow: hidden;
}
/* Displaying the menu when the user has clicked on the button */
.js .nav .active + ul {
max-height: 30em;
overflow: hidden;
transition: max-height .4s;
}
/* Adapting the layout of the menu for smaller screens */
.nav li span {
display: inline-block;
height: 100%;
}
.nav a {
padding: 0.5em;
}
.icon + span {
margin-left: auto;
font-size: 0.8em;
}
.nav li {
border-left: 8px solid #E36220;
}
/* make the nav bigger on touch screens */
.touch .nav a {
padding: 0.8em;
}
}
The reason the margin-bottom is working as applied to .menu is two-fold. First, there is a height on .Header that is smaller than the content it contains. Second, your floating all of the li elements left, thus .menu really has no height. If you remove the height from .Header, and remove float:left from the li elements, and instead use display:inline-block on them, the margin works.
Then your li elements will need to be fixed a bit so there's not space in between them.
your .nav li is floated, add a clear:both div after your menu and it should solve the problem
Related
I'm working on a side navigation menu for my website using a bootstrap template. I'm a designer, not a developer, but I'm trying to learn by doing. I got everything working right, mostly. But I can't figure out why when I hover over the first or second menu items, the third one is expanded.
It's a parent for a submenu, but I've tried removing CSS rules one by one to see if that changes or fixes anything, but it doesn't seem to be working. Here is a link to the codepen that has bootstrap already loaded.
https://codepen.io/steve-mullen/pen/WNgNBjE
<html lang="en">
<body>
<header id="header" class="d-flex flex-column justify-content-center">
<nav id="navbar" class="navbar nav-menu">
<ul class="main-nav">
<li class="no-sub-nav">1<span>Menu 1</span></li>
<li class="no-sub-nav">2<span>Menu 2</span></li>
<li class="has-sub-nav">3<span>Menu 3</span>
<ul class="sub-nav">
<li><span>Sub 1</span></li>
<li><span>Sub 2</span></li>
<li><span>Sub 3</span></li>
<li><span>Sub 4</span></li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
body {
font-family: "Open Sans", sans-serif;
color: #272829;
}
a {
color: #0563bb;
text-decoration: none;
}
a:hover {
color: #067ded;
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9997;
transition: all 0.5s;
padding: 15px;
overflow-y: auto;
}
#media (max-width: 991px) {
#header {
width: 300px;
background: #fff;
border-right: 1px solid #e6e9ec;
left: -300px;
}
}
/* Main Nav */
.nav-menu {
padding: 0;
display: block;
position: relative;
}
.nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav a,
.no-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.nav-menu a {
border: 4px #1a1a1a solid;
}
.nav-menu a i,
.nav-menu a:focus i {
font-size: 20px;
}
.nav-menu a span,
.nav-menu a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
#media (min-width: 992px) {
.nav-menu a,
.nav-menu a:focus {
width: 56px;
}
.nav-menu a span,
.nav-menu a:focus span {
display: none;
color: #fff;
}
.nav-menu li {
padding: 0;
}
.sub-nav {
display:none;
position: absolute;
}
.has-sub-nav:hover .sub-nav {
display: block;
transition: 0.3 sec;
position: absolute;
margin: 0;
width:100%;
padding-top: 8px;
padding-left:15px;
}
}
.nav-menu a:hover,
.nav-menu .active,
.nav-menu .active:focus,
.nav-menu:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.nav-menu a:hover span,
.nav-menu .active span,
.nav-menu .active:focus span,
.nav-menu:hover>a span {
color: #fff;
}
.no-sub-nav a:hover,
.no-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.no-sub-nav a:hover span,
.no-sub-nav:hover>a span{
display: block;
}
/* Sub Nav */
.has-sub-nav {
padding: 0;
display: block;
position: relative;
}
.has-sub-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.has-sub-nav ul {
position: relative;
white-space: nowrap;
}
.no-sub-nav {
margin-bottom: 8px;
}
.has-sub-nav li {
padding-bottom:8px;
}
.has-sub-nav a,
.has-sub-nav a:focus {
display: flex;
align-items: center;
color: rgba(26,26,26,1.00);
padding: 10px 18px;
transition: 0.3s;
font-size: 15px;
border-radius: 50px;
background: #f2f3f5;
height: 56px;
width: 100%;
overflow: hidden;
}
.has-sub-nav a {
border: 4px #1a1a1a solid;
}
.has-sub-nav a span,
.has-sub-nav a:focus span {
padding: 0 5px 0 5px;
color: #1a1a1a;
}
.has-sub-nav a:hover,
.has-sub-nav .active,
.has-sub-nav .active:focus,
.has-sub-nav:hover>a {
color: #fff;
background: #1a1a1a;
border: 4px white solid;
padding: 0 18px;
}
.has-sub-nav a:hover span,
.has-sub-nav .active span,
.has-sub-nav .active:focus span,
.has-sub-nav:hover>a span {
color: #fff;
}
.has-sub-nav a:hover,
.has-sub-nav:hover>a {
width: 100%;
color: #fff;
}
.has-sub-nav a:hover span,
.has-sub-nav:hover>a span{
display: block;
}
I found the issue in your CSS, you just need to remove the width: 100% in
.has-sub-nav a,
.has-sub-nav a:focus
and it will works as normal.
This is because the width:100% make the 3rd menu to fit to its container's(ul) width, so whenenver 1st or 2nd menu is expanding, ul is expanding and cause 3rd to following its parent width then cause the issue.
https://codepen.io/zeikman/pen/dyqPZKW
I just want to center these 4 anchor tag lis inside of this ul.
Is there someway I can wrap these four into one container, and then move them to the left with CSS? I just want those 4 items to appear centered in that ul.
Here's a picture of what I'm talking about
Below is my total header in HTML. There's a lot of CSS so I don't know what to link people to but I'll put what i have been playing with below.
<!-- Header -->
<header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
<div class="header-inner">
<div class="row nav-bar">
<div class="column width-12 nav-bar-inner">
<div class="logo">
<div>
<a href="tel:1-530-680-8255" style="color:grey; display:inline-block">1-530-680-
8255</a>
<a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block">
</i>1-530-680-8255</a>
</div>
</div>
<nav class="navigation nav-block secondary-navigation nav-right">
<ul>
<li class="aux-navigation hide">
<!-- Aux Navigation -->
<a href="#" class="navigation-show side-nav-show nav-icon">
<span class="icon-menu"></span>
</a>
</li>
</ul>
</nav>
<nav class="navigation nav-block primary-navigation nav-center">
<ul>
<li class="current">Home <i class="fas fa-home"></i></li>
<li class="current">About <i class="fas fa-at"></i></li>
<li class="current">Services <i class="fas fa-wrench"></i> </li>
<li class="current">Contact <i class="fas fa-phone"></i> </li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<!-- Header End -->
---CSS---
nav ul li {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
}
I would do it by adding this css (instead of the one you've displayed):
<style>
.logo {
max-width: 300px;
width: 30%;
float; left;
display: block;
}
.navigation {
display: block;
clear: both;
max-width: 70%;
float: right;
width: 700px;
}
.navigation ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.navigation ul li {
text-align: center;
width: 100px;
margin: 0;
padding: 0;
display: block;
}
</style>
So you can just add all that code in the <head>-section of your site, and then it should work.
Sarah, or others:
The solutions provided have centered it, however the phone number is now cutoff.
cutoff phone number
Im including all of what i think is the relevant CSS. I hope this isnt too much to sift through, i just have no clue what is causing this.
[4. Header Styling]
*/
/* Initial Position */
.header-bottom{
bottom: 0.1rem;
}
/* Intial Height */
.header .logo,
.header .header-inner .navigation > ul > li,
.header .header-inner .navigation > ul > li > a:not(.button),
.header .header-inner .dropdown > .nav-icon{
height: 8rem;
line-height: 8rem;
}
/* Compacted Height */
.header-compact .logo,
.header-compact .header-inner .navigation > ul > li,
.header-compact .header-inner .navigation > ul > li > a:not(.button),
.header-compact .header-inner .dropdown > .nav-icon{
height: 6rem;
line-height: 6rem;
}
/* Header Initial Styling */
.header .header-inner{
background-color: #fff;
border-bottom: none;
border-bottom: 1px solid #eee;
}
.header .header-inner > .nav-bar{
/*border-bottom: 1px solid #eee;*/
}
/* Transparent Header Initial & Active Nav Colors */
.header-transparent .header-inner{
background-color: transparent;
border-bottom: 1px solid transparent;
}
.header-transparent .header-inner > .nav-bar{
border-bottom: 1px solid rgba(255,255,255, 0.2);
}
/* Background Header - On Scroll! */
.header-background .header-inner{
background-color: #fff;
border-color: #eee;
}
.header-background .header-inner > .nav-bar{
border-bottom: none;
}
/* Header Inner Top */
.header .header-inner-top{
height: 4rem;
background: #232323;
color: #fff;
}
/* Mobile Header Styles & Breakpoints */
.mobile .header .header-inner{
background-color: #fff;
border-top: none;
}
.mobile .header .header-inner{
border-bottom: 1px solid #eee;
}
.mobile .header + .content{
padding-top: 0;
}
#media only screen and (max-width: 960px){
.header .header,
.header .header-inner,
.header.header-transparent .header-inner{
background-color: #fff;
}
.header .header-inner{
border-bottom: 1px solid #eee;
}
.header .header-inner > .nav-bar{
padding: 0;
}
}
/*------------------------------------------------------------------
[5. Header Logo]
*/
/* Initial Logo Width */
.header .logo{
width: 12.5rem;
top: 30px;
left: 0px;
position: absolute;
}
/* Compacted Header Logo Width */
.header-compact .logo{
width: 12.5rem;
}
/* Initial Logo Styling */
.header .logo a{
display: block !important;
position: absolute;
top: 0;
}
.header-in .logo a,
.header-out .logo a{
-webkit-transition-duration: 0ms;
transition-duration: 0ms;
}
.header .logo a:first-child{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.header .logo a + a{
display: none !important;
}
/* Transparent Header Show Light Logo */
.header-transparent .logo a:first-child{
opacity: 0;
-webkit-transform: translateY(5rem);
transform: translateY(5rem)
}
.header-transparent .logo a + a{
display: block !important;
-webkit-transform: translateY(0);
transform: translateY(0);
}
/* Header Background Logo Swap to Dark Logo - On Scroll! */
.header-background .logo a:first-child{
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.header-background .logo a + a{
display: block !important;
opacity: 0;
-webkit-transform: translateY(-5rem);
transform: translateY(-5rem);
}
/* Logo Nav Dark */
.nav-dark .logo a:first-child{
display: block !important;
top: 0;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.nav-dark .logo a:last-child{
display: none !important;
}
/* Logo Mobile Header & Breakpoints */
.mobile .header .logo a:first-child{
display: block !important;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
#media only screen and (max-width: 960px){
.header .logo-inner{
display: table-cell;
vertical-align: middle;
}
.header .logo a{
position: relative;
}
.header .logo a:first-child{
opacity: 1;
top: 0;
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
}
.header .logo a:last-child{
display: none !important;
}
}
/*------------------------------------------------------------------
[6. Header Navigation]
*/
/* Padding & Margins */
<style>
.navigation {
width: 100%;
display: block;
clear: both;
}
.navigation ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.navigation ul li {
text-align: center;
width: 100px;
margin: 0;
padding: 0;
display: block;
}
</style>
.header .logo-center ~ .navigation.nav-center{
padding-top: 0.5rem;
}
.header .logo-center ~ .navigation.nav-center > ul > li > a{
padding-bottom: 2rem;
}
.header .navigation > ul > li > a{
margin: 0 1.5rem;
padding-left: 0;
padding-right: 0;
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 0;
}
/* Header Initial & Active Nav Colors */
.header .navigation > ul > li > a{
color: #999;
opacity: 1;
}
.header .navigation > ul > li.current > a,
.header .navigation > ul > li > a:hover{
color: #000;
opacity: 1;
}
.header .navigation > ul > li.current > a:hover{
color: #000;
}
/* Transparent Header Initial, Hover & Current Nav Colors */
.header-transparent .navigation > ul > li > a{
color: #fff;
opacity: 0.6;
}
.header-transparent .navigation > ul > li > a:hover{
color: #fff;
opacity: 1;
}
.header-transparent .navigation > ul > li.current > a,
.header-transparent .navigation > ul > li.current > a:hover{
color: #fff;
opacity: 1;
}
/* Nav Dark Initial, Hover & Current Colors */
.header-transparent.nav-dark .navigation > ul > li > a{
color: #000;
opacity: 0.5;
}
.nav-dark .navigation > ul > li.current > a,
.nav-dark .navigation > ul > li.current > a:hover{
color: #000;
opacity: 1;
}
/* Header Background Initial, Hover & Current Nav Colors - On Scroll! */
.header-background .navigation > ul > li > a{
color: #999;
}
.header-background .navigation > ul > li.current > a{
color: #000;
border-bottom: none;
}
.header-background .navigation > ul > li.current > a:hover{
color: #000;
}
.header-background .navigation > ul > li > a:hover{
color: #000;
opacity: 1;
}
/* Sub Menus, Mega Menus, Dropdown List Initial Colors */
.navigation .sub-menu li,
.navigation .dropdown-list li{
border-bottom: none;
}
.navigation .sub-menu li a,
.navigation .mega-sub-menu ul li a,
.navigation .dropdown-list li a{
line-height: 1.6;
font-weight: 400;
font-size: 1.2rem;
color: #888;
}
.navigation .sub-menu:not(.custom-content) li a,
.navigation .dropdown-list:not(.custom-content) li a{
padding: 1rem 1.5rem;
}
.navigation .mega-sub-menu > li > a{
font-size: 1.3rem;
}
.navigation .sub-menu:not(.custom-content) a,
.navigation .sub-menu.custom-content,
.navigation .mega-sub-menu,
.navigation .dropdown-list{
background-color: #111;
}
/* Menu Nav Cart Intial Colors */
.navigation .cart .badge{
top: -0.4rem;
left: 1.2rem;
background-color: #9a9484;
}
.navigation .cart-overview .product-title{
color: #fff;
}
.navigation .cart-overview .product-price,
.navigation .cart-overview .product-quantity{
color: #999;
}
.navigation .cart-overview a.product-remove{
background-color: #444;
color: #999;
}
.navigation .cart-overview .cart-subtotal{
color: #fff;
}
.navigation .cart-overview .cart-actions{
border-color: #444;
}
.navigation .cart-overview .checkout.button{
background-color: #9a9484;
border-color: transparent;
color: #fff;
}
.navigation .cart-overview .checkout.button:hover{
background-color: #666;
border-color: transparent;
color: #fff;
}
/* Sub Menus, Mega Menus, Dropdown List Hover Colors */
.navigation .sub-menu:not(.custom-content) li:hover > a,
.navigation .mega-sub-menu:not(.custom-content) ul li:hover > a,
.navigation .dropdown-list:not(.custom-content) li:hover a{
background-color: #000;
}
.navigation .sub-menu li > a:not(.button):hover,
.navigation .mega-sub-menu ul li > a:not(.button):hover,
.navigation .dropdown-list li > a:not(.button):hover,
.navigation .cart-overview .product-title:hover,
.navigation .cart-overview .product-remove:hover{
color: #fff;
}
.navigation .sub-menu li.current > a:not(.button),
.navigation .dropdown-list li.current > a:not(.button),
.navigation .mega-sub-menu ul li.current > a:not(.button){
color: #fff;
}
/* Mega Menu Position */
.navigation .mega-sub-menu{
left: 0;
right: 0;
}
/* Labels Sub Menu */
.sub-menu li .label,
.mega-menu li .label,
.dropdown li .label{
margin-left: 0.5rem;
padding: 0.1rem 0.4rem;
font-size: 1rem;
text-transform: uppercase;
background-color: #9a9484;
border-color: #9a9484;
color: #fff;
}
I've looked through several questions regarding this already; however, none of them seem to solve or cover this problem.
What is essentially happening is that the h1 and nav element end up side by side but aren't properly lining up. I've tried multiple display and float settings on each but none are working.
The CSS itself is relatively clean, perhaps flex is not working properly or i am not using it properly? I'm not sure whats causing the problem here help is greatly appreciated!
/* Mobile CSS */
#navbar h1 {
display: block;
padding-top: 1.4rem;
text-align: center;
font-weight: 400;
}
#hbmenu {
display: block;
position:absolute; top:1.8rem; left:2rem;
background-color: transparent;
border: none;
}
.iconbar {
display: block;
margin-top: 5px;
height: 3px;
border-radius: 3px;
width: 30px;
background-color: #888;
}
#hbmenu:hover .iconbar {
background-color: #fff
}
#navbar > nav {
display: flex;
flex-direction: column;
background-color: white;
transform: 300ms all ease;
}
#navbar > nav > ul {
margin: 0 auto;
flex: 1;
text-align: center;
list-style-type: none;
}
#navbar > nav > ul > li {
border-bottom: 1px solid rgba(51,51,51,0.4);
}
#navbar > nav > ul > li > a {/*border bottom none?*/
display: block;
padding: 1.2rem 0;
text-decoration: none;
transition: 250ms all ease;
}
/* Medium screens or Desktop screens */
#media all and (min-width: 600px) {
#hbmenu {
display: none;
}
#navbar h1 {
display: inline-block;
padding-left: 2rem;
}
#navbar > nav {
display: inline-block;
padding-top: 2.1rem;
background-color: #333333;
}
#navbar > nav > ul {
padding-left: 1.8rem;
}
#navbar > nav > ul > li {
display: inline-block;
}
#navbar > nav > ul > li > a {
padding: 0 0.5rem;
margin: 0 0.5rem;
color: #9D9D9D;
border-top: 1.5px solid transparent;
border-bottom: 1.5px solid transparent;
transition: 0.5s;
}
#navbar > nav > ul > li > a:hover {
border-bottom: 1.5px solid #fff;
color: #fff;
transition: 0.5s;
}
}
/* Color & Font Stuff */
#navbar > nav > ul > li > a {
font-family: "Helvetica Neue";
font-weight: 600;
}
.highlight {
color: #9D9D9D;
transition: 0.5s;
}
.highlight:hover {
color: #ffffff;
transition: 0.5s;
}
<header>
<div id="navbar">
<button type="button" id="hbmenu">
<span class="iconbar"></span>
<span class="iconbar"></span>
<span class="iconbar"></span>
</button>
<h1>
<span class="highlight">Gatsby</span>
</h1>
<nav>
<ul>
<li>
Home
</li>
<li>
Test
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</header>
Removing the h1 element allows to me properly add padding to the top of the nav element. While, having both only allows me to properly pad the h1. I'm sure padding isn't the best way to vertically center either but the problem remains.
UPDATE:
misalignment picture
I quickly marked up the screenshot which hopefully clarifies the problem. The red line on the bottom demonstrates how the text currently lines up. While the red line on the top demonstrates how the li elements should be vertically centered.
h1, nav element views
As this shows perhaps the bigger problem is how its currently setup as the elements don't "snap" if you will.
display: inline-block; elements can be vertically center aligned by using vertical-align: middle;, just add it to both h1 and nav
/* Mobile CSS */
#navbar h1 {
display: block;
text-align: center;
font-weight: 400;
}
#hbmenu {
display: block;
position:absolute; top:1.8rem; left:2rem;
background-color: transparent;
border: none;
}
.iconbar {
display: block;
margin-top: 5px;
height: 3px;
border-radius: 3px;
width: 30px;
background-color: #888;
}
#hbmenu:hover .iconbar {
background-color: #fff
}
#navbar > nav {
display: flex;
flex-direction: column;
background-color: white;
transform: 300ms all ease;
}
#navbar > nav > ul {
margin: 0 auto;
flex: 1;
text-align: center;
list-style-type: none;
}
#navbar > nav > ul > li {
border-bottom: 1px solid rgba(51,51,51,0.4);
}
#navbar > nav > ul > li > a {/*border bottom none?*/
display: block;
padding: 1.2rem 0;
text-decoration: none;
transition: 250ms all ease;
}
/* Medium screens or Desktop screens */
#media all and (min-width: 600px) {
#hbmenu {
display: none;
}
#navbar h1 {
display: inline-block;
padding-left: 2rem;
vertical-align: middle;
}
#navbar > nav {
display: inline-block;
vertical-align: middle;
background-color: #333333;
}
#navbar > nav > ul {
padding-left: 1.8rem;
}
#navbar > nav > ul > li {
float: left;
}
#navbar > nav > ul > li > a {
padding: 0 0.5rem;
margin: 0 0.5rem;
color: #9D9D9D;
border-top: 1.5px solid transparent;
border-bottom: 1.5px solid transparent;
transition: 0.5s;
}
#navbar > nav > ul > li > a:hover {
border-bottom: 1.5px solid #fff;
color: #fff;
transition: 0.5s;
}
}
/* Color & Font Stuff */
#navbar > nav > ul > li > a {
font-family: "Helvetica Neue";
font-weight: 600;
}
.highlight {
color: #9D9D9D;
transition: 0.5s;
}
.highlight:hover {
color: #ffffff;
transition: 0.5s;
}
<header>
<div id="navbar">
<button type="button" id="hbmenu">
<span class="iconbar"></span>
<span class="iconbar"></span>
<span class="iconbar"></span>
</button>
<h1>
<span class="highlight">Gatsby</span>
</h1>
<nav>
<ul>
<li>
Home
</li>
<li>
Test
</li>
<li>
About
</li>
</ul>
</nav>
</div>
</header>
You can try to use flexbox for your problem. Check the codepen sample. I think this was your requirement
.header-container {
display: flex;
max-width: 600px;
align-items: center;
}
h1, nav {
flex-grow: 1;
}
Check the codepen.
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>
While trying out flexboxgrid out of the box for the first time in my chrome v46 1366 resolution a sample menu I created appears to be stacked vertically rather than horizontally as a flex layout should be. When you tryout the code in a jsfiddle however, it appears to be okay. I believe it has something to do with the container width? How should i fix it?
Here's the fiddle:
HTML:
<div class="container">
<div class="row center-xs middle-xs">
<div class="col-sm-2 col-xs-4">
<h1>My Logo</h1>
</div>
<div class="col-sm-8 col-sm-offset-2 col-xs-12">
<nav>
<ul class="row">
<li class="col-xs">Home
</li>
<li class="col-xs">About
</li>
<li class="col-xs">Menu
</li>
<li class="col-xs">News
</li>
<li class="col-xs">Photo
</li>
</ul>
</nav>
</div>
</div>
<!--end of .row-->
<h2>A flexible menu based on the
Flexbox Grid framework.
</h2>
<p class="p">Demo by George Martsoukos. See article.</p>
</div>
CSS:
body {
/* display: flex;*/
/* flex-direction: column;*/
background: #4c493e;
color: white;
padding-top: 10px;
}
h1, ul, li {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
.p {
text-align: center;
color: white;
padding-top: 150px;
font-size: .9em;
}
.p a {
color: white;
text-decoration: underline;
}
/* LOGO STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
margin-left: 5px;
padding: 10px;
font-size: 24px;
background: #ffee91;
}
h1 a {
display: block;
}
/* MENU STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
div.row {
min-height: 80px;
padding-left: 20px;
padding-right: 20px;
margin: 0;
}
.col-xs {
padding: 0;
border-right: solid 1px #444;
}
nav {
margin-right: 5px;
}
ul a {
display: block;
padding: 15px 0;
text-transform: uppercase;
background: #fff0a0;
transition: background .3s ease;
}
ul a:before {
font-family: FontAwesome;
padding-right: 5px;
font-size: 22px;
display: inline-block;
}
ul li:nth-child(1) a:before {
content:'\f015';
}
ul li:nth-child(2) a:before {
content:'\f0eb';
}
ul li:nth-child(3) a:before {
content:'\f115';
}
ul li:nth-child(4) a:before {
content:'\f1ea';
}
ul li:nth-child(5) a:before {
content:'\f03e';
}
ul a:hover {
background: white;
}
/* SECOND LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2 {
text-align: center;
padding: 5px;
}
h2 a {
padding: 5px;
border-bottom: 2px solid #FEB41C;
transition: all .3s ease;
color: white;
}
h2 a:hover {
background: #FEB41C;
color: black;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media screen and (max-width: 876px) {
nav {
margin: 0 5px;
}
div.row {
height: auto;
}
h1 {
font-size: 18px;
}
h1, ul {
margin: 20px 0;
}
ul a {
font-size: 0;
}
ul a:before {
padding: 0 5px;
font-size: 32px;
}
}
#media screen and (max-width: 500px) {
ul a:before {
font-size: 22px;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
#media screen and (min-width: 1600px) {
.col-sm-offset-2 {
margin-left: 16.666%;
}
}
Here's the image from my browser:
You are missing the flexboxgrid stylesheet link in your primary document, but not the fiddle demo.
Add this to your HTML doc in the <head> section:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css">
It's already in the fiddle (see "External Resources").