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;
}
Related
CSS styles for my menu bar
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: 'Helvetica Neue', Helvetica;
font-weight: 400;
font-size: 1.05em;
line-height: 1.6rem;
color: white;
font-size: 1.2em;
}
header {
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
header > nav > ul {
display: flex;
margin: 0;
padding: 0;
justify-content: flex-start;
list-style: none;
flex-wrap: wrap;
}
header > nav > ul > li {
margin: 0;
flex: 0 1 auto;
position: relative;
transition: 0.2s;
cursor: pointer;
}
header > nav > ul > li:hover {
background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
/* dropdown */
position: absolute;
background: #76a1e8; /*light blue*/
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
header > nav > ul > li:hover > ul {
/* dropdown */
display: block;
width: 220px;
}
header > nav > ul > li > a {
color: white;
display: flex;
font-size: 1.5rem;
text-decoration: none;
padding: 1rem 1.5rem;
letter-spacing: 1px;
}
header > nav > ul > li > ul > li {
display: block;
}
header > nav > ul > li > ul > li > a {
text-decoration: none;
color: white;
display: flex;
letter-spacing: 1px;
cursor: pointer;
padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
background: blue;
}
header > nav > ul > li > a > i {
margin-left: 5px;
}
input {
padding: .25rem;
width: 100px;
}
input:invalid {
border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
background: red;
cursor: not-allowed;
}
button {
padding: .25rem;
}
HTML header and an image
<header>
<nav>
<ul>
<li>Teams<i class="fas fa-caret-down"></i>
<ul>
<li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
<li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
<li>
<input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
<button class="custom-id"> Go </button>
</a>
</li>
</ul>
</li>
<li><a class="show-calendar">Calendar</a></li>
<li><a class="show-athletes">Athletes</a></li>
</ul>
</nav>
</header>
<main>
<image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>
When it shows up,
The content is on top of the header bar. Is there some way to avoid this? and have the content displayed below? When the dropdown is activated, I don't want the content below it to move though.
JsFiddle: https://jsfiddle.net/g870xy3d/36/
You just need to add a margin top in the main tag with the height of the header. Also add top:0 to the header:
header{
top:0;
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
main{
margin-top: 57px;
}
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before{
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
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've got a nav here:
http://tumolo.co.uk/navbar/
I've tried all sorts - but I cant get this nav to fill up the browser 100% width. It has white space on both Left and Right side of the navbar.
I put each nav li to 16% as it's 100% / 6 menu elements, 16% is the closest to get each element equal size.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
#media screen and (min-width: 600px) {
.nav li {
width: 16%;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1em;
border-right: 1px solid #ebe3e3;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
.nav li:last-child {
border-right: 0;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
Flexbox will get you there!
.nav ul {
width: 100%;
display: flex;
justify-content: space-around;
}
If you're wanting the ends to be flush against the edge, it may be better to use:
justify-content: space-between;
Looking at the existing styles on the element, you can remove the padding-left and padding-right, as mentioned in the comments. Also, with flex, you may want to check out vendor prefixes.
Note: Support for old IE can be shaky.
The above does leave gaps in the header, as also mentioned in the comments. An alternative, suggested by Joe, is:
#navList {
display:flex;
}
#navList li {
flex:1 auto;
}
If it's not absolutely necessary, I'd ditch display: inline-block; on the .nav li - it messes with width calculations, as you know since you've adjusted for it with the -4px on each, which is only an approximation.
If you float the .nav li left, add box-sizing: border-box; and increase the width to 16.6667%, you'll get total coverage. You'll have to adjust .nav ul to contain it properly, but I've updated the snippet below to show.
body {
background: #ccc none repeat scroll 0 0;
margin: 0;
padding: 0;
}
.nav ul {
background-color: #fff;
list-style: outside none none;
margin: 0;
padding: 0;
text-align: center;
float: left;
width: 100%;
}
.nav li {
border-bottom: 1px solid #888;
font-size: 1em;
height: 40px;
line-height: 40px;
}
.nav a {
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
text-decoration: none;
transition: background-color 0.3s ease 0s;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
background-color: #5e7ea4;
color: #ffffff;
}
.nav ul li#mvl a:hover {
background-color: #5b3e52;
color: #ffffff;
}
.nav ul li#admin a:hover {
background-color: #7c6e61;
color: #ffffff;
}
.nav ul li#liquid a:hover {
background-color: #7c4c4c;
color: #ffffff;
}
#media screen and (min-width: 600px) {
.nav li {
border-bottom: medium none;
border-right: 1px solid #ebe3e3;
font-size: 1em;
height: 50px;
line-height: 50px;
width: 16.6667%;
box-sizing: border-box;
float: left;
}
.nav li:last-child {
border-right: 0 none;
}
}
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition</li>
<li id="hmrc">Cant pay HMRC?</li>
<li id="cvl">CVA</li> <li id="mvl">MVL</li>
<li id="admin">Administration</li>
<li id="liquid">Liquidation</li>
</ul>
</div>
What I understand from your explanation, you are trying to make a header navigation that has 100% width and the nodes of the menu will have the same width;
You should use calc() let me give you an example and you can apply that to your code;
<div class="nav">
<ul>
<li>Element</li>
<li>Element</li>
<li>Element</li>
<li>Element</li>
</ul>
</div>
Also in your CSS;
.nav { height:30px; width:100%;
border-bottom:1px solid #000;}
.nav li {
width:calc(100% / 4);
list-style: none;
text-align:center;
float:left;
}
We divided %100 to 4 because we have 4 li elements in our navigation.
Check on jsfiddle: https://jsfiddle.net/d9b1re2p/1/
Hoping that would help, please post your code as it is simplified in your question with a better explanation next time.
Use CSS table. It behaves much like the flex box but with better support.
It will space out each li equally up and down without the need for the 16% media query.
You will just need to tweak the styling of the links a little to add in your border.
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #fff;
text-align: center;
padding: 0;
margin: 0;
padding-left: 0px;
padding-right: 0px;
display:table;
width:100%;
table-layout:fixed;
}
.nav li {
font-size: 1em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display:table-cell;
vertical-align:top;
position:relative;
}
.nav a {
text-decoration: none;
color: #6b6b6b;
display: block;
font-size: 0.8em !important;
transition: .3s background-color;
}
.nav a:hover {
background-color: #ff0;
color: #000;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
.nav ul li#wind a:hover {
color: #ffffff;
background-color: #5da3ab;
}
.nav ul li#wind .active {
background-color: #5da3ab;
color: #ffffff;
}
.nav ul li#hmrc a:hover {
color: #ffffff;
background-color: #ac5e88;
}
.nav ul li#hmrc .active {
background-color: #ac5e88;
color: #ffffff;
}
.nav ul li#cvl a:hover {
color: #ffffff;
background-color: #5e7ea4;
}
.nav ul li#mvl a:hover {
color: #ffffff;
background-color: #5b3e52;
}
.nav ul li#admin a:hover {
color: #ffffff;
background-color: #7c6e61;
}
.nav ul li#liquid a:hover {
color: #ffffff;
background-color: #7c4c4c;
}
<link rel="stylesheet" type="text/css" href="custom.css">
<div class="nav">
<ul id="navlist">
<li id="wind">Winding up petition
</li>
<li id="hmrc">Cant pay HMRC?
</li>
<li id="cvl">CVA
</li>
<li id="mvl">MVL
</li>
<li id="admin">Administration
</li>
<li id="liquid">Liquidation
</li>
</ul>
</div>
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