Responsive Nav Bar will not sit centrally in DIV - html

I've done lots of searching and testing on possible solutions, but can't get this responsive menu to sit central.
/**********HEADER ***************************/
.headerbar {
display:inline-block;
width:100%;
background:#007700;
margin-bottom:0px;
}
/******************/
/*********** NAVBACKER *********************/
.navback {
display:block;
height:32px;
border:2px solid grey;
background:grey;
margin:auto;
}
/***************/
/* START OF NAV STYLES ****************************/
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #003300;
text-decoration: none;
border:1px solid green;
}
/*Hover state for top level links*/
li:hover a {
background: #006600;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 30px;
line-height: 30px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #006600;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #003300;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
height:12px;
}
}
/* END OF NAV STYLES ****************
<div class="headerbar">
<h1>Logo and some text</h1>
</div>
<div class="navback">
<!-- START OF NAVIGATION MENU -->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
Latest ↓
<ul class="hidden">
<li>Pictures</li>
<li>Comments</li>
<li>Threads</li>
</ul>
</li>
<li>
Explore ↓
<ul class="hidden">
<li>Counties</li>
<li>Towns</li>
<li>Attractions</li>
<li><a href='#'>Picture Tours</a></li>
</ul>
</li>
<li>Upload</li>
<li>Login</li>
</ul>
</div>
<!-- END OF NAVIGATION MENU -->`enter code here`
Here is where I have been trying to get it to work: http://jsfiddle.net/
Every time I change the position:absolute, the menu when hovered, formats wrong. I've also tried margin:0 auto; etc but nothing I've tried will work, and I've tried removing the float. Any help is hugely appreciated.
Tree

Put
display: table;
margin: 0 auto;
in ul tag, like this:
ul {
list-style-type:none;
margin: 0;
padding:0;
display: table;
margin: 0 auto;
}
Here is fiddle - http://jsfiddle.net/p5oypc72/70/

Related

remove hover on submenu during media query

Im trying to remove the hover on my submenu when the media query is active. Right now it works how I want above 979px which displays the submenu on hover. However, at 979px and below the menu changes. Im trying to get the submenu to always display and can't seem to figure it out. there is a link attached to the services button so when its pressed to display the submenu you are re-directed whcih is why I want to display the submenu all the time at media query.
HTML:
<!-- Nav Bar -->
<div id="navbar">
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu" class="nav">
<li class="nav active">Home</li>
<li class="nav">
Services
<ul class="nav hidden">
<li>Fire Alarm Systems</li>
<li>Security & Intrusion</li>
<li>Closed Circuit TV</li>
<li>Access Control</li>
<li>Systems Intrigation</li>
</ul>
</li>
<li class="nav">About Us</li>
<li class="nav">Tech Support</li>
<li class="nav">Photo Gallery</li>
<li class="nav">Testimonials</li>
<li class="nav">Contact Us</li>
</ul>
</div>
<!-- Nav Bar End -->
CSS:
ul.nav
{ list-style-type:none;
margin:0;
padding:0;
position: absolute;}
li.nav
{ display:inline-block;
float: left;
margin-right: 2px;}
li.nav a {
display:block;
min-width:153px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #724e27;
text-decoration: none;
}
li.nav:hover a {
background: #cccccc;
color: #2f3036;
}
li.nav:hover ul a {
background: #f3f3f3; /* Light grey */
color: #2f3036; /* dark Grey */
height: 40px;
line-height: 40px;
}
li.nav:hover ul a:hover {
background: #996633; /* Light Brown */
color: #fff;
}
li.active a, li.active a:hover
{ background: #cccccc;
color: #2f3036;}
li.nav ul {
display: none;
}
li.nav ul li {
display: block;
float: none;
}
li.nav ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul.nav li a:hover + .hidden, .hidden:hover {
display: block;
z-index: 999;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #261a0d;
background: #f3f3f3;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{display: none;}
input[type=checkbox]:checked ~ #menu{display: block;}
/* Responsive Styles */
#media screen and (max-width : 979px){
ul.nav
{ position: static;
display: none;}
li.nav {margin-bottom: 1px;}
ul.nav li, li.nav a {width: 100%;}
.show-menu {display:block;}
}
you can use display: block !important inside your media query to display your sub-menu on smaller screen.
#media screen and (max-width : 979px){
li.nav > ul.hidden {
display: block !important;
}
}

Shrinking navbar when scrolling down, without using Javascript

