I am trying to have a menu that takes up 100vh when the menu button is clicked. However, I also have a header at the top so the menu content is lower than it. How do I make the menu go on top of the header? I'm trying to do this without making the header display: none because I want it to be shown on the side - in the left over space from making the menu have a view width of 80vw.
header {
height: 3.4rem;
display: grid;
align-items: center;
z-index: 1;
}
.menu {
z-index: 2;
position: relative;
background-color: #000;
margin-left: 4rem;
}
.menu-container {
width: 80vw;
height: 100vh;
margin-left: 2.5rem;
margin-top: 2rem;
}
<header>
<div class="header-container">
<div class="left">
<img src="img/logo.jpg" alt="">
</div>
<div class="right">
<img src="img/user.png" alt="">
<i class="fa-solid fa-bars fa-xl"></i>
</div>
</div>
</header>
<nav class="menu">
<div class="menu-container">
<div class="top-menu">
Premium
Support
Download
<div class="menu-line"></div>
</div>
<div class="bottom-menu">
Account
Log out
</div>
<img src="img/logo.jpg" alt="">
</div>
</nav>
(I did not add all the CSS to do with the menu and header because the rest of it is irrelevant.)
How do I move the menu to go on top?
I think position: relative is not set properly, it should only be on a parent that contains both header and nav. And then set the following css :
.menu {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 80vw;
}
Add margin and background if you want.
Now nav should be above header.
I believe the issue lies in the position and z-index of your .menu and header css. Try making the position: absolute for both absolute and change the z-index of menu to 1 and header to 2 so that it shows menu on top of header.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Related
There is a menu button on the page. When a user taps the button full-page menu opens. There is a problem - the main content page automatically scrolls to the top. Could you advise me on how to prevent it? I've already checked a similar question here How to disable scrolling in the background when the mobile menu is open?, but nor position:fixed or oveflow:hidden helped
const menuOpen = document.querySelector('.menu-open');
const menuClose = document.querySelector('.menu-close');
const body = document.querySelector('.root');
function lockScroll() {
body.classList.add('lock');
}
function unLockScroll() {
body.classList.remove('lock');
}
menuOpen.addEventListener('click', lockScroll);
menuClose.addEventListener('click', unLockScroll);
.lock {
position: fixed;
height: 100vh;
overflow-y: hidden;
}
.menu-open {
position: fixed;
top: 0;
right: 0;
cursor: pointer;
transition: all ease 0.6s;
border: 0;
background: none;
padding: 1rem 1rem 2rem 2rem;
}
.nav-container {
position: absolute;
left: -100%;
width: 100%;
height: 100vh;
background: #f5f5f1;
z-index: 5;
}
<header class="header">
<button type="button" class="menu-open"><img src="./images/menu.svg" alt=""></button>
<div class="nav-container">
<button type="button" class="menu-close"><img src="./images/close.svg" alt=""></button>
<div class="menu__wrapper">
<div class="socials">
<img src="./images/logo.png" alt="" class="logo" title="">
</div>
<nav class="menu">
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
menu
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
<div class="menu__item">
<a class="menu__item-link">menu</a>
</div>
</nav>
</div>
</div>
</header>
doesn't help.
I think your main body elements are positioned static (or relative if defined?), untill you change it by overriding with position fixed.
A better behaviour would be to leave your nav container be positioned absolute on "menuOpen" and leave the remainder of elements in their already defined flow so your full screen simply overlay's the rest of the elements.
I am trying to make just the pages on my website that have the main body content class of ".interior-health-main" have a footer that is static at the bottom of the page. I want it at the absolute bottom, currently if you view some of my pages on a large screen, you will see a bunch of white space after the footer. I want to get rid of this.
I have been looking into this for hours now and tried many things, at first I was going to make the footer on the entire website static at the bottom of the page, but setting the footer's css to position: absolute conflicted with other elements on my home page, which is why I just want it on the ".interior-health-main." If it is possible to change it just for the footers on these pages please let me know, I do not really want examples of fixing this by setting the entire body to position:relative. It just messes up my homepage.
Here is an example of what it looks like with the white space after the footer http://codepen.io/aahmed2/full/KgWNYL/
<p class="nav">This is a Navigation Bar</p>
<div class="interior-health-main">
<div class="container">
<ol class="breadcrumb">
<li>Home</li>
<li>Health Resources</li>
<li class="active">Sample Short Page</li>
</ol>
<h2>Sample Short Page</h2>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h4>Contact Us</h4>
<p>414 Hardin Hall<br> 3310 Holdredge St<br> Lincoln, NE 68583<br> (402) 472-7363</p>
<div class="affiliates">
<img class="wordmark" src="../_logos/wordmark.svg" alt="University of Nebraska-Lincoln Wordmark">
<img class="extension" src="../_logos/n-extension-rev.svg" alt="Nebraska Extension Logo">
</div>
</div>
<div class="col-sm-4">
<h4>Quick Links</h4>
<p>Human Health</p>
<div class="line"></div>
<p>Pet Diseases</p>
<div class="line"></div>
<p>Livestock Diseases</p>
<div class="line"></div>
<p>Events</p>
<div class="line"></div>
</div>
<div class="col-sm-4">
<h4>Attention</h4>
<p>All information on this site is intended for informational use only. Contact your doctor or veterinarian for health concerns.</p><br>
<h5><a class="partner" href="#">Partners & Stakeholders</a></h5>
</div>
</div>
<div class="copyright">
<div class="col-xs-9">
<h6>© 2016 Nebraska One Health. Site Map.</h6>
</div>
<div class="col-xs-3">
<img class="social pull-right" src="../_logos/twitter-logo-button.svg" alt="twitter icon">
<img class="social pull-right" src="../_logos/facebook-logo-button.svg" alt="facebook icon">
</div>
</div>
</div>
</div>
Here is my css
.nav {
text-align: center;
padding: 25px 0;
background-color: #c1c0be;
color: #fff;
position: fixed;
width: 100%;
z-index: 2;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 20px;
}
#media (max-width: 479px) {
.interior-health-main {
padding-top: 50px;
}
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
}
You can position the footer absolute like they did here
https://getbootstrap.com/examples/sticky-footer/
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
/* background-color: #f5f5f5; */
}
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
How did it conflict when you tried your way? update your post with what you did?
Please reference this question to find your solution.
I applied one of the solutions from the above link to your code.
Wrap your code in a #holder div.
Add the following CSS:
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
.footer {
background: #333332;
border-top: 9px solid #ffffff;
color: #fff;
padding-top: 35px;
padding-bottom: 35px;
height: 300px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
.interior-health-main {
padding-top: 80px;
padding-bottom: 300px; /* height of footer */
}
Here is the working fiddle:
https://jsfiddle.net/DTcHh/25475/
I wrapped your page (not containing footer) into .page-wrap div, and edit you codePen code and just add this piece of code to your css
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height (with margin and border) */
margin-bottom: -299px ;
}
.page-wrap:after {
content: "";
display: block;
}
.footer, .page-wrap:after {
/* page-wrap after content must be the same height as footer */
height: 299px;
}
Demo
I am currently having an issue with parallax scrolling. I am using a custom JavaScript solution which moves the content over the initial background image. It works totally fine, however, the initial background photo is still visible underneath the content. Here are some code snippets.
#home {
position: relative;
width: 100vw;
height: auto;
}
#home_img {
min-width: 100vw;
width: 100vw;
height:auto;
position: relative;
z-index: -1;
}
#content {
position: relative;
z-index: 1;
}
And here is my html
<section class="section"id="home">
<img id="home_img"src="images/homepagenew2.png">
<!-- <i class="fa fa-home"></i> -->
</section> <!-- End Home Div -->
<div id="content">
.....
</div>
I'm having a problem trying to get both a fixed top navigation and a sticky footer to work, without hiding the footer 40px off the bottom. The jquery script i'm using is meant to fix this, but it doesn't. I can't use bootstrap or anything similar. So this is my only option.
The HTML
<div id="container">
<nav role="navigation" id="cssmenu">
<ul>
<li class="active">Home</li>
<li class="has-sub">Courses
<ul>
<li><span>Digital Media</span></li>
<li><span>Web Development</span></li>
<li><span>Journalism</span></li>
<li class="last"><span>Information & Communications</span></li>
</ul>
</li>
</ul>
<div id="wrapper">
<header role="banner" id="banner">
<div class="not-fullscreen background" style="background-image:url('http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg');" data-img-width="1600" data-img-height="1064">
<div class="content-a">
<div class="content-b">
<h1>header1</h1>
<h2>header 2</h2>
</div>
</div>
</div>
</header>
<div class="content">
<main role="main" id="skipnav">
<p>Intro paragraph</p>
</main>
</div>
</div>
<footer class="footer" id="footer">
<div class="container2">
<p>footer</p>
</div>
</footer>
</div>
The Jquery script -
$(document).ready(function(){
var footer_height=$("#footer").height();
$("#wrapper").css({
'padding-bottom' : footer_height
});
});
Css can be found here
The full website can be found here
Thanks in advance.
you can do using css only no need to use jquery
#footer {
bottom: 0;
position: fixed;
}
nav {
top : 0;
position: fixed;
}
You need to place footer inside wrapper and use position fixed for the footer instead of position absolute; Furthermore, the only reason to use jQuery to calculate the padding is if your footer does not have fixed height (now you use height: 40px). You also need to give to your wrapper padding top = height of your header.
Try this:
#footer {
position: fixed;
bottom: 0px;
width: 100%;
left: 0px;
height: auto;
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
/* padding: calculated 0 calculated; */
#container {
position: relative;
width: 100%;
height: 100%;
}
Few things to change:
body was having padding-top:40px; which is making the body to overflow. So remove that padding from body.
and #wrapper need to be:
#wrapper {
position: absolute;
width: 100%;
height: 100%;
}
remove that jquery part and padding-bottom line from wrapper.
and make footer to be position: fixed;
I have this menu, that (when you hover over an icon) makes the icon bigger. What I tried to achieve is, to have it display correctly from both sizes, which doesn't quite work. It only works from the left side, because of the unordered list, but is there a way to make it work from both sides? (basically so the icon covers the one to the right and the one to the left without pushing it). I have this:
HTML:
<!-- START OF THE MENU !-->
<div class="menu-outer" style="font-family: 'Open Sans', sans-serif;;">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul class="menu">
<center>
<img class="icon" src="games.png">
<img class="icon" src="home.png">
<img class="icon" src="contact.png">
<img class="icon" src="wai.png">
<img class="icon" src="wita.png">
</center>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<!-- END OF THE MENU!-->
CSS:
.icon{
display: inline-block;
margin-right: -5;
}
.icon:hover{
width: 155px;
margin: -15px -22px -15px -13px;
}
.menu{
z-index: 10;
}
Thanks for all the help.
If anything, it's all uploaded here (in the right corner menu):
http://goolag.pw/delete2.html
Add the following to your CSS:
.icon{
position: relative;
z-index: 10;
}
.icon:hover{
z-index: 100;
}
By increasing the z-index, the hovered icon is moved up in the DOM-layer, and displayed above the other icons.
You need to use z-index, but in order to do that, you need to add the element a positioning. I tried this and worked:
.menu a:hover{
z-index: 150;
position: relative;
}
You may want to set all the images' z-index property to a negative value and when the image hovers, set it to a positive one. I don't know if this is a bug but that's how it behaves, take a look at this fiddle:
#one {
width: 100px;
height: 40px;
background: red;
z-index: 10;
}
#two {
width: 100px;
height: 40px;
background: blue;
position: relative;
top: -20px;
left: 20px;
z-index: -1;
}
If you set the first element's z-index to a >0 value, it won't show over the second one until it's z-index is set to something <0.