I'm trying to get my dropdown menu to stay above iframe elements on a page. I know this question is asked often, but my issue is that my iframe goes out of whack when I set the position to relative rather than absolute, so (as far as I can tell) I can't use z-index. I know my code is pretty messy, I'm essentially just trying to keep the video in the center of the page at the same proportions while also maintaining responsiveness, and then keep the dropdown above the video.
Here's my CSS
.dropbtn {
background-color: inherit;
font-family: 'Inconsolata', monospace;
color: red;
font-size: 18px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
min-width: 50px;
background-color: white;
padding: 10px;
}
.dropdown-content a {
text-decoration: none;
display: block;
margin-top: 10px;
}
.dropdown-content a:hover {
color: black;
text-shadow: 1px 1px rgba(256, 0, 0, .4);
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: white;}
Here's the HTML
<nav>
<a class="logo" href="index.html"></a>
<div id="navbar">
<span class="dropdown">
<button class="dropbtn">work</a></button>
<div class="dropdown-content">
video
design
photo
</div>
</span>
about
submit
store<br>
</div>
</nav>
<style>
#vidframe {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
#vid {
position: absolute;
top: 0;
left: 0;
width: 60%;
height: 60%;
margin-left: 20%;
border: 0;
}
</style>
<body>
<div id="vidframe">
<iframe id="vid" src="https://www.youtube.com/embed/zb_m_ZomwHA" frameborder="0"></iframe>
</div>
</body>
Here is a simple solution based on your code:
.dropbtn {
background-color: inherit;
font-family: 'Inconsolata', monospace;
color: red;
font-size: 18px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 50px;
background-color: white;
padding: 10px;
z-index: 2;
}
.dropdown-content a {
text-decoration: none;
display: block;
margin-top: 10px;
}
.dropdown-content a:hover {
color: black;
text-shadow: 1px 1px rgba(256, 0, 0, .4);
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: white;
}
#vidframe {
overflow: hidden;
text-align: center;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
z-index: 1;
}
#vid {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
<nav>
<a class="logo" href="index.html"></a>
<div id="navbar">
<span class="dropdown">
<button class="dropbtn">work</button>
<div class="dropdown-content">
video
design
photo
</div>
</span>
about
submit
store
<br>
</div>
</nav>
<div id="vidframe">
<iframe id="vid" src="https://www.youtube.com/embed/zb_m_ZomwHA" frameborder="0"></iframe>
</div>
Related
i am curios on how i would get a logo above the Navbar
Like this:
I am not really sure how i can achieve this, i basically want the navbar to not be at the very top, but have the logo-top at the top of the site, then have the Navbar centered on the Logo, while the Logo is above the Navbar, so basically a part of the Navbar should be hidden behind it, and then align the buttons left and right of it
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: grey;
}
.navbar a {
display: inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown .dropbtn {
display: inline-block;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
.logo {
width: 10% !important;
height: 10% !important;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
<div class="navbar" align="center">
Home
News
<img src="https://via.placeholder.com/50" width="5%; height=5%; z-index: 10">
<div class="dropdown">
<button class="dropbtn">Server
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" align="center">
Server 2
Server 1
</div>
</div>
Discord
</div>
You could use flex box model and play around with the negative margin on the logo (I use .middle-logo class in here as an example):
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
background-color: grey;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.navbar a {
display: inline-block;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown .dropbtn {
display: inline-block;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky+.content {
padding-top: 60px;
}
.logo {
width: 10% !important;
height: 10% !important;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
}
.middle-logo {
height: 66px;
margin-top: -10px;
margin-bottom: -10px;
display: inline-block;
width: 66px;
}
<div class="navbar" align="center">
Home
News
<img src="https://w7.pngwing.com/pngs/107/759/png-transparent-circle-white-circle-white-monochrome-black-thumbnail.png" width="5%; height=5%; z-index: 10" class="middle-logo">
<div class="dropdown">
<button class="dropbtn">Server
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" align="center">
Server 2
Server 1
</div>
</div>
Discord
</div>
I used a random width/height here though, but the important part here is to use that negative margin, you could just adjust it according to your need
You can change the layer of your image/logo with z-index in css
I am trying to add a sticky nav bar to a sample web page I am creating. A working sample of the code is attached below. However, when I scroll all the way down, my nav bars dropdowns stop working. It works fine when scrolling up again. I am not sure what is wrong here. Appreciate any thoughts on what is going wrong here.
.header {
padding: 10px;
text-align: center;
background: black;
color: white;
}
.navbar {
overflow: hidden;
background-color: #47494f;
z-index: 5;
}
.keepItTop {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
/* Style the navigation bar links */
.navbar a {
float: left;
font-size: 16px;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/*Dropdown Menu*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 6;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.homeVideo {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header">
<h1>Sample WebPage</h1>
</div>
<div class="keepItTop">
<div class="navbar">
Home
About Me
<div class="dropdown">
<button class="dropbtn">Games
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Swimming
Badminton
</div>
</div>
Contact Us
</div>
</div>
<div>
<video class="homeVideo" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
Your video has a higher z stacking level than your menu. Bring the menu above it.
.header {
padding: 10px;
text-align: center;
background: black;
color: white;
}
.navbar {
overflow: hidden;
background-color: #47494f;
z-index: 5;
}
.keepItTop {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
z-index: 99; /* <----------------------- HERE */
}
/* Style the navigation bar links */
.navbar a {
float: left;
font-size: 16px;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #ddd;
color: black;
}
/*Dropdown Menu*/
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 6;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.homeVideo {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header">
<h1>Sample WebPage</h1>
</div>
<div class="keepItTop">
<div class="navbar">
Home
About Me
<div class="dropdown">
<button class="dropbtn">Games
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Swimming
Badminton
</div>
</div>
Contact Us
</div>
</div>
<div>
<video class="homeVideo" autoplay muted loop>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
I have tried to follow this tutorial, but I can't seem to find out why the dropdown menu won't show up at all when hovering over the dropdown button in the nav bar.
This is the HTML part of the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
New
Sales
Account
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
This is the CSS part of the code:
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 30px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.new_sale {
background-color: green;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
The problem is that you are hiding the content which goes over the boundaries of your navbar and dropdown.
You need to remove
overflow: hidden;
from your #navbar and .dropdown class, check this fiddle
I'm trying to implement a navigation system with a drop down menu. This menu will also have an extra menu that drops to the right. Without using lists.
I'm having difficulties positioning the right down menu. What I'm trying to do is have a menu pop out on the same height but at the right side of the hovered button.
How I wanted to do this was by using absolute position.
What I understand is that
position: absolute; refers to the first positioned parent.
In my case, i'm assuming:-
"navbar" -- Parent
"subnav" -- 1st Child
"subnav-content" -- 2nd child
"subnav-content-subnav" -- 3rd child
"subnavbtn2x" -- 4th child
.subnav-content2x{
position: absolute;
}
When I add the above code, from which class is the position being referenced?
My plan was to have the position from subnavbtn2x
referenced in positioning the right down menu.
Or perhaps someone has a better way of doing it?
HTML
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
CSS
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
Expected result: https://imgur.com/zi4rrgX
current result: https://jsfiddle.net/RBee/cLsgpa5w/
Add
.subnav-content-subnav{
position: relative;
}
.navbar {
overflow: hidden;
}
.subnav {
overflow: hidden;
float: left;
}
.subnav-content {
display: none;
position: absolute;
background-color: #7E8185;
min-width: 160px;
z-index: 1;
}
.subnav-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: black;
margin: 0;
}
.subnavbtn2x {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: -16px -16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.subnav-content2x {
display: none;
position: absolute;
background-color: #7E8185;
margin-left: 1px;
top: 1%;
left: 100%;
min-width: fit-content;
z-index: 1;
}
.subnav-content2x a {
float: left;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: #7E8185;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav .subnav-content-subnav:hover .subnav-content2x {
display: block;
}
/* ===== Edit ===== */
.subnav-content-subnav{
position: relative;
}
<div class="navbar">
<div class="subnav">
<button class="subnavbtn">First Nav</button>
<div class="subnav-content">
Some page
Some page
Some page
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Second nav</button>
<div class="subnav-content">
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right first</button>
<div class="subnav-content2x">
Right 1
Right 2
</div>
</div>
<div class="subnav-content-subnav">
<button class="subnavbtn2x">Right Second</button>
<div class="subnav-content2x">
Right 3
Right 4
</div>
</div>
</div>
</div>
</div>
Live preview: https://jsfiddle.net/v41ubmn8/
add .subnav-content-subnav {position: relative;}
I've made a top bar that contains drop-down MENU button on the right side. But this drop-down content has exactly the same size (width) as my MENU button. Finally - my goal is to make this drop-down content as wide as the top bar is.
My HTML code looks like this:
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
And more important part - CSS:
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
If you want to see how does it look like HERE is jsFiddle link.
Don't you have any idea how to solve my problem?
Just move position: relative from .dropdown to #top-bar.
By doing this, .dropdown-content will calculate width according to the nearest element with position: relative i.e #top-bar.
#top-bar{
position: relative;
height:40px;
float: left;
width: 100%;
background-color: black;
}
.dropbtn {
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
float: right;
}
.dropdown-content {
display: none;
left: 0;
top: 100%;
position: absolute;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
I think that's what you want
#top-bar{
left: 0;
top: 0;
float: left;
width:100%;
height:40px;
background-color: black;
}
.dropbtn {
display: block;
float: right;
background-color: blue;
color: white;
height: 40px;
font-size: 12px;
border: none;
cursor: pointer;
}
.dropdown {
width: 100%;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
float: left;
background-color: #f9f9f9;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
width: 100%;
float: left;
left: 0;
}
.dropdown:hover .dropbtn {
background-color: blue;
}
<div id="top-bar">
<div class="dropdown">
<button class="dropbtn">MENU</button>
<div class="dropdown-content">
Link
Link
Link
</div>
</div>
</div>
https://jsfiddle.net/69uts0dr/3/