How can get a navbar at the top of the page that shrinks when a visitor scrolls down, and without using Javascipt?
This is done here, for example. It would be fine for it to shrink discretely from wide to narrow, rather than shrink continuously as on that site.
(I don't this is a duplicate, because I am specifically asking for this to be done without using Javascript.)
What you are asking for is unfortunately outright impossible without JavaScript, as CSS has no way of knowing when the users scrolls down the page.
However, it is possible to shrink a header based on cursor position (which is almost the same thing) in pure CSS. See this answer by Mr Lister.
Hope this helps!
i this this will help you
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Portfolio </li>
<li>News</li>
<li>Contact</li>
</nav>

Responsive Dropdown Menu Navigation Position Next To Logo CSS & HTML

I have a problem and its been killing me, been following various tutorials to create my navigation bar for my website but cant seem to get it right. The problem i have is that i cant position my navigation to be next to my logo when the screen is large. Everytime i shrink it down then click my menu button it appears in the same position as the last screen so im unable to see it.
Any help from experiance users will be much appreciated, the CSS & HTML i have is below.
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: fixed;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#nav_wrapper{
}
#logo img{
max-width: 100%;
height: auto;
}
#nav{
background-color: #222;
width: 100%;
top:0px;
left:0px
}
<div id="pageWrapper"> <!-- page wrapper-->
<div id="nav"> <!-- nav-->
<div id="logo">
<img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div>
<div id="nav_wrapper"> <!-- nav wrapper-->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ↓
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ↓
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- end of nav wrapper-->
</div> <!-- end of nav-->
</div> <!-- end of page wrapper-->
Follow these steps:
remove position: fixed; from your ul
use float: left on logo.
use float: right on nav.
code:
#logo {
float: left;
}
#nav_wrapper {
float: right;
}
and for smaller resolution:
#media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
}
#logo {
float: left;
}
#nav_wrapper {
float: right;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
#logo, #nav_wrapper {
float: none;
}
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
#nav_wrapper{
}
#logo img{
max-width: 100%;
height: auto;
}
#nav{
background-color: #222;
width: 100%;
top:0px;
left:0px
}
<div id="pageWrapper"> <!-- page wrapper-->
<div id="nav"> <!-- nav-->
<div id="logo">
<img src="http://placehold.it/350x150" width="405" height="96" align="bottom" /></div>
<div id="nav_wrapper"> <!-- nav wrapper-->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ↓
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ↓
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<!-- end of nav wrapper-->
</div> <!-- end of nav-->
</div> <!-- end of page wrapper-->
1st of all you have to remove the max-width for the logo and the auto height as well, also you'll need to float the image container "DIV" to the left to float the navigation menu to its right, so you will need to do it like the following
CSS:
#nav_wrapper{
overflow:auto;
}
#logo img{
float:left;
}
the rest will be the same :)

Pure HTML and CSS dropdown list on hover navigation bar

