I have a script in PHP where i'm defining the menus and navbars of the website. I have a top menu that when you scroll down the page, it gets fixed to the top of the page. I want to have a second menu on the left "glued" to the top menu. The way I have done it, it goes well when the top menu reaches the top of the page, it gets fixed with the left menu like I want. The problem is that if the top menu doesnt reach the top of the page (like if it's just a little bit of scroll), the left menu doesnt get stick to the top menu.
The top menu is the one that has "Inicio", "Instrucciones" etc. The left menu is the one that has "Nueva cata", "Nueva cerveza", etc.
This is the page at the beginning (0 scroll).
This is the page after the top menu reaches the top of the page (>200 scroll).
This is the page before the top menu reaches the top of the page (0 < scroll < 200).
As you can see in the third page, the left menu goes down with the scroll instead of going up with the top menu.
This is HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
This is CSS:
#menu_izq {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 252px;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba{
background-color: #503522;
width: 100%;
z-index: 1;
}
This is my JQuery:
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
$("#menu_izq").css('position','fixed').css('top', '35');
} else {
$('#menu_arriba').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$("#menu_izq").css('top', '250');
}
});
I know the problem is in the JQuery method but i don't get to write what I want. Thank you very much.
----- EDIT
The way I'm doing my website is with a menus.php where I write the top and left menu like this
<?php function izquierda() { ?>
<nav id="menu_izq" class="sidenav">
<div></div>
<p>Nueva Cata</p>
<p>Nueva Cerveza</p>
<p>Mis catas</p>
<p>Mis cervezas</p>
<p>Mis amigos</p>
</nav>
<?php } ?>
<?php function arriba() { ?>
<nav class="navbar navbar-expand-lg navbar-light bg-light"
id="menu_arriba">
<div class="navbar-brand" style="width: 200px;"></div>
<p>Inicio</p>
<a href="instrucciones.php" class="navbar-brand"><p>Instrucciones</p>
</a>
<p>Contacto</p>
<p>FaQ</p>
<div class="navbar-brand" style="width: 450px;"></div>
<a href="ajax/logout.php" class="navbar-brand"><p><i class="fas fa-sign-
out-alt"></i> Salir</p></a>
</nav>
So in the actual pages of the website, i just write:
<?php echo banner(); ?>
<?php echo arriba(); ?>
<?php echo izquierda(); ?>
<div class="main">
// HERE GOES THE CONTENT OF THE PAGE
</div>
I edit this to make you know that the reason of menu_izq is position: fixed is because like that, it shows the content of the page to the right of the left menu, and in position: sticky||relative, the content is shown at the end of the menu. I need to find a solution without changing (I think) the position: fixed of the menu_izq (left menu).
Looks like you are using Bootstrap. Currently, your left nav is initially set to position: fixed, I recommend using position: relative to your left nav initially so that positioning your nav elements can be relative to the height of the background image. Using Bootstrap, this solution wraps the left nav & the content in a flex container so that the content can be positioned relative to this container easily, since later on the navs are going to get position: fixed.
Basically on the script, just detect if the top of the scroll bar's Y position is already past the height of the background image element. If it is, assign the fixed position to the nav elements and adjust the content's position as needed relative to the container wrapping the left nav & the content. Check the CSS properties involving .navs-are-fixed to see how the navs are assigned the fixed position.
$(window).scroll(function() {
// innerHeight is used to include any padding
var bgImgHeight = $('.some-bg-img').innerHeight();
// if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to your nav elements
if ($(window).scrollTop() >= bgImgHeight) {
$('body').addClass("navs-are-fixed");
} else {
$('body').removeClass("navs-are-fixed");
}
});
#menu_izq {
height: 100%;
width: 200px;
position: relative;
left: 0;
top: 0;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba {
background-color: #503522;
width: 100%;
z-index: 1;
position: relative;
top: 0;
}
body {
background-color: #ffc75a !important;
height: 300vh; /* sample arbitrary value to force body scrolling */
}
.some-bg-img {
background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
height: 200px;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.navs-are-fixed #menu_arriba {
position: fixed;
}
.navs-are-fixed #menu_izq {
position: fixed;
top: 72px; /* the height of your top nav */
}
.navs-are-fixed .some-sample-content {
position: absolute;
top: 72px; /* the height of your top nav */
left: 200px; /* the width of your left nav */
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<body>
<div class="some-bg-img"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<div class="d-flex h-100 w-100 position-absolute">
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
<div class="some-sample-content">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</div>
</div>
</body>
If you really must keep your fixed positioning on your left nav, then you are going to have to compute it's top value based on on the height of both the banner & the top nav, such that if the top of scroll bar's Y position is past the height of the banner, the top value of the left nav will be equal to the height of the top nav - so you push it down so that they don't overlap. If the top of the scroll bar's Y position is not past the height of the banner, the top value of the left nav is going to be equal to the difference of the height of the banner & the top nav minus the top of the scroll bar's Y position.
$(window).scroll(function() {
// innerHeight is used to include any padding
var bgImgHeight = $('.some-bg-img').innerHeight();
var topNavHeight = $('#menu_arriba').innerHeight();
var leftNavInitialCssTop = bgImgHeight + topNavHeight;
// if the the scroll reaches the end of the background image, this is when you start to assign 'fixed' to the top nav
if ($(window).scrollTop() >= bgImgHeight) {
$('body').addClass("navs-are-fixed");
$("#menu_izq").css("top", topNavHeight);
} else {
$('body').removeClass("navs-are-fixed");
$("#menu_izq").css("top", leftNavInitialCssTop - $(window).scrollTop())
}
});
#menu_izq {
height: 100%;
width: 200px;
position: fixed;
left: 0;
top: 252px;
z-index: 3;
background-color: #503522;
overflow-x: hidden;
padding-top: 20px;
}
#menu_arriba {
background-color: #503522;
width: 100%;
z-index: 1;
top: 0;
}
body {
background-color: #ffc75a !important;
height: 400vh; /* sample arbitrary value to force body scrolling */
}
.some-bg-img {
background: url(https://via.placeholder.com/1920x200.png?text=Sample%20Background%20Image);
height: 179px;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.navs-are-fixed #menu_arriba {
position: fixed;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="some-bg-img"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand"></div>
<a href="user.php" class="navbar-brand">
<p>Inicio</p>
</a>
<a href="instrucciones.php" class="navbar-brand">
<p>Instrucciones</p>
</a>
<a href="contacto.php" class="navbar-brand">
<p>Contacto</p>
</a>
<a href="faq.php" class="navbar-brand">
<p>FaQ</p>
</a>
<a href="ajax/logout.php" class="navbar-brand">
<p><i class="fas fa-sign-out-alt"></i> Salir</p>
</a>
</nav>
<nav id="menu_izq" class="sidenav">
<div></div>
<a href="nueva_cata.php">
<p>Nueva Cata</p>
</a>
<a href="nueva_cerveza.php">
<p>Nueva Cerveza</p>
</a>
<a href="cata.php">
<p>Mis catas</p>
</a>
<a href="mis_cervezas.php">
<p>Mis cervezas</p>
</a>
<a href="mis_amigos.php">
<p>Mis amigos</p>
</a>
</nav>
You should be able to have that working with just CSS and no javascript using position: sticky attribute.
Make both elements position: sticky, the top nav should have a top: 0 property and the side nav should have a top: x property where x is the height of the top nav.
That should be enough and you should be able to remove the js code.
Read more about sticky position here https://developer.mozilla.org/en-US/docs/Web/CSS/position
why you want to do this? you can move the top menu and side menu and text container together in one container to be relative with each other, set the text box container fixed height in percent and set its overflow-y to auto. make the whole container animatable like the top menu. this will solve your problem.
The side and top sliding <nav> elements cannot interact correctly with the page content. Especially the lateral <nav> with vertical sliding according to many changing rules - sit, follow, slide against, stick apart. It's too much at once.
Workaround 1 - smooth - top sliding, side fixed (anchors corrected)
I'm afraid this is not the solution to your dreams. Works smooth and easy as it avoids the crush point.
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
} else {
$('#menu_arriba').css('position','relative'); /* fixed */
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
}});
*{ box-sizing: border-box}
body{
margin: 0;
text-align: center;
z-index: -1;
}
#pilar{ /* added fix */
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
#menu_izq {
background: 0; /* fixed */
width: 200px; /* padding-top: 200px; removed */
position: fixed;
top: 200px; /* fixed */
left: 0;
bottom: 0;
z-index: 0; /* fixed */
}
#menu_arriba{
background: #503522;
width: 100%;
position: relative; /* added fix */
z-index: 1; /* added fix */
}
p{ margin: 100px 100px 100px 250px; z-index: -1 }
a{ display: inline-block; width: 150px; border: 1px solid white; text- align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px; z-index: 1; z-index: 9;}
<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div> <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div> <!-- needed or redundancy? -->
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i>Salir
</nav>
<nav class="sidenav" id="menu_izq">
Nueva Cata
Nueva Cerveza
Mis catas
Mis cervezas
Mis amigos
</nav><p>... </p><p> ...</p>
Workaround 1.1 - smooth with a nice view
only changes
#menu_arriba{
background: 0;
width: 100%;
position: relative; /* added fix */
z-index: 0 /* added fix */
}
#hole{
background: #503522;
height: 100%;
margin-left: 200px;
width: auto;
}
<div id="pilar"></div> <!-- added fix -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div id="hole">
<div class="navbar-brand" ></div>
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i> Salir
</div></nav>
Workaround 2 - dirty - hide or cover up side effects
If you still insist - not so smooth, slightly bouncy menu. Your dreams are also not coming true, but there are no visible holes. Here you have it:
$(window).scroll(function(){
var elementPosition = $('#menu_arriba').offset();
if($(window).scrollTop() >= elementPosition.top){
$('#menu_arriba').css('position','fixed').css('top','0');
$('#menu_izq').css('position','fixed').css('top','0');
} else {
$('#menu_arriba').css('position','initial');
$('#menu_izq').css('position','initial');
}
if(elementPosition.top <= 200){
$('#menu_arriba').css('position','initial').css('top', '200');
$('#menu_izq').css('position','initial').css('top', '200');
}});
*{ box-sizing: border-box}
body{
margin: 0;
text-align: center;
}
#menu_izq {
background: 0;
height: auto;
width: 200px;
padding-top: 100px;
}
#menu_arriba{
background: #503522;
width: 100%;
z-index: 1
}
#pilar{
background: #503522;
width: 200px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: -1
}
p { margin: 100px 300px; position: relative; bottom: 400px}
a{ display: inline-block; width: 150px; border: 1px solid white; text-align: center; padding: 10px 0; margin: 20px}
img{ border-bottom: 10px solid #503522; margin: 0 0 -3px; width: 100%; height: 200px;}
<img src="img/blue.jpg" alt="blue">
<div id="pilar"></div>
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="menu_arriba">
<div class="navbar-brand" ></div> <!-- what for it is? needed? -->
Inicio
Instrucciones
Contacto
FaQ
<i class="fas fa-sign-out-alt"></i>Salir
</nav>
<nav class="sidenav" id="menu_izq">
Nueva Cata
Nueva Cerveza
Mis catas
Mis cervezas
Mis amigos
</nav><p>... </p><p> ...</p>
There are other minor shortcomings in your code.
<p> .... </p> may not be a crime, but neither is it good. <p> has its own characteristics and is not a stiffener or pillar - I fixed it with css.
Above you have whole code I used - as a hint and explanation. Resize elements to your needs and taste. Hope you like it
cheers
Related
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
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.
This question already has answers here:
Fixed navbar hides anchor position of local links
(2 answers)
Closed 2 years ago.
So I have this one pager with 4 different sections. And a menu with 4 different buttons (each one for each section). I wanted to smooth scroll on all. The way i tried is to give each a href, which is the id of each title but the problem then is that the menu covers half of the title (see pic) because of its fixed position. See the code snippet to see what I tried next.
function goToPageOne() {
if(window.innerHeight > 728 && window.innerWidth < 500) {
window.scrollTo(0,700);
} else {
window.scrollTo(0,689);
}
}
document.getElementById("me").addEventListener("click", goToPageOne);
<div class="topnav" id="myTopnav">
Home
<a id="me">Me</a>
<a id="timeline">Timeline</a>
<a id="work">My work</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
The problem with this that it's not really a responsive function for all devices.
Instead of linking to your sections, you could link to anchors which you intentionally move above the section.
Demo:
/* For the demo */
html { scroll-behavior: smooth; }
body { font-family: Arial, Helvetica, sans-serif; padding-top: 20px; }
#myTopnav { position: fixed; top: 0; left: 0; width: 100%; background: #f1f1f1; }
#myTopnav a { display: inline-block; padding: .8em; }
section { height: 400px; padding: .5em; }
section:nth-of-type(even) { background: #333; color: #fff; }
.anchor {
position: relative;
top: -45px; /* <-------- */
}
<div id="myTopnav">
Home
Me
Timeline
My work
</div>
<section>
<div class="anchor" id="home"></div>
<h2>Home</h2>
</section>
<section>
<div class="anchor" id="me"></div>
<h2>Me</h2>
</section>
<section>
<div class="anchor" id="timeline"></div>
<h2>Timeline</h2>
</section>
<section>
<div class="anchor" id="work"></div>
<h2>Work</h2>
</section>
I have a fixed header that changes to a sticky header on scroll using JS.
The dropdown menu works when in mobile view showing on Google Dev Tools and Firefox Responsive Design Mode, however it doesnt work on actual mobile devices.
I've tried changing the Z-index and webkit-backface-visibility.
The HTML:
<header id="myHeader" class="site-header" role="banner">
<div class="nav-container">
<nav id="top-bar">
<div class="row" id="top-bar">
<div class="top-bar-text">
</div>
</div>
</nav>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="container nav-bar">
<div class="row">
<div class="module left site-title-container">
<?php shapely_get_header_logo(); ?>
</div>
<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
<i class="fa fa-bars"></i>
</div>
<div class="module-group right">
<div class="module left">
<?php shapely_header_menu(); // main navigation ?>
</div>
<!--end of menu module-->
</div>
<!--end of module group-->
</div>
</div>
</nav><!-- #site-navigation -->
</div>
</header>
header {
height: 85px;
left: 1em;
position: fixed;
z-index: 10000;
right: 1em;
top: 40px;
}
JS changes the header on scroll to:
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f8b836;
z-index: 999;
height: 90px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
The CSS for the menu in mobile view:
#media (min-width:300px) and (max-width:480px){
#site-navigation .module.left {
padding-left: 0px;
position: fixed;
left: 0;
}
}
The JS:
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
I'd like the dropdown menu to actually show when the page has been scrolled and the sticky heading is showing.
Does the dropdown not open on mobile devices?
Your .sticky css class has overflow: hidden; which is keeping the dropdown hidden. If you put it there to avoid horizontal scrolling, use overflow-x: hidden; instead. Then it won't cut the dropdown off.
Generally you want overflow-y set to scroll when you have a fixed element with a dropdown on mobile. In case the menu extends beyond the bottom of the screen.
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