I'm building a navigation bar and the code if fine in the desktop mode.
When I'm using media queries for mobile, the hover effects are the same in the media query as in the desktop version. I don't know what I'm doing wrong or how to fix it.
background: #232323;
height: 66px;
color: #ffff;
box-shadow: 2px 2px 5px green;
position: fixed;
width: 100%;
}
header .logo {
float: left;
height: inherit;
margin-left: 3em;
margin-bottom: 3em;
text-shadow: 2px 2px 2px black;
}
header .logo-text {
margin: 8px;
}
header .logo-text span {
color: #cfe333;
font-family: 'Abril Fatface', cursive;
}
header ul {
float: right;
margin: 0px;
padding: 0px;
list-style: none;
}
header ul li {
float: left;
position: relative
}
header ul li ul {
position: absolute;
top: 66px;
right: 0px;
width: 180px;
display: none;
}
header ul li ul li {
width: 100%;
background: #cfe333;
}
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
}
header ul li {
display: block;
padding: 21px;
font-size: 1.1em;
}
header ul li:hover {
background: #010101;
color: #cfe333;
}
header ul li a:hover {
color: #cfe333;
transition: 0.5s;
}
header .menu-toggle {
display: none;
}
header ul li a {
text-decoration: none;
color: #fff;
font-size: 1.2em;
text-shadow: 2px 2px 2px black;
}
.fas fa-bars menu-toggle {
color: white;
}
/* Media Queries */
#media only screen and (max-width: 750px) {
header ul {
width: 100%;
background: #232323;
font-size: .8em;
margin-top: 0;
position: absolute;
top: 68px;
}
header ul li {
width: 100%;
}
header ul li ul {
position: static;
display: block;
width: 100%;
left: 0;
margin-top: 30px;
}
header ul li ul li a {
padding: 10px;
color: #fffff;
height: 66px;
width: 100%;
}
header ul li ul li a:hover {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-text"><span>IM</span> Learning Project</h1>
<link rel="stylysheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity=""
crossorigin="anonymous">
</div>
<i class="fas fa-bars menu-toggle"></i>
<ul class="nav">
<li><i class="far fa-star"></i> Rewards</li>
<li><i class="fas fa-user-friends"></i> Connect</li>
<li><i class="fas fa-video"></i> Watch</li>
<li>
<i class="fas fa-user"></i> Sign Up <i class="fas fa-chevron-down" style="font-size: .8em;"></i>
<ul>
<li>Dashboard</li>
<li>Logout</li>
</ul>
</li>
</ul>
</header>
What I'm trying to do with this code is have the list items stay the full width on hover also, for the media query.
Thanks in advance for your help!
I solved it by putting a media query on this:
header ul li ul:hover {
background: #0000;
width: 180px;
height: 66px;
}
}```
Related
I have a navbar with a dropdown menu which works perfectly, but to show what is selected I want to make the background change on hover.
But when I try to do this it doesn't fit it looks like this:
And on the dropdown it looks like this:
And I want the background to fit with the navbar, but I don't know how.
nav {
width: 100%;
height: 60px;
background-color: gray;}
nav ul {
float: left;}
nav ul li {
float: left;
list-style: none;
position: relative;}
nav ul li a {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;}
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 60px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 0;}
/*top right bottom left*/
nav ul li ul li a:hover {
padding: 10px 10px 10px 10px;
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
I think this is your requirement.
No need of any taking -margin instead that make ul padding-left to zero and for hover background add padding to <a> tag.
nav {
width: 100%;
background-color: gray;}
nav ul {
float: left;
font-size: 0;
padding: 0;
}
nav ul li {
float: left;
list-style: none;
position: relative;
background: gray;
}
nav ul li a {
margin-left: 0;
padding:15px 20px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 0;
border-radius: 4px;}
nav ul li:hover ul {
display: block;}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 15px 20px;}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
there are many points you need to understand Like where to use float, negative margins and should not copy same code on hover state, I removed some of those and added some basic style and your navbar is good to go. you can also check this codepen link https://codepen.io/shahilparichay/pen/OJOJMpj
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: gray;
}
nav ul {
/* float: left; */
}
nav ul li {
/* float: left; */
list-style: none;
position: relative;
display: inline-block;
}
nav ul li a {
margin-left: 0px;
padding: 15px 10px;
font-family: Verdana;
color: black;
font-size: 24px;
text-decoration: none;
display: block;
}
nav ul li a:hover {
color: white;
background-color: lightblue;
}
nav ul li ul {
display: none;
position: absolute;
background-color: gray;
padding:10px 15px;
border-radius: 4px;}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;}
nav ul li ul li a {
padding: 10px 10px 10px 10px;
}
/*top right bottom left*/
nav ul li ul li a:hover {
color: white;
background-color: lightblue;
}
<nav>
<ul>
<li><a href='#'>Thuispagina</a></li>
<li><a href='#'>Religie</a>
<ul>
<li><a href='#'>Christendom</a>
<li><a href='#'>Islam</a>
<li><a href='#'>Boedhisme</a>
</ul>
</li>
<li><a href='#'>Interview</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</nav>
You have to edit the padding values to set the background size on hover.
To change the background color to match the navbar when hovered in the category:
change this code:
nav ul li a:hover {
margin-left: -60px;
padding:50px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;}
to this:
nav ul li a:hover {
margin-left: -60px;
padding:16px;
margin-right: 10px;
font-family: Verdana;
color: white;
background-color: lightblue;
font-size: 24px;
text-decoration: none;
}
Blog about padding:
https://www.w3schools.com/css/css_padding.asp
I don't have time to trace your code, but you can use this code and make changes according to your need:
<!DOCTYPE html>
<html>
<head>
<title> Responsive Navigation Menus with Social Media</title>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
$(document).ready(function () {
$(".toggle-nav").click(function () {
$(".menu ul li").slideToggle("slow");
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
font-family: arial;
}
.menu {
width: 100%;
background: #333;
overflow: auto;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 70px;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
width: 100px;
display: block;
text-align: center;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
}
.menu ul li a:hover {
background: #6666ff;
}
.menu ul li a.active {
background: orange;
}
.toggle-nav {
color: #fff;
text-decoration: none;
display: none;
}
.social {
float: right;
margin-right: 100px;
line-height: 70px;
}
.social a {
max-width: 50px;
text-align: center;
}
.social a i {
font-size: 20px;
background: #fff;
width: 40px;
height: 40px;
line-height: 40px;
color: #000;
border-radius: 50%;
margin: 5px;
}
.social a i:hover {
background: #6666ff;
color: #fff;
}
#media(max-width:800px) {
.toggle-nav {
font-size: 40px;
text-align: center;
font-weight: bold;
padding: 10px 0px 10px 0px;
background: #6666ff;
width: 100%;
display: block;
}
.menu ul li a {
width: 100%;
}
.menu ul li {
float: none;
width: 100%;
display: none;
;
}
.social {
width: 100%;
text-align: center;
border-top: 1px solid #fff;
float: none;
}
}
#media(min-width:850px) {
.menu ul li {
display: block !important;
}
}
</style>
</head>
<body>
<nav class="menu">
<a class="toggle-nav" href="#">☰</a>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>News</li>
<li>Blog</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
</div>
</nav>
</body>
</html>
I've created a fixed side nav bar and header and i'd like to create a grid within the content section of the page, however, when i add in any main content, it pushes below the fixed side bar and does not show from just below the header.
I've been scrolling through stack and google to see if i can fix the issue, but none of though solutions has worked.
I've made a code pen for visuals and seeing the code:
https://codepen.io/nyxerian/pen/ZEBKMJg
As you'll see the h2 title should be in line with the Home button at the top of the screen.
What am I missing?
HTML
<!DOCTYPE html>
>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="basic.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
</head>
<body>
<!-- start: SIDEBAR NAV AND HEADER -->
<div class='fixed header'></div>
<div class='fixed side'>
<img class="smartlogo" src="PNG1.png" alt="smart">
<nav class="sidebar">
<div class="text"></div>
<br>
<ul>
<li class="active"><i class="fas fa-home" style="color:#2DAAD6;"></i> Home</li>
<li><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i> Sell</li>
<li><i class="fas fa-chart-line" style="color: #2DAAD6;"></i> Dashboards</li>
<li><i class="fas fa-boxes" style="color: #2DAAD6;"></i> Inventory</li>
<li><i class="far fa-credit-card" style="color: #2DAAD6;"></i> Payments</li>
<li>
<i class="far fa-folder-open" style="color: #2DAAD6;"></i> Leads
<ul class="lead-show">
<li>Referrals</li>
<li></i>Management</li>
<li>Settings</li>
</ul>
</li>
<li><i class="fas fa-users" style="color: #2DAAD6;"></i> Teams</li>
<li><i class="far fa-clipboard" style="color: #2DAAD6;"></i> Reporting</li>
<li><i class="fas fa-tools" style="color: #2DAAD6;"></i> Settings</li>
</ul>
</nav>
</div>
<div class='scrollable'></div>
<script>
$('.lead-btn').click(function () {
$('nav ul .lead-show').toggleClass('show')
$('nav ul .first').toggleClass('rotate')
})
$('nav ul li').click(function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
font-family: 'Nordstern', Helvetica;
}
.scrollable {
height: 2000px;
width: 500%;
margin: 0 auto;
}
.fixed {
position: fixed;
}
.header {
top: 0;
left: 0;
right: 0;
height: 100px;
background-image: linear-gradient(
to right,
#436c89,
#6ca1cd,
#60b9c0
) !important;
}
.smartlogo {
width: 140px;
height: 45px;
margin-left: 40px;
margin-top: 30px;
}
.side {
top: 0;
left: 0;
bottom: 0;
width: 240px;
background-color: #e7e6e6;
}
.sidebar {
height: 80%;
width: 240px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #e7e6e6;
margin-top: 85px;
}
.sidebar.show {
left: 0px;
}
.sidebar .text {
color: black;
font-size: 25px;
font-weight: 600;
line-height: 65px;
text-align: center;
justify-content: left;
background: #e7e6e6;
letter-spacing: 1px;
}
nav ul {
background: #e7e6e6;
height: 100%;
width: 100%;
list-style: none;
}
nav ul li {
line-height: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
position: relative;
color: black;
text-decoration: none;
font-size: 18px;
padding-left: 40px;
font-weight: 500;
display: block;
width: 100%;
border-left: 3px solid transparent;
}
nav ul li.active a {
color: black;
background: #e7e6e6;
border-left-color: #60b9c0;
}
nav ul li a:hover {
background: #ffffff;
}
nav ul ul {
position: static;
display: none;
}
nav ul .lead-show.show {
display: block;
}
nav ul .serv-show.show1 {
display: block;
}
nav ul ul li {
line-height: 42px;
border-top: none;
}
nav ul ul li a {
font-size: 17px;
color: #e6e6e6;
padding-left: 80px;
}
nav ul li.active ul li a {
color: Black;
background: #e7e6e6;
border-left-color: transparent;
}
nav ul ul li a:hover {
color: black !important;
background: #ffffff !important;
}
nav ul li a span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
font-size: 22px;
transition: transform 0.4s;
}
nav ul li a span.rotate {
transform: translateY(-50%) rotate(-180deg);
}
i {
display: inline-block;
margin-right: 15px;
}
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
How to make a responsive make the navbar collapse into a hamburger menu bar after a certain width without bootstrap, but from scratch?
Here is the fiddlehttps://jsfiddle.net/6951Lscu/
#myNavbar{
position: fixed;
width: 100%;
background: white;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #E8E8E8;
text-decoration: none;
}
ul{
list-style: none;
}
.medium{
font-family: "Roboto", sans-serif;
font-weight: 500;
}
.right-nav{
padding: 8px 15px;
float: right;
}
div.container{
font-family: Raleway;
margin: 0 auto;
padding: 6px 3em;
text-align: center;
}
div.container a
{
color: #000;
text-decoration: none;
margin: 0px 20px;
padding: 5px 5px;
position: relative;
}
<div id="myNavbar">
<div class="container">
<ul>
<li style="float:left"><img class="navlogo" src="svg/navlogo.svg" alt=""></li>
<li class="right-nav"><span class="medium">KONTAKT</span></li>
<li class="right-nav"><span class="medium">PRIS</span></li>
<li class="right-nav"><span class="medium">GARANTIER</span></li>
<li class="right-nav"><span class="medium">OM MEG</span></li>
</ul>
</div>
</div>
body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
header {
background: #181818;
height: 200px;
padding-top: 40px;
}
.inner {
max-width: 1000px;
margin: 0 auto;
padding: 0px 20px;
position: relative;
}
.logo {
text-decoration: none;
color: #777;
font-weight: 800;
font-size: 30px;
line-height: 40px;
}
h1 {
text-align: center;
width: 100%;
margin-top: 120px;
color: #eee;
font-weight: 800;
font-size: 40px;
}
nav > ul {
float: right;
}
nav > ul > li {
text-align: center;
line-height: 40px;
margin-left: 70px;
}
nav > ul li ul li {
width: 100%;
text-align: left;
}
nav ul li:hover {
cursor: pointer;
position: relative;
}
nav ul li:hover > ul {
display: block;
}
nav ul li:hover > a {
color: #777;
}
nav > ul > li > a {
cursor: pointer;
display: block;
outline: none;
width: 100%;
text-decoration: none;
}
nav > ul > li {
float: left;
}
nav a {
color: white;
}
nav > ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 2000;
}
nav > ul li ul li > a {
text-decoration: none;
}
[type="checkbox"],
label {
display: none;
}
#media screen and (max-width: 768px) {
nav ul {
display: none;
}
label {
display: block;
background: #222;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 0px;
}
label:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777
}
[type="checkbox"]:checked ~ ul {
display: block;
z-index: 9999;
position: absolute;
right: 20px;
left: 20px;
}
nav a {
color: #777;
}
nav ul li {
display: block;
float: none;
width: 100%;
text-align: left;
background: #222;
text-indent: 20px;
}
nav > ul > li {
margin-left: 0px;
}
nav > ul li ul li {
display: block;
float: none;
}
nav > ul li ul {
display: block;
position: relative;
width: 100%;
z-index: 9999;
float: none;
}
h1 {
font-size: 26px;
}
}
<header>
<div class="inner">
<nav>
Logo
<input type="checkbox" id="nav" /><label for="nav"></label>
<ul>
<li>Home</li>
<li>
Work
<ul>
<li>Web</li>
<li>Print</li>
</ul>
</li>
<li>Service</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
You should refer to Hanlin Chong's CodePen which utilizes #media queries to handle responsive behavior based on max-width of the screen.
Or start with the basic W3Schools Responsive Navbar tutorial: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
You should read about #media rule in CSS3. Here is url Click. There is no other way to do that without bootstrap. Good luck!
I have a navigation menu which is dropping down its list below a left floated logo in Mobile Responsive Mode. This is happening possibly due to the logo's float property. How can i make the dropdown appear just below the menu button. Click on menu atthis fiddle https://jsfiddle.net/AwesomeHat/rseuct2x/ to see.
HTML Code-
<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Whats New
<ul class="hidden">
<li>Just Launched</li>
<li>Launching Soon</li>
<li>Completed Projects</li>
</ul>
</li>
<li>Referral</li>
<li>Buyers Section
<ul class="hidden">
<li>EMI Calculator</li>
<li>Apply For Loan</li>
<li>Make an Enquiry</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
CSS Code -
#header {
background: black;
width: 100%;
height: 210px;
min-height: 100%;
}
.logo {
float: left;
padding-left: 5%;
padding-top: 25px;
}
.icon-button {
color: white;
border: 0px;
display: inline-block;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 20000;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
float: right;
width: 70px;
height: 25px;
margin-top: 90px;
margin-right: -100px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: blue;
text-align: center;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px){
.logo {
padding-left: 10%;
}
.icon-button {
font-size: 0.8rem;
line-height: 1.5rem;
width: 1.5rem;
margin-top: 60px;
}
.wikipedia {
margin-right: 7%;
}
nav ul {
position: relative;
margin-top: 0;
float: right;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
try below code, i think this can helpful for you.
#header {
background: black;
width: 100%;
height: 210px;
min-height: 100%;
}
.logo {
float: left;
padding-left: 5%;
padding-top: 25px;
}
.icon-button {
color: white;
border: 0px;
display: inline-block;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 75%;
z-index: 20000;
}
nav ul li {
display:inline-block;
float: left;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
float: right;
width: 70px;
height: 25px;
margin-top: 90px;
margin-right: -100px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: blue;
text-align: center;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px){
.logo {
padding-left: 10%;
}
.icon-button {
font-size: 0.8rem;
line-height: 1.5rem;
width: 1.5rem;
margin-top: 60px;
}
.wikipedia {
margin-right: 7%;
}
nav ul {
position: relative;
margin-top: 0;
float: right;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
nav ul li ul li {
width: 100%;
}
.hidden {
width: 100%;
}
nav ul li, li a {
width: 100%;
}
nav ul {
margin-right: 0;
margin-top: 60px;
}
nav ul li ul li a {
padding: 0 16px;
}
<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Whats New
<ul class="hidden">
<li>Just Launched</li>
<li>Launching Soon</li>
<li>Completed Projects</li>
</ul>
</li>
<li>Referral</li>
<li>Buyers Section
<ul class="hidden">
<li>EMI Calculator</li>
<li>Apply For Loan</li>
<li>Make an Enquiry</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>
I could only look fast over your Code, but i think your Menu Button is always at the same Position.
So you can add a margin-top tag to your css.
#menu {
margin-top: -37px;
}
At my Computer, this works fine. But you have to try it on mobile device.
You have set the nav ul li to be float: left;, so if you change that to float: right; like so:
#header {
background: black;
width: 100%;
height: 210px;
min-height: 100%;
}
.logo {
float: left;
padding-left: 5%;
padding-top: 25px;
}
.icon-button {
color: white;
border: 0px;
display: inline-block;
font-size: 1.0rem;
line-height: 1.7rem;
margin: 1px;
text-align: center;
width: 1.7rem;
margin-top: 60px;
float: right;
overflow: hidden;
}
.facebook {
background-color: #3B5998;
}
.twitter {
background-color: #4099ff;
}
.google-plus {
background-color: #db5a3c;
}
.linkedin {
background-color: #007fb1;
}
.wikipedia {
background-color: white;
overflow: hidden;
color: black;
margin-right: 100px;
}
.icon-button:hover {
background-color: rgba(165,219,89,1);
transition: 1s;
transform: rotate(360deg);
}
nav ul {
list-style-type:none;
margin-top: 170px;
padding:0;
position: absolute;
width: 100%;
z-index: 20000;
}
nav ul li {
display:inline-block;
float: right;
width: 14.2857%; /* fallback for non-calc() browsers */
width: calc(100% / 7);
}
nav ul li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: #fff;
background: #161616;
text-decoration: none;
}
nav ul li:hover a {
color: rgb(165,219,89);
}
nav ul li:hover ul a {
color: #fff;
height: 40px;
line-height: 40px;
}
nav ul li:hover ul a:hover {
color: rgb(165,219,89);
}
nav ul li ul {
margin-top: 0px;
display: none;
}
nav ul li ul li {
display: block;
float: none;
width: 200px;
}
nav ul li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
nav ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
float: right;
width: 70px;
height: 25px;
margin-top: 90px;
margin-right: -100px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: blue;
text-align: center;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
#media screen and (max-width : 760px){
.logo {
padding-left: 10%;
}
.icon-button {
font-size: 0.8rem;
line-height: 1.5rem;
width: 1.5rem;
margin-top: 60px;
}
.wikipedia {
margin-right: 7%;
}
nav ul {
position: relative;
margin-top: 0;
float: right;
display: none;
}
nav ul li, li a {
width: 90%;
}
nav ul li ul {
margin-top: 0px;
display: block;
}
nav ul li ul li {
width: 90%;
}
.show-menu {
display:block;
}
<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<i class="fa fa-wikipedia-w" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu ☰</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>About us</li>
<li>Whats New
<ul class="hidden">
<li>Just Launched</li>
<li>Launching Soon</li>
<li>Completed Projects</li>
</ul>
</li>
<li>Referral</li>
<li>Buyers Section
<ul class="hidden">
<li>EMI Calculator</li>
<li>Apply For Loan</li>
<li>Make an Enquiry</li>
</ul>
</li>
<li>Careers</li>
<li>Contact</li>
</ul>
</nav>
</div>