here is the HTML:
http://codepen.io/anon/pen/epvNRG
<select>
<red>
</select>
.
^ is what i tried to use but it doesnt look as good! thanks
What I need:
A dropdown menu on hover. When cursor is on 'glossary' have a dropdown menu below glossary that can say anything! Thanks! Please make it the same size as the glossary box! Aparrt from that, a little transparancy would be cool too!
Thanks!
My suggestion to you would be to either learn some bootstrap becasue it makes a lot of the css coding and such a whole lot easier, or do a quick google search before asking on the form. Anyways:
html:
<html>
<head>
<meta charset="UTF-8">
<title>Watts</title>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<ul>
<li class="highlight">Home</li>
<li>References</li>
<li>Glossary</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
body
{
margin: 0;
padding: 0;
background-color: #ccc;
} /* End of body rule */
ul
{
list-style: none;
background-color: #444; /* A very dark shade of grey as a background colour. */
text-align: center;
margin: 0;
padding: 0;
} /* End of ul rule */
li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
} /* End of li rule */
a
{
color: #fff; /* A white colour. */
text-decoration: none;
display: block;
transition: 0.65s;
} /* End of a rule */
a:hover
{
background-color: #005f5f; /* rgb(0, 95, 95) - A colour similar to teal. */
} /* End of a:hover rule */
.highlight a /* Makes the block of the navigation page that you are on white on the navigation bar. */
{
background-color: #fff; /* A white background colour. */
cursor: default;
color: #444
} /* End of .highlight a rule */
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 125px; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
You can try this pure HTML/CSS Menu:
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
nav { width:100%; background:#000; display:inline-block;}
nav ul { margin:0; padding:0;}
nav ul li { margin:0; padding:0; list-style:none; display:inline-block; cursor:default;}
nav ul li a { color:#fff; padding:10px; font:15px 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; display:inline-block;}
nav > ul > li { float:left;}
nav ul li:hover > a { color:#fff; background:#005f5f;}
nav ul li a.active { color:#fff; background:#3b4747;}
nav ul ul { width:auto; min-width:200px; display:none; background:#131313; position:absolute; z-index:555; text-align:left;}
nav li:hover > ul { display:block;}
nav ul ul ul { left:100%; top:0;}
nav ul ul li { width:100%; display:block; float:none;}
nav ul ul a { width:100%; padding:8px 15px; display:block; color:#fff; border-bottom:1px solid #111;}
nav ul ul li:hover > a { background:#005f5f; color:#fff;}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li><a>Services</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Blog</li>
<li><a>Support</a>
<ul>
<li>Sample Menu</li>
<li>Sample Menu</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>

Having trouble with css vertical menu under a <nav> tag

http://i.stack.imgur.com/dSQDe.jpg
My Problem: In the vertical menu, the drop-down part pushes the below content further downwards rather than over-lapping above the below content. This web page uses css media queries.
#charset "utf-8";
#wrapper{
margin:0 auto;
margin-top:-15px;
max-width:1020px;
width:97%;
background-color:#FFF;
border:1px solid #000;
border-radius:2px;
box-shadow:0 0 10px 0px rgba(12,3,25,1.8);
}
#slider{
overflow:hidden;
text-align:center;
min-width:320px;
height:auto;
width:100%;
}
#slider img{
width:inherit;
}
#header{
min-height:150px;
overflow:hidden;
z-index:5;
background-color:#fff;
width:100%;
display:inline;
}
#header img{
width:218px;
height:139px;
}
nav{
width:auto;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right:#CF0;
}
/*Style for menu links*/
li a {
display:block;
min-width:150px;
height:100px;
text-align: center;
line-height:100px;
color: #fff;
background: #34D675;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #99D829;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NFF - Sri Lanka</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<nav>
<a href="#">
<img src="file:///E|/NFF -Website/images/nfflogo.jpg" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo" ></a>
<label for="show-menu" class="show-menu">Show</br>Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME</li>
<li>INFO ↓
<ul class="hidden">
<li>National Rainforests</li>
<li>Aninmals & Plants</li>
<li>Nature Convservation</li>
</ul>
</li>
<li>BLOG</li>
<li>ABOUT ↓
<ul class="hidden">
<li>Our Mission & Vision</li>
<li>Membership</li>
<li>Donate us</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="slider">
<img src="images/slider.jpg" alt="NFF Sri Lanka slider" title="NFF Sri Lanka Slider">
</div>
</div>
<p style="text-align:center; padding:0px;"> © Copyright 2014 - Damitha N. Wanniarachchi </p>
</body>
</html>
Add position: absolute; to .hidden and position: relative; to .hidden for #media query max-width : 760px like this:
JSFiddle - DEMO
.hidden {
position: absolute; /* Add this */
}
#wrapper {
margin:0 auto;
margin-top:-15px;
max-width:1020px;
width:97%;
background-color:#FFF;
border:1px solid #000;
border-radius:2px;
box-shadow:0 0 10px 0px rgba(12, 3, 25, 1.8);
}
#slider {
overflow:hidden;
text-align:center;
min-width:320px;
height:auto;
width:100%;
}
#slider img {
width:inherit;
}
#header {
min-height:150px;
overflow:hidden;
z-index:5;
background-color:#fff;
width:100%;
display:inline;
}
#header img {
width:218px;
height:139px;
}
nav {
width:auto;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right:#CF0;
}
/*Style for menu links*/
li a {
display:block;
min-width:150px;
height:100px;
text-align: center;
line-height:100px;
color: #fff;
background: #34D675;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #99D829;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px) {
/*Make dropdown links appear inline*/
.hidden {
position: relative; /* Add this */
}
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<div id="wrapper">
<div id="header">
<nav>
<a href="#">
<img src="file:///E|/NFF -Website/images/nfflogo.jpg" alt="NFF Sri Lanka Logo" width="218" height="139" title="NFF Sri Lanka Logo" ></a>
<label for="show-menu" class="show-menu">Show</br>Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>HOME
</li>
<li>INFO ↓
<ul class="hidden">
<li>National Rainforests
</li>
<li>Aninmals & Plants
</li>
<li>Nature Convservation
</li>
</ul>
</li>
<li>BLOG
</li>
<li>ABOUT ↓
<ul class="hidden">
<li>Our Mission & Vision
</li>
<li>Membership
</li>
<li>Donate us
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="slider">
<img src="images/slider.jpg" alt="NFF Sri Lanka slider" title="NFF Sri Lanka Slider">
</div>
</div>
<p style="text-align:center; padding:0px;">© Copyright 2014 - Damitha N. Wanniarachchi</p>
You might want to try:
div1 {
overflow-y: visible;
}
or
div1 {
overflow-y: scroll;
}
alternatively, you could adjust the margins on the lower portion, using negative margins:
div2 {
margin-top: -100px;
}