I'm not sure what code is causing the problem, so I'm not sure what to post.
On my website the navigation bar is overlapping the content on the mobile version
The website is www.seshilton.co.za
You have a part in your code that goes something like this:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
When I remove the position: fixed;, the image jumps down in mobile view under your navigation bar.
w3schools says the following:
"An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element.
A fixed element does not leave a gap in the page where it would
normally have been located."
Try to work around that fixed value. Maybe use position: sticky instead with the combination of z-index.
Try giving margin-top for the header element for smaller screen sizes as,
#media(max-width:500px){
header{
margin-top:100px;
}
something like this would workout, Trying changing the values of max-width and margin-top as per your need.
Related
I have a layout that is to start with a fixed header, containing a logo, etc.
Further down the page is content.
The fixed header should stay fixed as the user starts to scroll, but then as the content scrolls up the screen and comes close to touching the fixed header area, then the fixed header scrolls off the screen along with the content.
I have managed to sort of get this working using the following:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= ($("#headerarea").height() + 85)) { $("#headerarea").removeClass("header-fixed"); $("#headerarea").addClass("header-scroll"); } else { $("#headerarea").removeClass("header-scroll"); $("#headerarea").addClass("header-fixed"); }
});
});
</script>
My CSS includes:
.header-fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
.header-scroll {
position: absolute;
top: 225px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
This allows the header area to stay fixed until the page scrolls to within 85 pixels of the header area, and then the header becomes normally scrolling with the rest of the page content.
This seems to work ok if I scroll the page using the scrollbar slowly.
But if I scroll quickly, or use a mouse wheel, then the header 'jumps' a lot.
Like when using the mouse scroll wheel, the header will jump down the page with the scrolling content, past the position it should stay fixed, then it will see that it has passed that position and jump back up to the fixed position again. This doesnt look good at all.
But I cant think of any other way to get this same effect.
Any suggestions on how to get this working better?
EDIT: Position:sticky seems to work, but I would ideally like to have a solution that will also work on IE, which position:sticky wont do.
Have you looked into position: sticky;? I think it's describing a lot of what you want here. Notably, the sticky stuff will go back to scrolling with the rest of the content once its parent div is outside of the viewport. https://css-tricks.com/position-sticky-2/
Im trying have my header stick on scroll. The is a fixed with, 1160px and is located below another div, and I want it stuck at top on scroll. Problem is I cant do it with a fixed position.
Seems like every script solution requires it to be fixed?
Depending on what browsers you need to support, you could try position: sticky.
.sticky {
position: sticky;
left: 0;
top: 0;
width: 100%;
}
Codepen: https://codepen.io/afisher88/pen/xJaxoP
Browser support for position sticky: https://caniuse.com/#search=position%3A%20sticky
i have a sticky menu that remains on the top of the screen when scrolled down to 100px, however on a page that i have a googlemap the sticky menu gets weird and stays on a input search form.. i have tried disabling js file that is integrated with the map however it didn't help, on other pages without the map the sticky menu works fine and with firefox even on the page where i have the map the sticky menu works fine too.. right now im on the verge of losing my mind what is wrong with chrome..
here's the page i'm having problem with
http://www.chemtools.com.au/find/
you'll have to scroll down and scroll back to the top to get the issue, on firefox it the issue doesn't shows up so my suspect is chrome itself..
any advise where i should look into or what could be causing the issue?
here is the js the is running the sticky menu`function sticky_menu() {
jQuery('.header').affix({
offset: { top: jQuery('.sticky_menu').offset().top}
});
jQuery('.header-middle').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
jQuery('#logo').affix({
offset: { top: jQuery('.sticky_menu').offset().top+100}
});
I think you are over complicating your problem by using jQuery. You can easily stick it to the top of the screen using CSS.
If you wrap your header, logo, and and .header-middle objects in a div such as
<div id='wrapper'>
<!-- Your floating header goes here -->
</div>
Then set the wrapper's style/CSS to have position: fixed; ex:
#wrapper{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
CSS's position: fixed attribute forced the object's location to be fixed to a set location on the screen, which will follow with the screen as the user scrolls.
i sorted it out,, it is cause by -webkit-transform: translateZ(0px);
i just set -webkit-transform: none; to only be applied on chrome and safari browser and the sticking issue with the map is gone..
thanks for the time #Aeolingamenfel looking into the problem,, i really appreciate it
So I am trying to create a left-sided nav bar, but after scrolling I can't get it to correctly stay to the left.
I have tried using:
position: fixed;
and
position: absolute;
However it cuts the width of the DIV down completely.
To get a view of what I'm working with go to: http://198.50.242.77/YouBB/
I'd prefer to use strictly CSS only but if I must use JS I'll use it.
Thanks!
position: fixed is what you want. This causes the element to be removed from the flow entirely and stay in the same position even after scrolling the page.
position: absolute is similar, but it only removes an element from the flow. Scrolling a containing div (or in this case, the whole page) will still cause it to move.
I opened up your web page in Chrome, and changed the styles for #navigation to:
background: white;
height: 100%;
text-align: center;
position: fixed;
width: 18.72%;
This does what you want. You will just need to position the rest of the content to the right.
I'm making a website (http://www.deayoga.ch/), and I'd like to make the menu bar on the left scroll with the page. In other words, it would start on the page as it is, and then, when the user scrolls down, it would stay fixed, relative to the browser window. The idea comes from the links on the right hand side on some StackOverflow pages, like here.
How could I achieve this?
PS: I already know how to make a div stay fixed on the left, using position: fixed; left: 0;, but my question is how to do this in the middle of the page, without knowing the distance from the side of the window (since the page sits in the middle, regardless of window size)
Remy Sharp has a very nice tutorial (with video) on how to do exactly this:
http://jqueryfordesigners.com/fixed-floating-elements/
Sounds like a math problem... use JS to get the window size, divide by two to get the mid-point, subtract half the size of your fixed div from the mid-point value, then set your CSS position "left" value to that.
Add this tto your stylesheet instead of the class you have now for #leftcol
#leftcol {
position: fixed;
top: 50%;
margin-left: 20px;
margin-top: -150px;
text-align: center;
}
Then add the following to your #container class:
position: relative;
Your menu is now in the middle of the page. You might need to reposition the content though... just add a margin.