My dropdown menu is stuck behind my main div or trapped within the header. I have messed with the z-index and that has not helped. How would I be able to tell if it was the header trapping it rather than the main div hiding it.
Here is a pic of the issue:
body {
margin: 0;
font-family: arial;
}
button {
border-style: solid;
border-color: black;
border-radius: 5px;
}
a {
text-decoration: none;
color: blue;
}
#header {
overflow: hidden;
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection {
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.headerSection>.headerItem {
display: table-cell;
vertical-align: middle;
}
#asdf {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover {
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main {
margin-top: 55px;
z-index: 1;
}
<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
<div id="main">
<div style='clear:both'></div>
Does anyone have any ideas on how to fix this issue?
It happens because your header has overflow:hidden you should remove overflow hidden
please check the changes :
body
{
margin: 0;
font-family: arial;
}
button
{
border-style: solid;
border-color: black;
border-radius: 5px;
}
a
{
text-decoration: none;
color: blue;
}
#header
{
background-color: #FFF;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: solid;
border-bottom-color: black;
}
.headerSection
{
float: left;
width: 33%;
height: 100%;
display: table;
text-align: center;
}
.hidden-height-header{width:66%; float:left; height:50px; overflow:hidden}
.hidden-height-header >.headerSection {width:50%}
.headerSection > .headerItem
{
display: table-cell;
vertical-align: middle;
}
#asdf
{
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 0;
background: #1466C0;
color: #FFAD01;
border-bottom: 0;
}
#asdf:hover
{
background-color: #00B2EE;
}
.TOC {
margin-top: 25px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 999;
}
.dropdown:hover .TOC {
display: block;
}
.TOC a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
#main
{
margin-top: 55px;
z-index: 1;
}
<body>
<div id="header">
<div class="headerSection">
<div class="dropdown">
<button class="headerItem" id="asdf">☰</button>
<div class='TOC'>
<a href='#OS'>OS Information</a>
<a href='#GI'>General Information</a>
<a href='#DI'>Domain Information</a>
<a href='#SUC'>Start-Up Command</a>
<a href='#shares'>Shares</a>
<a href='#EV'>Environment Vars</a>
<a href='#proc'>Processes</a>
</div>
</div>
</div>
<div class="hidden-height-header">
<div class="headerSection">
<h1 class="headerItem">Windows Audit Script Report</h1>
</div>
<div class="headerSection">
<p class="headerItem" id="aede">Run Time: 2018-06-28 10:11:24.145067</p>
</div>
</div>
</div>
<div id="main">
<div style = 'clear:both'></div>
</div></body>
The issue is the overflow: hidden that you have set on the #header. If you remove that the dropdown should work fine.
jsfiddle: https://jsfiddle.net/1du6f928/1/
Related
I am trying to do sticky header on my existing page an I have all margins in rem but when I set up font-size for main header which contains all header content is influenced just ul list part and other margins are the same. Can you please advice me what is problem?
I want to make header more slim when I scroll down.
JQuery code:
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
CSS header code:
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8rem !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3rem;
margin: 1.225rem 0.9375rem;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375rem 0 0.9375rem 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225rem 1.875rem 1.225rem 0;
}
.mheader__search input {
width: 100%;
height: 2.3rem;
border: 1px solid #aaa;
border-radius: 0.25rem;
font-size: 1.0625rem;
padding-left: 0.25rem;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125rem;
cursor: pointer;
}
HTML code
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
Thank you
Make sure you use EM instead of REM if you want to make it relative to some parent. So all the REM sizes are based on the <html> tag.
If you do em,
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
body{
height:4000px;
}
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8em !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3em;
margin: 1.225em 0.9375em;
}
.mheader__nav {
float: left;
width: 55%;
margin: 0.9375em 0 0.9375em 0;
}
.mheader__nav-mobilemenu {
display: none;
}
.mheader__nav-list {
width: 100%;
margin: 0;
}
.mheader__nav-list li {
float: left;
width: 18%;
margin: 0 20px;
padding-left: 10px;
border-left: 1px solid #ccc;
list-style-type: none;
text-transform: uppercase;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
}
.mheader__nav-list a {
display: block;
text-decoration: none;
color: black;
}
.mheader__nav-list a:hover {
color: black;
border-bottom: 2px solid #111;
}
.mheader__search {
position: relative;
float: right;
width: 25%;
margin: 1.225em 1.875em 1.225em 0;
}
.mheader__search input {
width: 100%;
height: 2.3em;
border: 1px solid #aaa;
border-radius: 0.25em;
font-size: 1.0625em;
padding-left: 0.25em;
}
.mheader__search-button {
position: absolute;
right: 0px;
top: 4px;
}
.mheader__search button {
float: right;
border: none;
background: none;
font-size: 1.125em;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mheader">
<div class="mheader__logo">
<img src="/assets/img/logo.png" alt="">
</div>
<div class="mheader__nav">
<a href="#menu" class="mheader__nav-mobilemenu">
<img src="/assets/img/mob-menu.svg" alt="">
</a>
<!--<i class="fa fa-bars"></i>-->
<ul class="mheader__nav-list group">
<!-- use absolute path -> do not change path with subfolder-->
<li>Job </br>ToDo</li>
<li>Activity </br>Home</li>
<li></br>BLOG</li>
<li>Sign </br>Out</li>
</ul>
</div>
<div class="mheader__search">
<input type="text" placeholder="Search...">
<div class="mheader__search-button">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
</div>
</header>
I have two dropdown lists and they work as expected(that they show the content on hover) however, If I click on the area outside (left side) the list , the dropdown list still shows.
I have tried fixing the CSS but I have not been able to pin point the problem.
Is there a better approach for styling dropdown as I am still new to CSS.
UPDATE:
Testing this in firefox and I was unable to recreate the issue. How can I make sure that works consistently in all browsers?
.dropbtn {
color: white;
width: 200px;
margin-top: 160px;
margin-left: 276px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown {
position: relative;
display: inline-block;
width: 480px;
height: 0px;
background: antiquewhite;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 5px;
top: -20px;
margin-left: 283px;
}
.sphere {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
position: relative;
margin-top: 165px;
margin-left: -55px;
z-index: 2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
margin-left: -1px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a:first-child:hover {
padding-top: 35px;
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
/* SENTINAL */
.dropbtn-sentinal {
color: white;
width: 200px;
margin-top: 160px;
margin-left: 276px;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown-sentinal{
position: relative;
display: inline-block;
width: 480px;
height: 0px;
background: antiquewhite;
}
.dropdown-content-sentinal {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
/* min-width: 160px; */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right: 5px;
top: -20px;
margin-left: 283px;
}
.sphere-sentinal {
height: 45px;
width: 45px;
border-radius: 50%;
vertical-align: top;
/* position: relative; */
background: black;
display: inline-block;
position: relative;
margin-top: 165px;
margin-left: -55px;
z-index: 2;
}
.dropdown-content-sentinal a {
table-layout: fixed;
color: black;
margin-left: -1px;
padding: 12px 16px 13px 30px;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
}
.dropdown-content-sentinal a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown-sentinal a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content-sentinal a:first-child:hover {
padding-top: 35px;
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content-sentinal a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown-sentinal:hover .dropdown-content-sentinal {
display: block;
}
.dropdown-sentinal:hover .dropbtn-sentinal {
background-color: #3e8e41;
}
div#arrow-sentinal {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
div#dropdown-one {
width: 500px;
height: 198px;
}
div#dropdown-two {
margin-left: 700px;
margin-top: -198px;
}
div#dropdown-content a {
text-decoration: none;
border: solid black 1px;
display: table-caption;
background-color: rgb(237,237,238);
background: url(Images/sidearrow.png) no-repeat 7px 36px;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
<meta charset="utf-8">
</head>
<body>
<div class="averios-header">
<div id="averios-logo">
<img src="averioslogo.png" width="176" height="129">
</div>
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
<div id="header-hr">
</div>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<br>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
<div id="dropdown-two">
<div class="dropdown-sentinal">
<button class="dropbtn-sentinal">SELECT</button>
<div class="sphere-sentinal">
<div id="arrow-sentinal">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content-sentinal">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
</body>
</html>
Here - I shortened the example down a bit (I also don't think you need all that separate CSS for more than one button, you should be able to utilize the classes, and just change specifics by using #dropdown_two .classname for the things (like position) you might want to change.
The problem in Chrome, I think, was that the width of the container was wider than the button itself, and that made it misbehave. It might not be 100%, but it should get you started. I changed some values to dynamic (em instead of px) so there might be some issues.
#dropdown-one {
margin-left: 20em;
}
.dropbtn {
color: white;
width: 100%;
height: 3.2em;
font-size: 16px;
border: none;
cursor: pointer;
text-align: left;
font-weight: 900;
background: rgba(0, 173, 239, 1);
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 50px 50px 50px 50px;
position: relative;
z-index: 2;
}
.dropdown {
position: relative;
display: block;
width: 12.5em;
background:antiquewhite;
}
.dropdown-content {
display: none;
position: relative;
z-index: 1;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: -20px;
}
.sphere {
height: 2.9em;
width: 2.9em;
border-radius: 50%;
border: 2px solid rgba(0, 173, 239, 1);
/* position: relative; */
background: black;
position: absolute;
top: 0;
bottom: 0;
right: .1em;
z-index: 2;
}
.dropdown-content a {
table-layout: fixed;
color: black;
padding: .75em;
text-decoration: none;
display: block;
border: 1px solid #000;
border-top: none;
font-size: 21px;
box-sizing: border-box;
}
.dropdown-content a:first-child {
padding-top: 35px;
background: url("Images/sidearrow.png") no-repeat 7px 36px;
}
.dropdown a {
background:url("Images/sidearrow.png") no-repeat 7px;
}
.dropdown-content a:first-child:hover {
background: url("Images/sidewhite.png") no-repeat 3px 36px;
color:black;
background-color: rgb(255,131,0);
}
.dropdown-content a:hover {
background:url("Images/sidewhite.png") no-repeat 3px;
background-color: rgb(255,131,0);
color:white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
div#arrow {
position: absolute;
margin-left: 10px;
margin-top: 11px;
}
<div class="averios-header">
<div id="setting-dropdown">
<!-- SETTING DROPDOWN WILL GO HERE -->
</div>
</div>
<div id="log-in">
<div id="loginHeader">
<h1>Portal</h1>
</div>
<div id="welcome-text">
<p> Welcome name </p>
<p> Your last login was time on date </p>
<p> Please select an application below to begin </p>
</div>
</div>
<div id="dropdown-one">
<div class="dropdown">
<button class="dropbtn">SELECT</button>
<div class="sphere">
<div id="arrow">
<img src="C:\Users\mseh\Desktop\Images\arrow.png" width="29" height="27" alt=""/>
</div>
</div>
<div class="dropdown-content">
Link 1
Link 1
Link 1
Link 1
</div>
</div>
</div>
I want the dropdown on my navbar to be wide enough the the text in it displays properly, but it's constrained to the size of the button you hover over to activate it. I want the dropdown to be a bigger width than the button.
The title displays fine in browser so not too sure why it is misaligned in the fiddle.
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
position: relative;
display: inline-block;
}
#dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
Add right: 0; to #dropdown-content.
#center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
#dropdown {
float: right;
position: relative;
display: inline-block;
}
#dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
You can use display:flex,instead of using float's and display:inline-block for layouts.
check this snippet
. #center-title {
width: 200px;
font-size: 30px;
color: white;
position: fixed;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
#cog {
width: 20px;
height: 20px;
margin-right: 50px;
margin-top: 15px;
}
.center {
margin: auto;
}
#dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0#2);
}
#dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#dropdown-content a:hover {
background-color: #f1f1f1
}
#dropdown:hover #dropdown-content {
display: block;
}
nav {
background-color: #2b569a;
width: 100%;
height: 50px;
margin-top: 0;
display: flex;
justify-content: flex-end;
align-content: center;
}
<nav>
<div class="center">
<h1 id="center-title"> Blocs </h1>
</div>
<div id="dropdown">
<img id="cog" src="/static/images/cog2.png" alt="" />
<div id="dropdown-content">
Profile
Settings
Logs
Email list
</div>
</div>
</nav>
</div>
Hope it helps
Here's the link for the fiddle: https://jsfiddle.net/LpLp75zm/
The problem is that although I've assigned a position:fixed attribute to the topbar (the red colored part) it won't accompany the side navigation menu when I scroll down.
<!DOCTYPE html>
<html>
<head>
<style>
* { margin:0;padding:0;}
div.container {
position: relative;
}
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
width: 100%;
z-index: 1;
position: fixed;
}
a.left-top-bar {
font-family: ISOCPEUR;
background-color: #0e0e0e;
color: whitesmoke;
width: 200px;
text-align: center;
font-size: 30px;
padding: 5px 0 15px 0;
height: 30px;
position: fixed;
text-decoration: none;
z-index: 2;
}
div.sidenav {
background-color: #b5b5b5;
width: 200px;
height: 100%;
position: fixed;
top: 50px;
z-index: 3;
}
ul {
width: 200px;
background-color: #b5b5b5;
list-style-type: none;
}
li.main a {
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
li.main a:hover {
background-color: #343434;
}
div.center {
background-color: #a1b9a4;
position: absolute;
left: 200px;
top: 50px;
height: 1000px;
width: 1141px;
padding-top: 25px;
padding-left: 25px;
z-index: 2;
}
div.dropbtn {
height: 23px;
padding: 10px 0 10px 15px;
font-family: Calibri;
display:block;
text-decoration: none;
color: white;
}
div.dropbtn:hover {
background-color: #343434;
}
div.dropdown-content {
display: none;
background-color: #343434;
width: 200px;
height: 129px;
text-align: center;
position: relative;
left: 185px;
bottom: 29px;
}
a.dropdown {
text-decoration: none;
color: white;
font-family: Calibri;
display: block;
padding: 12px 0 12px 0;
}
a.dropdown:hover {
background-color: #b5b5b5;
}
div.dropbtn:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar"></div>
<a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>
<div class="sidenav">
<ul>
<li class="main">Home</li>
<li class="main">Facebook</li>
<li class="main">Quora</li>
<li class="main">Reddit</li>
<li class="dropdown">
<div class="dropbtn">Dropdown
<div class="dropdown-content">
<a class="dropdown" href="#">Text<br></a>
<a class="dropdown" href="#">Link 2<br></a>
<a class="dropdown" href="#">Link 3<br></a>
</div>
</div>
</li>
</div>
<div class="center">
<h1>Test text</h1>
<p style="padding-top: 10px";>
Lorem Ipsum
</p>
</div>
</div>
</body>
</html>
The problem is not that the red bar scrolls up, but that the green .center div scrolls up on top of it.
Solution: decrease the z-index of the .center div to below 1, so that it appears behind the red bar.
* {
margin: 0;
padding: 0;
}
div.container {
position: relative;
}
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
width: 100%;
z-index: 1;
position: fixed;
}
a.left-top-bar {
font-family: ISOCPEUR;
background-color: #0e0e0e;
color: whitesmoke;
width: 200px;
text-align: center;
font-size: 30px;
padding: 5px 0 15px 0;
height: 30px;
position: fixed;
text-decoration: none;
z-index: 2;
}
div.sidenav {
background-color: #b5b5b5;
width: 200px;
height: 100%;
position: fixed;
top: 50px;
z-index: 3;
}
ul {
width: 200px;
background-color: #b5b5b5;
list-style-type: none;
}
li.main a {
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
li.main a:hover {
background-color: #343434;
}
div.center {
background-color: #a1b9a4;
position: absolute;
left: 200px;
top: 50px;
height: 1000px;
width: 1141px;
padding-top: 25px;
padding-left: 25px;
z-index: 0;
/* here */
}
div.dropbtn {
height: 23px;
padding: 10px 0 10px 15px;
font-family: Calibri;
display: block;
text-decoration: none;
color: white;
}
div.dropbtn:hover {
background-color: #343434;
}
div.dropdown-content {
display: none;
background-color: #343434;
width: 200px;
height: 129px;
text-align: center;
position: relative;
left: 185px;
bottom: 29px;
}
a.dropdown {
text-decoration: none;
color: white;
font-family: Calibri;
display: block;
padding: 12px 0 12px 0;
}
a.dropdown:hover {
background-color: #b5b5b5;
}
div.dropbtn:hover .dropdown-content {
display: block;
}
<div class="container">
<div class="topbar"></div>
<a class="left-top-bar" href="https://www.wikipedia.org" target="_blank">This Website </a>
<div class="sidenav">
<ul>
<li class="main">Home
</li>
<li class="main">Facebook
</li>
<li class="main">Quora
</li>
<li class="main">Reddit
</li>
<li class="dropdown">
<div class="dropbtn">Dropdown
<div class="dropdown-content">
<a class="dropdown" href="#">Text<br></a>
<a class="dropdown" href="#">Link 2<br></a>
<a class="dropdown" href="#">Link 3<br></a>
</div>
</div>
</li>
</ul>
</div>
<div class="center">
<h1>Test text</h1>
<p style="padding-top: 10px" ;>
Lorem Ipsum
</p>
</div>
</div>
Try using 3 for z-index value for div.topbar
div.topbar {
background-color: #f44336;
font-size: 25px;
height: 50px;
position: fixed;
width: 100%;
z-index: 3;
}
This question was posted a few years ago By Sally but she solved it herself and her solution is not working for me.
I have gone through practically all of the relevant sticky footer pages on this site and a bunch from other places but I cannot find anything answering this question. I am sure it has to do with my layout but I have tried every way I have researched and can think of and this is the closest I could get to a sticky footer I am happy with.
Here is the HTML I am working with.
<body>
<div id="container">
<header class="main-header">
<img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<body class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs">
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="quote">
<h6>""</h6>
<p> - </p>
</div>
</footer>
</div>
</body>
and the CSS
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content: " ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover{
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
.footer .quote {
float: right;
color: rgb(56, 56, 56);
}
.footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
.footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
Here is my JSfiddle
In my normal full screen the three 300px x 300px squares fit in a line and everything is well and good but when the window size is reduced (like the one in my fiddle) the squares turn into two lines and are pushed off the screen. The footer stays in place at the bottom of the screen until you scroll then it just stays put and does not follow the bottom of the page.
I would like the footer to either get pushed to the bottom of the screen when the squares get forced into two lines.
-or-
Stay at the bottom of the screen and scroll with the user.
Any help would be very much appreciate!
I removed the excess body and turned it into a div. I ended the container before the footer and added a push div, equal in height to the footer. Seems to work now. Check out the fiddle
/*header*/
.main-header {
display: inline-block;
position: relative;
margin: 1%;
width: 98%;
top: 0;
left: 0;
min-width: 904px;
z-index: 10;
border: 0px solid #2675a9;
border-top: none;
border-radius: 0 0 0 0;
background-color: #606060;
background-color: rgb(29, 67, 129);
-webkit-box-shadow:0 1px 5px black;
-moz-box-shadow:0 1px 5px black;
box-shadow:0 1px 5px black;
}
.main-header:after {
content:" ";
display: table;
clear: both;
}
.main-header li {
display: inline;
}
.main-header img {
position: relative;
float: left;
top: 5.5px;
left: 5.5px;
width: 60px;
height: 60px;
}
.main-nav {
float: left;
margin: 12.5px 0 12.5px 5px;
padding: 0;
}
.main-nav a {
text-shadow: 0.06em 0.08em #2666b1;
letter-spacing: 4px;
color: #ebebeb;
font-family: StonyIsland;
display: block;
font-size: 2.5em;
padding: 0px 10px;
text-decoration: none;
margin: 0px;
font-weight: 300;
}
.logo {
height: 50px;
width: 50px;
top: 0;
left: 0;
padding: 10.5px;
margin: 0;
}
.second-nav {
float: right;
border-radius: 4px;
margin-bottom: 5px;
margin-top: 5px;
margin-left: 0;
margin-right: 0;
border: none;
padding: 9.5px;
}
.second-nav > li {
float: left;
border: solid 1px #ebebeb;
border-bottom: none;
border-top: none;
border-right: none;
}
.second-nav li:first-child {
border-left: none;
}
.second-nav li:second-child {
border-left: none;
}
.second-nav a {
color: #ebebeb;
display: block;
font-family: Capsuula;
font-size: 1.13em;
padding: 10px 30px;
text-decoration: none;
}
a:hover {
text-shadow: none;
color: rgb(237, 12, 12);
}
/*body*/
html {
position: relative;
height: 100%;
overflow-x: hidden;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 1.5em;
}
#wrap {
min-height: 100%;
}
#main {
padding-bottom: 60px;
}
body {
height: 100%;
margin: 0 0 60px;
background-color: rgb(255, 255, 255);
}
/*body location*/
#thumbs {
width: auto;
margin: 0;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
#thumbs a {
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4em;
margin-top: 12%;
}
#thumbs img {
width: 300px;
height: 300px;
background-color: grey;
border-radius: 60px;
box-shadow: 0 1px 20px black;
}
.caption {
display: block;
}
/*footer*/
.push{height:60px;}
footer {
position: relative;
left: 0;
bottom: 0;
height: 60px;
width: 100%;
background-color: rgba(255, 255, 255) transparent;
background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
float: right;
color: rgb(56, 56, 56);
}
footer h6 {
font-size: 15px;
font-family: Capsuula;
margin: 0;
padding: 7px;
}
footer p {
font-size: 21px;
font-family: Capsuula;
float: right;
margin: 0;
padding;
5px;
padding-right: 12px;
}
<body>
<div id="container">
<header class="main-header"> <img src="logo3.png" alt="logo" />
<ul class="main-nav">
<li><a id="home" href="index.html">Home</a>
</li>
</ul>
<ul class="second-nav">
<li><a id="about" href="About.html">About Us</a>
</li>
<li><a id="portfolio" href="Portfolio.html">Portfolio</a>
</li>
<li>Sports Complex
</li>
<li>Contact Us
</li>
</ul>
</header>
<div class="body">
<div class="frameT">
<div class="frameTC">
<div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">_______</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
<span class="caption">________</span>
</a>
<span class="stretch"></span>
</div>
</div>
</div>
</div>
</div>
<div class="push"></div>
<footer class="footer">
<div class="quote">
<h6>"Hello"</h6>
<p>-</p>
</div>
</footer>
</body>