I am trying to build grid elements in which there are two columns and each has a couple of rows of panel elements within them. Everything looks great except for when I scroll my navbar to the point of the grid elements. The elements overlap the navbar like they are floating on top. The weird thing is no other part of the page is doing this, everything is behind the navbar when I scroll except for the grid elements.
Here is an image of the effect I'm seeing:
Anyone have any idea what is going on? I am also using headroom.js for my navbar.
EDIT: Here is the link to the live website: (link taken down after finding answer, as website still under construction)
It's an issue with the navigation's z-index. Even just giving it a value of 1 fixed the overlap for me. FYI, the higher the number the less likely it will be under another element, so you should probably make it something like fifty billion (or 999).
.headroom {
z-index: 999;
}
Related
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
I need to hide some scroll bars in something like a table.
I have a 5 rows table built with some div elements, each row contains a scroll bar for an horizontal scroll.
There is a way for hide them?
I already tryed searching solutions here, but that solutions only work with a single row, or, however, didn't work in my case.
There is the Demo
You can hide scroll bars by giving them a style using pseudo selectors:
.target::-webkit-scrollbar {
display: none;
}
This being said it is a big no no in terms of accessibility to change and hide scrollbars, looking at your code you are also using JavaScript to sets widths. Maybe it's worth looking how to re-work your code to completely negotiate these issues.
OK, so here's the situation:
I'm experimenting with a fixed-width (resizeable) left sidebar
The sidebar contains draggable elements
If one of the elements is dragged to the right, then the draggable element (the helper actually) seems to be disappearing behind the main content.
Why is that happening? Any ideas on how this could be resolved?
Demo: http://83.212.101.132/angjs/ang4.html
This one is almost an exact duplicate of a similar question I had posted earlier, although the solution to this one seems to me rather far from obvious.
.slimScrollDiv SET overflow: visible;
.hbox, #content, .vbox AND following (if there are some) - remove z-index tag!
this was your mistake. Hope it works now, the adding on a Pane seem not to be implemented.
Because the JavaScript is modifying it I can't know for sure. However, my initial thoughts are it has to do with the z-index. The z-index for the center section is 99, and the lis are 0-10. Try making it update the z-index of the lis to 100+ on move.
I seems this remove position in left menu side and white drop box and set droppable menu z-index and position absolute may it works for you
I've made a horizontal menu.
What it should be doing is having the elements under it line up along the right side in an orderly fashion. Instead, it jumps throughout page seemingly randomly, and has other issues such as flickering. I've been stuck on making it for awhile and would love some tips to resolve these issues. Here is a JS FIDDLE showing the issue, all stripped down.
Thanks.
Here are current issues:
The submenu does not align perfectly with the right side of main nav even though its offset is calculated by main navs offset + width.
Flickering(Moderately solved using large borders)
Elements sometimes doesn't catch mouseover, to reproduce I am moving my mouse all the way down and off and up it and off
The menu slide out part goes to the bottom right of the page, in a somewhat random order, and continues to move further away (yikes)
The solution to the flickering issue is to make the submenu items overlap or touch. This can be done by adding a one-pixel white border to the menu item.
When it comes to the alignment issue (which could have been intended), you need to add (twice) the element's padding and border as the width is inside the padding.
I'm having a little trouble getting my head around a Javascript animated scroll issue.
I'm using the SuperScrollorama Jquery plugin which is built on-top of the Greensock JS tweening library.
The fundamental effect I'm after is to "pin" a section down, then use vertical scrolling to expand some content, then "unpin" the section once the content is fully expanded, so the user can scroll on - i.e. http://blueribbondesign.com.au/example/
But when I try to apply this same effect to multiple sections one after the other, everything gets all broken: the "unpinned" content below the pinned element is pushed off screen and it seems to miscalculate the height of the element when it performs the animation in reverse (i.e. scrolling back up the page). - i.e. http://blueribbondesign.com.au/example2/
I've been endlessly fiddling with the "position:fixed" and "pin-spacer" div, and tried attaching the Superscrollorama plugin to various containing elements, but still cannot work out how to get it to work.
Any help from the brilliant crowd-sourced minds of the web would be much appreciated,
Cheers,
TN.
I've been working with this issue myself. What happens is there's a blank div spacer put above the section being pinned with a height that you've defined in the pin() function. Secondly, the pinned element gets a position:fixed assigned to it. Both of these things allow the scroll bar to continue down the page while the element stays affixed. In turn, whatever you had below that section gets bumped down because of that spacer div's height.
If your pinned element is centered horizontally, first give it a left:50%, margin-left:-{width/2}px to fix it from pushing to the left edge.
Next, you'll have to detect the pin/unpin events (which are offered by the plugin as parameters additional to "anim"), and change the section underneath to also toggle a fixed/relative position. When you change that underlying section to be at a fixed position, be sure to set its "top" property to whatever the pinned element's height is. Once the pinned element becomes unpinned, change it back to relative positioning. Does that make any sense?
It seems that different techniques will call for different fixes, but those things are what I'd pay attention to... fixed positioning, and then using the pin/unpin events for adjustment.