I've been following a tutorial to create mobile navigation without Javascript and the idea behind this is to use a checkbox and the :checked CSS selector. I managed to get it working when I tested it out on a blank page but then when I tried to integrate it into my actual site it stopped working. I'll show the code for both so you can see where perhaps I've gone wrong (note that DIV IDs and classes have changed between the two documents but I've made sure the HTML has also changed accordingly so that's not the problem).
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
#menu {
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
That's the working code. Here's the non-working code. In the non-working code, clicking the button does not do anything and I can't work out why!
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
}
#mobile-nav {
display: none;
}
#regular-nav {
display: block;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
<input type="checkbox" id="show-menu" role="button">
</div>
<div id="regular-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</div>
</div>
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
Its not working because of your css selector, the input and the menu need to be siblings the way you currently have the css set. Read this post to understand further the ~ operator
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
<!--display: none;
-->
}
#mobile-nav {
display: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 10px 10px;
border: 1px black solid;
}
/*Hide checkbox*/
input[type=checkbox] {
<!--display: none;
-->
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #mobile-nav {
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width: 768px) {
#mobile-navigation-btn {
display: block;
}
#regular-nav {
display: none;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement("picture");
</script>
<script src="picturefill.min.js" async></script>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1000px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">Menu
<div id="hamburger">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
</label>
</div>
</div>
</div>
<input type="checkbox" id="show-menu" role="button" />
<div id="mobile-nav">
<ul>
<li>Home
</li>
<li>Customer Research
</li>
<li>Business Improvement
</li>
<li>Contact Us
</li>
<li>Blog
</li>
</ul>
</div>
</body>
</html>
Related
I am creating a custom menu (but also using bootstrap as a front-end engine) and cannot override default user agent stylesheet (currently testing on chrome).
Let's say I have a div for the menu and I want to insert menu items (equal width for all). The problem is that there is a default padding/margin and I am not being able to place them in the same row.
In my example, I have a div and four menu items (each should be 25% as in the CSS).
Here is JSFIDDLE: JSFIDDLE
Here is my code:
HTML:
<!-- LOAD CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
<!-- LOAD JQUERY -->
<script src="js/jquery-3.2.1.min.js"></script>
----------------------------------------------------
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
----------------------------------------------------
<!-- LOAD JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
CSS:
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
You are facing white spaces issue and not padding/margin as you think. You can add display:flex to the container to fix the issue
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Or the font-size:0 trick (for old browsers)
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin: 0;
padding: 0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
font-size:0;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Related links for more solution and explanation :
Display: Inline block - What is that space?
How to remove the space between inline-block elements?
Ignore whitespace in HTML
Your problem is whitespaces between the inline-block elements. These are known to break the expected alignment. So, in order to solve it, you can do some HTML changes, or applying font-size: 0; to the parent (and restore it with a value for the children, if needed).Your can check CSS-tricks: Fighting the space between inline block elements for more info.
The simpler solution, though, is to use display: flex on the ul. If the parent is a flexbox, its children will be aligned in a row (or a column, if you set it to), without any spaces but custom-added margins.
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
/* custom css */
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
* {
margin:0;
padding:0;
}
.mega-menu {
margin-top: 32px;
position: relative;
z-index: 100;
background-color: yellow;
border: 1px solid black;
}
.mega-menu>ul {
text-align: center;
display: flex;
}
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
}
.test-class {
background-color: red;
border: 1px solid blue;
}
<header>
<div class="container">
<nav class="mega-menu">
<ul>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
<li class="test-class">1</li>
</ul>
</nav>
</div>
</header>
Set float: left;
.mega-menu>ul>li {
display: inline-block;
font-size: 13px;
line-height: 15px;
vertical-align: top;
width: 25%;
float:left;
}
Im added tab for the image icon , im try to do that when i click the button (active button) after image icon change to be book_hover.png font color is change but image icon not change ,how to replace the image after NavTab active moment
.footer-tab .tooter-nav-tab {
padding: 2rem;
height: 10vh;
width: 100%;
margin-left: 0rem;
background: white;
border-top: 1px solid #c9cfd9;
display: inline;
text-align: center;
}
p.tab-txt {
font-size: 0.7rem;
}
.footer-tab ul {
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #c9cfd9;
overflow: hidden;
background-color: #ffffff;
}
.footer-tab li {
float: left;
}
.footer-tab .nav-tabs .nav-link.active {
color: white;
background-color: #8bb6f3;
border-color: #ddd #ddd #fff;
}
.footer-tab li a {
display: block;
color: #3f5370;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
.footer-tab li a:hover {
background-color: #8bb6f3;
color: white;
}
.footer-tab-img :active {
background:url'https://image.ibb.co/ffSy9F/book_hover.png')no-repeat;
color: white;
}
/*footernavtab*/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img active">
<img src="https://image.ibb.co/mOHJbv/book.png" alt="book" border="0">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
Finally i fixed my issue, im used this class footer-tab-img-01 and added separate color image and code crete like this
`span.footer-tab-img-01 { background: url('/Image/users.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }
.nav-link.active span.footer-tab-img-01 { background: url('/Image/users-hover.png') no-repeat; width: 32px; height: 32px; display: block; margin-left:1.2rem; }`
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25"><a href="" class="nav-link"}}
<span class="footer-tab-img-01">
</span>
<p class="tab-txt">Book</p>
</a>
</li>
</ul>
</div>
I have a "hamburger" mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.
Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I'd rather it push the header up and the div below it down.
Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling. Here's the code.
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
}
.show-menu:hover {
background: #ac1111;
}
#extra {
background: #222922;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#333333;
top: 0;
left: 0;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async>
</script>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</div>
Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>
<a href="#" class="current">
Home
</a>
</li>
<li>
<a href="#">
Customer Research
</a>
</li>
<li>
<a href="#">
Business Improvement
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="extra">
<div class="wrap">
Test
</div>
</div>
</body>
</html>
you could add position: relative; to #header and position: absolute; to #navigation plus top: 69px /*adjust to your needs*/ inside #media only screen and (max-width : 920px) {}
the absolute position takes it out of the flow.
I have a footer menu I am creating for WordPress. I have my main navigation links then at the end I want a collapsing/expanding link for social icons. I have created both separately but do not know how to make them display on one line. Any help is appreciated.
Main Navigation:
<!DOCTYPE html>
<html>
<head>
<style>
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight:bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
</style>
</head>
<body>
<div id="footernav">
<li>Customer Care</li>
<li>Privacy Policy</li>
<li>Terms</li>
<li>Newsletter</li>
<li>Contact</li>
</div>
</body>
</html>
Expanding/Collapsing Social Link:
<!DOCTYPE html>
<html>
<body>
<style type="text/css">
/*SOCIAL*/
.list {
display:none;
height:auto;
margin:0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: inline;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display:inline;
}
.hide:hover, .show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height:auto;
margin:0;
.hover:hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
</style>
<div class='social'>
Follow Us (+)
Follow Us (-)
<div class="list">
<p>
<a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a>
<a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'" ></a>
<a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a>
</p>
</div>
</div>
</body>
</html>
FIDDLE: http://jsfiddle.net/7j0nb4az/
First of all, you're missing the <ul> tag wrapped around your <li>'s inside the jsFiddle. Secondly, once you wrap the <li>'s with a <ul> tag, adding this CSS to your stylesheet will solve the issue:
#footernav ul {
padding: 0px;
display: inline-block;
}
Here's a working demo:
/*MAIN NAVIGATION*/
#footernav {
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#footernav li {
margin-right: 20px;
display: inline;
}
#footernav li a {
text-decoration: none;
}
#footernav ul {
padding: 0px;
display: inline-block;
vertical-align: top;
}
a#show {
vertical-align: top;
}
#footernav li:nth-child(5) {
margin-right: 0px;
}
a.hide {
margin-left: 15px;
}
/*END MAIN NAVIGATION*/
/*SOCIAL*/
.list {
display: none;
height: auto;
margin: 0;
float: center;
}
.show {
display: none;
}
.hide:target + .show {
display: block;
}
.hide:target {
display: none;
}
.hide:target ~ .list {
display: inline;
}
.hide:hover,
.show:hover {
color: #eee;
font-weight: bold;
opacity: 1;
margin-bottom: 25px;
}
.list p {
height: auto;
margin: 0;
.hover: hover {
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0px 0px 5px #000
}
<!DOCTYPE html>
<body>
<div id="footernav" class="footernav">
<ul>
<li>Customer Care
</li>
<li>Privacy Policy
</li>
<li>Terms
</li>
<li>Newsletter
</li>
<li>Contact
</li>
<ul>
<div class='social'> Follow Us (+)
Follow Us (-)
<div class="list" <a href="http://www.facebook.com" target="_blank">
<img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'">
</a>
<a href="http://www.twitter.com" target="_blank1">
<img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'">
</a>
<a href="http://www.instagram.com" target="_blank2">
<img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'">
</a>
</div>
I have created three blocks using the html code as shown below. The "a" tag has the min-height css property because of which it will be displayed as block. I am not able to place the text inside the span tag in the center of "li" tag. Although each text inside the tag is of different length, I want to display them in the center.
<div class="container">
<div class="col-md-12">
<ul id="tabs" class="nav-tabs">
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Data</span>
</a>
</li>
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Reports</span>
</a>
</li>
</div>
</div>
CSS:
.container ul {
list-style: none outside none;
}
li {
display: list-item;
}
.col-md-4 {
width: 33%;
}
.nav-block {
background-color: #FFA500;
display: block;
min-height: 70px;
position: relative;
}
.container .nav-block .header {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
left: 20%;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
Please let me know where I am going wrong
just changed the css to center the texts, check in the fiddle
.nav-block {
background-color: #FFA500;
display: block;
min-height: 70px;
position: relative;
text-align: center;
}
.container .nav-block .header {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
You should set the text-align:center; on the li{}
And delete the position:relative; on .container .nav-block .header {
DEMO
With editting my sugestions you have a shorter css, because you can delete the unaccecary things. Like here.
.container .nav-block .header {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
padding: 5px;
}
DEMO 2 (same as the other but less css)
Try this below css.
.nav-block {
background-color: #FFA500;
display: block;
min-height: 70px;
position: relative;
text-align: center; /*New Edit*/
}
.container .nav-block .header {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
/*left: 20%; - Remove*/
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}
just add text-align:center; to .nav-tabs or .nav-block
You aren't closing your <ul> tag.
I hope this is what you want ->
DEMO
HTML
<div class="container">
<div class="col-md-12">
<ul id="tabs" class="nav-tabs">
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Data</span>
</a>
</li>
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 nav-list">
<a href="#" class="nav-block">
<span class="header">Reports</span>
</a>
</li>
<!--closing the ul tag-->
</ul>
</div>
</div>
CSS
.container ul {
list-style: none outside none;
}
li {
display: list-item;
}
.col-md-4 {
width: 33%;
}
.nav-block {
background-color: #FFA500;
display: block;
min-height: 70px;
position: relative;
text-align:center; /*aligning the text center*/
line-height:60px; /*this gives vertical alignment to your element*/
}
.container .nav-block .header {
color: #FFFFFF;
font-size: 2em;
font-weight: bold;
left: 0; /*removed the defined 20% to center you text inside anchor <a> tags*/
padding: 5px;
position: relative;
text-align: center;
top: 21%;
}