Looking to create a fixed menu that starts in middle of webpage, but when scrolling down fixes to the top of the page using CSS/HTML.
Is it possible to do this using a container? So the container with the menu starts below a top container and when the top container is scrolled off the page the menu is fixed to the top of that container and the top of the screen?
For example, how can I make it so that the image in the second container stays at the top of the screen when scrolling down the page, but make it stay in the second container:
https://codepen.io/Daggett/pen/mpBaab
position: sticky;
<!--doesn't stick!-->
Is there a way to do this only with CSS? I know it can be done with jQuery
Thanks!
position: sticky needs an explicit vertical position like top:0 to know where to stick to.
Related
I have a Responsive Top Navigation bar modeled from w3schools. Below that, I have various pages.
In the div, I have to specify a margin-top. The problem is when I resize the screen width, the menu goes to (2) lines. I can not figure out how to move the page content down to keep the same spacing between the menu and the page.
This might be happening because the top nav bar is positioned absolute. The absolute will make the top bar in a new layer. So the content is not moving down when top bar is in two lines. You can try removing the position absolute if the top bar has that style.
I'm trying to create a fixed navigation bar with buttons(aligned left) and a title(aligned right). Before i fixed the position to the top of the page, it works as intended (other than not moving when scrolling, obviously). However, when i fix the position of the header, it moves my title over to the left with the buttons. How can I fix this? I've tried to make it into a div inside of the header tag and position:absolute the div; didn't work.
Here is what my page looks like
I have a div in middle of my page.I want to fix it on the top when it reaches the top after scrolling down my page.I want to do this using css only without javascript.
I'm using bootstrap. I want a div element to move as I scroll the page downwards. How do I accomplish this please? For instance, I want the div element to follow me downwards as I scroll downwards and still maintain its position
This can accomplished with functionality jQuery plugin.
See more on the API call here
This jQuery plugin is used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.
Using CSS, you can do it with the position attribute.
div{
position: fixed;
}
I am trying to keep my top-bar navigation from going behind my logo image on the header of my page. See below an example of the page when it is maximized in my screen:
Maximized View
Here is what it looks like when the browser window is made smaller:
Smalller Screen Example
I am trying to fix this page so that the top nav-bar that currently runs behind the image when the window is made smaller, will instead move and extend to the right.
Any ideas? The site is Inhishands.com
Thanks!
Your problem is that the menu (<ul id="display">) has the CSS property float:right, so it will always be positioned relative to the right side of the screen. When the screen is made smaller, the right side moves closer to the left, so the menu moves leftwards too (and overlaps the logo).
If what you want is for the menu to always start from the right side of the logo (and not to overlap it), then you could give it the property float:left and add a margin to its left side (like margin-left:370px). There are other ways of positioning it (like using absolute positioning) but this will get the job done.
Use Z-index on the navigation. In the CSS, set the z-index of the hands image lower than that of your navigation and you will see the navigation on top instead of behind.
Here's some information on Z-Index in case you need it: http://www.w3schools.com/cssref/pr_pos_z-index.asp
Nice design.
First of all you need to fix the minimum width of the top menu HEADER in your CSS.
Fix the header min-width according to the resolution you need:
#Header{
min-width: 1237px;
}
or directly into the HTML
<div id="Header" style="min-width: 1237px">