I am currently trying to make a (responsive) navigation bar, and while I have already troubleshooted with it a lot I can't find my way through it. :(
I have 2 issues at the moment.
1) In wide screen, I want to center the dropdown under its "button" title.
2) In smartphone/tablet screen, I want to make the dropdown, when appearing, push down the rest of the "button" titles and not covering them.
About 1, I have tried changing right and left attributes of the dropdown list but it justs sticks to the side of the screen no matter the changes I make to the position of dropdown list and parent element.
About 2, I have messed around with position but still I can't make it work as if it was static.
Ideally I would like to use just HTML and CSS.
Here is a demo: https://jsfiddle.net/SteliosKts/01o6cem5/10/
PS.I am sorry if it's a repost, it's just that I can't solve my prolbem although I have checked most of the relative threads
You need to:
remove position:absolute; from the .dropdownItem:hover .dropdownList.
change display: block; to display: inline-block; in .dropdownList.
remove max-height: 55px in li:nth-child(n + 2)
Add flex-basis: 30px; for mobile view.
html,
body {
font-size: 100%;
margin: 0px;
padding: 0px;
height: 100vh;
width: 100vw;
align-content: center;
text-align: center;
overflow-y: auto;
}
* {
box-sizing: border-box;
}
/*------------Top Header & Logo------------*/
#background_Header {
display: inline-block;
background-color: #9a999b;
width: 350px;
height: 100px;
}
#vertical_top_header_placeHolder {
float: left;
background-color: #9a999b;
width: 100%;
height: 45px;
position: absolute;
}
/*------------------------------------------*/
/*-------------------Navgiation Bar---------------*/
ul {
list-style-type: none;
display: flex;
justify-content: center;
/*border: 1px solid black;*/
padding-left: 0px;
}
li {
/* required for logo positioned in center */
flex-basis: 90px;
padding-top: 10px;
padding-right: 0px;
/*border: 1px solid black;*/
}
li a:hover {
background-color: #f1f1f1
}
li:first-child,
li:nth-child(n + 5) {
order: 3;
}
li:first-child {
flex-basis: auto;
z-index: 1;
}
li:nth-child(n + 2) {
padding-top: 65px;
}
li:nth-child(6) {
padding-top: 55px;
}
.dropdownItem:hover .dropdownList {
display: inline-block;
}
.dropdownButton {
display: inline-block;
text-align: center;
text-decoration: none;
color: black;
}
.dropdownList {
display: none;
position: relative;
background-color: #d6d6d6;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdownList a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/*---------------------------------------------------*/
/*---------------Smartphone Header Style---------------*/
#media only screen and (max-width: 600px) {
li:first-child {
background-color: #9a999b;
}
li {
flex-basis: 30px;
}
#vertical_top_header_placeHolder {
display: none;
}
}
/*-----------------------------------------------------*/
/*---------------Vertical Navigation Style---------------*/
#media only screen and (max-width: 900px) {
ul {
flex-direction: column;
}
.dropdownItem {}
.dropdownButton {}
.dropdownList {
margin: 0 auto;
width: 100%;
}
li {
flex-basis: 30px;
}
li:first-child,
li:nth-child(n + 5) {
order: 0;
}
li:nth-child(n + 2) {
padding-top: 10px;
}
}
/*--------------------------------------------------------*/
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700&subset=latin,greek" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600&subset=latin,greek-ext,greek" rel="stylesheet" type="text/css" />
</head>
<body>
<!--<div id="vertical_Conteiner">-->
<div id="vertical_top_header_placeHolder"></div>
<nav>
<ul>
<li>
<div id="background_Header">
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 1
</a>
<div class="dropdownList">
T1I1
T1I2
T1I3
T1I4
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 2
</a>
<div class="dropdownList">
T2I1
T2I2
T2I3
T2I4
T2I5
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 3
</a>
<div class="dropdownList">
T3I1
T3I2
T3I3
T3I4
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 4
</a>
<div class="dropdownList">
T4I1
T4I2
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 5 BigWord
</a>
<div class="dropdownList">
T5I1
T5I2
</div>
</li>
<li class="dropdownItem">
<a class="dropdownButton" href="javascript:void(0)">
Team 6
</a>
<div class="dropdownList">
T6I1
Team6_BigItem2
T6I3
T6I4
T6I5
</div>
</li>
</ul>
</nav>
<article>
<div>
</div>
</article>
</body>
</html>
Just remove the absolute from here and you will see the dropdown list in large screen some below your button and in small screen too it will come below the button:
.dropdownItem:hover .dropdownList {display: block;/* position: absolute; */}
Related
I am trying to code a menu with a mega menu option.
The top level links have an underline animation.
If the top level nav has a mega class, the mega menu container shows, but the underline animation does not.
If I lower the mega menu container, the animation does show, but as soon as the mouse moves off the top link into the container, the container hides as there is a gap because the un-hover switches it off.
Also, moving right from the top level from Option1 to Option 2, nav hides the mega container and the animation shows(correct), but moving right to the Sign In link does not hide the mega container or do the animation.
body #mainMenu {
background-color: #fff;
height: 80px;
position: absolute;
top: 0px;
left: 0;
width: 100%;
padding: 10px;
align-items: center;
display: flex;
padding-left: 40px;
padding-right: 40px;
}
#menuOptions {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: relative;
width: 100%;
padding: 0;
list-style-type: none;
font-size: 12px;
font-weight: 400;
}
#menuOptions li {
display: flex;
}
#menuOptions li a {
color: #000;
}
#menuOptions li a:link {
text-decoration: none;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: #0087ca;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: red;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.mega-container {
display: none;
position: absolute;
top: 0px;
left: 0;
height: 120px;
width: 100%;
}
.mega:hover .mega-container {
display: block;
padding-top: 30px;
}
.mega-menu {
background-color: yellow;
height: 100px;
padding: 60px;
}
<html>
<head>
<title>Mega Menu</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav id='mainMenu'>
<ul id='menuOptions'>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Sign In</a></li>
<li class='mega'><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 1</a>
<div class='mega-container'>
<div class='mega-menu'>
<p>This is mega menu 1</p>
</div>
</div>
</li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 2</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 3</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 4</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 5</a></li>
<li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 6</a></li>
</ul>
</nav>
</body>
</html>
try below code for animation with mega menu using css only.
set column in menu using float and width property of css or you can use table also.
you can use font.awesome style or html entity for icon of submenu.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: skyblue;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h4>Mega Menu</h4>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
I am trying to create a Navbar in my react app and the Navbar's dropdown doesn't appear over everything like a normal Dropdown. Excuse my CSS, I've been fooling around with the position and the z-index for a while now so I'm sure there's some thing's in there that don't make any sense lol.
Whenever I try and and inspect the code on the chrome console, I can tell that the z-index should be placing them on top of the NavBar and the position is relative so, shouldn't that do it? Any help would be greatly appreciated!
I attached a photo of the problem below as well.
Here is my DropDown HTML:
<ul className="topnav" id="myTopnav">
<li>
<img src={logo} id="logo" />
</li>
<li>
Barbershop Apparel
</li>
<li>
Politics
</li>
<li>
Business
</li>
<li className="dropdown">
<a href="#">
Dropdown <i className="Dropdown-div"></i>
</a>
<div className="dropdown-content">
<a id="dropdown-items" href="#">
Link 1
</a>
<a id="dropdown-items" href="#">
Link 2
</a>
<a id="dropdown-items" href="#">
Link 3
</a>
</div>
</li>
<li>
Entertainment
</li>
<li>
More
</li>
<li>
<img
src={facebookLogo}
id="logoFacebook"
href="https://www.facebook.com/Barbershoptalk.posts"
/>
</li>
<li>
<img
src={instaLogo}
id="logoInsta"
href="https://www.instagram.com/thebarbershop.talk/"
/>
</li>
</ul>
Here is my CSS:
/* navbar */
#logo {
height: 90px;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
}
#logoInsta {
height: 65px;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
}
#logoFacebook {
height: 65px;
width: auto;
padding-top: 5px;
padding-bottom: 5px;
}
ul {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #0062b2;
border-bottom: 2px solid #dd3333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-family: "Titillium Web", sans-serif;
font-size: 20px;
position: relative;
z-index: 10;
}
/* Change the link color on hover */
li a:hover {
background-color: #dd3333;
color: white;
}
.dropdown-content {
display: none;
background-color: #dd3333;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
position: relative;
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
position: relative;
border: solid 1px white;
z-index: 10;
}
.dropdown-items:hover {
position: relative;
list-style-type: inside;
z-index: 10;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Picture of the problem
Yeah use position:absolute for your dropdown and try follow the DRY principle while coding
try setting the dropdown to position:absolute then it will stop pushing your nav down and lay on top of it
I am writing a web and the drop-down menu button is not working. The hoverable content is not shown. May anyone tell me the reason, please. Thanks a lot!!!
Here is the code
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:100%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
The whole codings are shown above. I am not sure about the problem, yet it should be the CSS styling issues. Please someone give me a hint. Thank you very much!
You have several issues in both your HTML and CSS to solve, so the menu will work correctly.
First: The <div class="dropdown"> should contins the button, image and dropdown-content inside </div>
for example, change:
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
to
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
<br /><br />
<img src="menu.jpg" alt="Menu">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
Second: in the style of .dropdown-content, using of position: absolute; is correct but you should change left:100%; to left:0;, therefore you get the dropdown-content beside the menu-item.
Third: Add the CSS style code for hovering over the menu item, to make the sub-menu-item appears as:
.dropdown:hover .dropdown-content{
display: block;
}
Fourth: Change the background of the sub-menu-item when hovering, for example
.dropdown-content a:hover {
color: white;
background-color: red;
}
if you make the above four points, the menu will behave as expected.
and here is the full modified code of the question- just press Run the code snippet below:
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:0; /* Modified */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* adding */
.dropdown:hover .dropdown-content{
display: block;
}
/* adding */
.dropdown-content a:hover {
color: white;
background-color: red;
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Title"></button>
<br /><br />
<img src="menu.jpg" alt="MenuItem">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
Now the nav doesn't display as it should in this example when in full screen but it show correctly when in iPad mode on chrome, so for my purposes this will work.
I have totally made a submenu that pops out from the top nav before but for what ever reason this one has me stumped.
first I thought well duh! You need to change hoverableMenu{position:absolute};
and hoverable{position:relative};
and viola I would be done. However no matter what I do it either goes all the way to the left when I have float:left; and even if I wanted to I could hardcode the position using margin, but thats not an elegant solution and I know that in all honesty it is merely something that is flying over my head.
any and all help is appreciated.
Below is my minimum verifiable example.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<div id="seperator"></div>
<div id="content">
<nav>
<div class="topnav" id="myTopnav">
Home
Teaching
<a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Overview
Publications
</div>
<a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<div class="hoverableMenu">
Awards
Gallery
</div>
Contact
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
</nav>
</div>
JSFiddle
resources I accessed:
https://jsfiddle.net/davidpauljunior/pdcAF/1/
How to make sub menu float over div?
Can't click on menu links in drop down menu
EDIT
Under my media query I change the following.
div.hoverable{
display: relative;
}
div.hoverableMenu{
float:right;
display: absolute;
}
div.hoverable:focus > div.hoverableMenu{
top:1em;
left: 140px;
z-index: 99;
}
after doing this the menus are now popping up relative to their parents but they are causing the elements to the right of them to wrap around to under the rest of the nave items. Instead of the sub menu floating over the nav. :(
You have to change your structure a bit to ul li, checkout the code below
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 0;
padding: 0;
top: 40px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
Change Some CSS
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body{
margin: 0px;
background-color: lightblue;
height: 100%;
}
header{
/*This is for the header picture background*/
background-size: 100%;
background-image: url(resources/chem3D.png);
background-repeat: no-repeat;
/* vh = viewheight. Used in place of percentages when percentages don't seem to work. This is basically 30% but not really
https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh-vw-and */
min-height: 100%;
}
/*Seperate the header from the content*/
#seperator{
height: 10px;
background-color: black;
margin:0;
padding:0;
}
/*THe main content of the site. Where the Flex magic happens.*/
#content{
display: flex;
margin: auto;
height: auto;
}
/*Navigation Stuffs*/
nav{
width: 200px;
}
.topnav{
overflow: hidden;
}
/*style of links in nav*/
/* ADDED FLOAT LEFT */
.topnav a{
float: left;
display: block;
color: black;
text-align: center;
padding: 10px 5px 10px 15px;
text-decoration: none;
font-size: 1.2em;
letter-spacing: 0.1em;
}
/* Drop down menu */
a.hoverable:focus + div.hoverableMenu{
display: block;
float: left;
}
a.hoverable:hover{
color:black;
}
div.hoverableMenu{
display: none;
width: 70%;
margin-left:auto;
margin-right:10px;
}
div.hoverableMenu>a{
letter-spacing: 0em;
}
div.hoverableMenu:focus{
display: block;
}
/*//////////*/
.topnav{
overflow: visible;
}
.topnav > li {
float: left;
list-style-type: none;
}
.topnav li {
list-style-type: none;
padding: 0;
position: relative;
}
.topnav > li > ul {
display: none;
margin: 0;
position: absolute;
left: 100%;
padding: 0;
top: 0px;
}
.topnav > li:hover > ul {
display: block;
}
.topnav li {
}
.topnav:after {
content: "";
display: table;
clear: both;
}
/*//////////*/
/*Mobile views*/
/*Tablet View*/
#media screen and (max-width: 900px){
#seperator{
display: none;
}
#content{
height: 100%;
display:flex;
flex-wrap: wrap;
}
nav{
width: 100%;
flex-basis: 100%;
}
.topnav a{
float: left;
}
.topnav > li > ul {
left: 0%;
padding: 0;
top: 40px;
}
main{
width: 50%;
}
header{
display:none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
</header>
<div id="seperator"></div>
<div id="content">
<nav>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Teaching</li>
<li><a class="hoverable" href="#">Research <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu" style="
">
<li>Overview</li>
<li>Publications</li>
</ul>
</li>
<li><a class="hoverable" href="#">Students <i class="fa fa-caret-down"></i></a>
<ul class="hoverableMenu">
<li>Awards</li>
<li>Gallery</li>
</ul>
</li>
<li>Contact</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a></li>
</ul>
</nav>
<main>
</main>
<footer>
</footer>
</div>
</body>
</html>
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/