CSS only sticky menu - html

I'm trying to make a CSS only sticky menu. This menu is inside another div under the header of the website. But as the user scrolls it should remain visible on the page. Googling and looking for answers here I found a good example of what I want to achieve: http://jsfiddle.net/g7x102s4/ (the red div)
My problem is that I'm doing this inside a React app where I can't install any other plugin, so It has to be done in pure CSS. I made a codesandbox where I'm trying to get it working. The menu class can float inside the menu container, but always visible to the user. It's the same effect from the first link above, just without JavaScript.
Is it possible? If so, how can I achieve it?

Add properties position:sticky and top:0 to your menu.
.menuContainer .menu {
background: red;
height: 300px;
position: sticky;
top: 0;
}

Related

I need to put a div OVER a scrollbar

I have a tumblr theme I am working with where there's a scroll-overflow container, and a div for pagination that overlaps. But the scrollbar of that div interrupts the pagination link, going over it instead of under. What is the best way to put the scrollbar BEHIND the top layer pagination div?
Example here
Since you are already using absolute positioning, why not make the pagination div a sibling of the container, and use:
#pagif {
position: absolute;
left: calc(50% - 270px)
}
I tested on the example and it stays at the same place as before, but now it's above the container.
Please check this codepen

How to "tie" one HTML element's position to another HTML element's position?

I've run into quite complicated HTML problem. I'm making a website and when users click menu, the menu popup slides out.
The problem that I'm having is how do I make sure that popup slider is always below the menu link.
As I resize page the menu link moves around and it's position is not predefined.
It could be at {x;y}={1000; 200} but if I resize the page smaller, it can move to {x,y}={400; 300}.
I tried setting position to absolute for menu and positioning it at 1000, 250 (below link), but it doesn't work if I resize the page smaller as the link is now at 400; 300 and not at 1000; 200...
Therefore my question - how do I "tie" the menu slider to menu link, so that no matter where the menu link is, it was always below it?
I'd like to do this in pure CSS and HTML with no JavaScript function calls.
Easiest way to do that is to make it like this:
<div id="wrapper">
<div id="menuOpener>Menu</div>
<div id="menuItems">Items</div>
</div>
And then
#wrapper { position: relative; }
#menuItems { position: absolute; top: 0; left: 0; }
Like that, the menu items are positioned absolutely but relative to the wrapper.
If you are using jQuery, try the following:
$(window).resize(function(){
repositionPopupSlider();
});

How do I move div so they don't overlap

I am using codeigniter on a project. I have an over lap in DIVs.
(source: childrensdaycaresoftware.com)
In the image you can see that the overlap blocks the button. The CSS that controls this is
.fam {
position: relative;
left: 20px;
width: 400px;
}
If I make it fixed or absolute, it throws off all the work that I have done. I would have to redo the whole page.
Is there a way to send the Family Info block behind the menu button?
The css for these two DIVs are not in the same css file.
You should be able to make the z-index for the button, or its container, a higher number to elevate it above the other div.
.button{
z-index:5;
}
for example.

how to show sub-menu when using the scroll bar on a menu?

Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?
then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/
thank you!
try this one,
.menuLateral {
margin-left: 4px;
margin-top: 1%;
position: relative;
width: 35%;
height:200px;
color: #B2C2B9;
float: left;
overflow:visible;
}
http://jsfiddle.net/tBJe3/11/
In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.
Here is the updated version of your code in JSFiddle.
Please note, that by doing in this way, some of your sub-menus will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically) using JavaScript.

footer not staying on bottom of page

i grabbed a template from themeforest and modded it. all works well, except, on some pages, the footer isn't sticking at the bottom of the page. i've messed w/ the css a bit, but haven't been able to get it stick. i'm still learning html/css so wanted some help in reviewing it to make sure i don't have any mistakes in my html. i haven't modded the css from the initial template. i did some, but reverted them before the post, as they were attempts at getting the footer to stick.
here is a link to the site > http://capitalcrestoration.com/build/
I think from your question you are asking how to make the footer appear at the bottom of the window at all times.
To do this you just need to change the CSS rule for #subfooter-wrapper:
#subfooter-wrapper {
background: url("images/sub_footer_bg.jpg") repeat-x scroll 0 0 transparent;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1000;
}
You could try giving CSSStickyFooter a shot.
You need to do something with your CSS to position the footer element at the bottom of the window. Otherwise it's just a block element that will be directly under it's sibling.
Try placing div id="subfooter-wrapper" just before the closing tag of the wrapper, and using position:absolute; bottom: 0;