I've been trying to understand and adapt the beautiful "gooey menu" posted here...
http://codepen.io/lbebber/pen/pvwZJp
My latest attempt to make a vertical/rectangular menu being here...
http://codepen.io/d3wannabe/pen/EVwEBE
But I have an issues that I'm really struggling to fix - when you use the dropdown menu in the second link (my one), after the initial animation on expanding, the whole menu jumps slightly to the left (whereas on collapse it jumps back to the right). If you look at the css (scss) I'm not applying any x-position transform/translates so I can't figure out what could be causing it.
The only piece of code I'm a little suspicious of because I don't fully understand it is...
.menu-open:checked~.menu-item{
transition-timing-function:cubic-bezier(0.165, 0.840, 0.440, 1.000);
But still it sounds purely related to the time intervals that any transitions apply to and not a shift in the x-coordinate.
Thanks for any thoughts at all on what might be causing this unwanted jump!
In your Codepen, when the sub items are displayed, it causes the body page height to change and it overflows.
Thus a vertical scrollbar is then shown and the page width changes.
Just add a scrollbar by default
body {
overflow-y: scroll;
}
Codepen Demo
If you change the layout view in your original Codepen to the vertical option you can see that no scrollbar appears (at least on my monitor).
Related
I have this div that starts off at a distance from the top:
The problem is that, when I start to scroll up, the rounded image is hidden:
I am very sorry that I could not reproduce the issue, as this is a custom CSS used on Notion -- meaning that I couldn't duplicate a website for testing purposes.
What I want is for the rounded image to appear on the top of the page, as opposed to being partially cut off as in the second image. The image should be perfectly round, even if being scrolled up.
In more simple terms, I want the rounded image to display even outside of the notion-app div, which is shown in the first image that starts off at an offset from the top.
Do anyone have a suggestion of removing the problem?
EDIT I already tried z-index, but that doesn't help.
Thanks in advance.
Give the #notion-app of overflow: visible;
#notion-app{
overflow: visible;
}
https://www.w3schools.com/css/css_overflow.asp
read sample docs on w3school for reference
Let's say we have 2 <div> elements, one being the parent, other being the child.
Is there a way to make only the parent <div> scrollable on Chrome and only the child <div> scrollable on FireFox?
This might sound a bit weird, but this is something I really need to implement on my project, because FireFox is acting really weird on that matter.
Thanks in advance.
UPDATE:
Here's a simplified description of the project I mentioned.
I'm intending to design a personal HTML template with page transitions. So each page will be displayed/hidden with a transition effect when user clicks on a menu item.
I'm using a very simple transition effect I wrote myself. So, <div id="main"> is the parent and some <div class="inner-page"> are the children. Needless to say that, based on their content, each .inner-page has different height.
For #main I've set overflow-y: scroll;. On Chrome it works flawless. So, with every .inner-page being displayed, the length of the scrollbar is updated based on the height of the active page.
On FireFox however, it's a different story. The length of scrollbar doesn't change and is always the same,
based on the length of the page which has the most and longest content. So when other pages (which have fewer content) are active, there's always a huge empty scrollable area at the bottom of that active page.
An alternative solution I tried (which worked) was to set overflow-y: scroll; for .inner-page instead of #main to solve the scrollbar length issue. But then I had to hide the scrollbar, because with each page transition, the scrollbar comes and goes with the page as well, something that doesn't look good at all.
Follow this CodePen link to see a simplified version of my code and how the scrollbar behaves differently on Chrome and FireFox.
Check the browser on page load, Here and add set the overflow of div hidden for Firefox.
overflow: hidden;
Lets say you added class ".firefox-scroll"
.firefox-scroll { overflow: hidden; }
weird bug here. Searched on the internet for hours but no working solutions yet :(
https://www.*****.*****/
It only happens on the page with parallax, a page without parallax is fine (biografie page).
What happens is that when you look closely, you will see that the white transparant-ish header flows OVER your scrollbar.
When taking a closer look you will see that the whole body is floating over my scrollbar.
Does anyone know a way to 100% fix this? I tried lots and lots of answers on the internet but none gave me a working solution.
Hope someone can explain to me what is happening and how to solve it.
Best regards
You can't place the menu below the scrollbar, because the scrollbar on pages with .parallax containers is not the <body>'s scrollbar, but .parallax's scrollbar.
And you can't place element A between element B and element B's scrollbar, unless element A is a descendant of element B.
However, the real problem is not placing the menu under the scrollbar. The real problem is being able to use the scrollbar (click its top arrow) through the menu, where they overlap.
Which is quite possible, using:
.menu {
pointer-events: none;
}
.menu-wrapper > * {
pointer-events: all;
}
(This makes the menu transparent to pointer events, except for children of .menu-wrapper, which do not overlap the scrollbar).
In my prestashop site I have the following problem:
using my mobile phone, if I scroll the page http://www.forwardmilano.it/presta/index.php?id_category=3&controller=category
slowly, when f.e. the div with class="breadcrumbs" disappears, the page has a vertical jump that my customer doesn't want to see.
How can I do editing only my customcss.css?
Thanks in advance
So what happens is when the .navbar gets the position fixed, the height of the header.variant4 changes, which causes the jump. Thus, the breadcrumbs goes under the navbar.
To solve the issue, you may want to set the height to the header.variant4.
You may want to apply the following CSS and it will solve it for you:
header.variant4 {
height: 129px;
}
We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing