In html i'm globally wrapping content with a div.wrapper min-height:100vh; for :target push-left menu, on mobile it breaks all childrens position:fixed; and stick it to the top of page and not to the visible part.
If you have any idea i tried many many solutions..
You can see this at : http://test.lelabdigital.fr where nav-button-open on the top left corner is position fixed but stick to the top when you scroll bottom.
Thanks
In your main.css 1422 line add position: fixed; .
body:target aside.mobile-nav {
z-index: 9999;
overflow-y: hidden;
position: fixed;
}
In main.css line 1409 try to remove this style it will wprk
.wrapper {
transform: translateX(0) translateZ(0);
transition: transform .2s;
will-change: transform;
}
You also need to remove one more style from your main.css
body:target .wrapper {
transform: translateX(50vw);
}
If you not romve this , then nav-button-open will not fix when you sroll
Related
I am creating the following side menu with animation: click
We can see an unwanted horizontal scrollbar, which should not be according to developer.mozilla.org,
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
In the example above, the list of menu appears when you click on the checkbox and it has the class .m-list. .m-list has absolute positioning and relative positioning is set for its nearest parent(.m-block). I'm going to copy and paste these two classes
.m-block {
width: 100%;
background: gray;
padding: 0;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.m-list {
position: absolute;
top: 100%;
background: silver;
right: 0;
width: auto;
list-style-type: none;
transform: translateX(0%);
transition: transform 0.25s ease-out;
}
Q1: Why does the horizontal scrollbar appear?
Q2: What is the most correct solution to prevent the appearance of a horizontal scrollbar?
I know 4 ways to solve this problem, but due to various reasons I do not want to use them:
If I change the absolute position to a fixed one, it does not generate a horizontal scrollbar, but the rule line with top: 100%; takes on a different meaning. In the original case, top: 100%; provides an offset from the blue stripe along its height.
Using JS is not available in this project
Using overflow-x: hidden on the top level of document will disable the scrollbar, which may be needed for content.
Moving the menu from the right side to the left will not result in a horizontal bar, however, this is an undesirable solution.
.m-list {
...
left: 0;
transform: translateX(0%);
}
#m-toggle:checked ~ .m-list {
...
transform: translateX(-100%);
}
I tried applying overflow-x: hidden; to <body>. and I was able to scroll down and hide the menu
I have an image near the top of a webpage. I've made it so that when I hover on the image, it zooms in slightly. However, in doing so, I've messed something up that causes the image to only display one portion whether hover is activated or not. I've tried removing portions of the code I added, but can't seem to fix it without completely removing the hover animation. I've also tried changing margin, padding, and position. I'm using Bootstrap 4 if that makes a difference. I'm sure it's something simple, I just can't seem to figure out what needs to be changed.
Here's a link to the Codepen: https://codepen.io/amandathedev/pen/zyEyze
Here's the relevant portion of the CSS:
.imgBox {
float: left;
position: relative;
width: 640px;
height: 360px;
margin: 0 auto;
/* justify-content: center;
display: inline-block; */
overflow: hidden;
}
.imgCard {
position: absolute;
top: 0;
left: 0;
}
.imgCard img {
-webkit-transition: 0.4s ease;
transition: 0.4s ease;
}
.imgBox:hover .imgCard img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
}
You need to set transform-origin to center so that it will scale from center on, so your css must look like this:
..other css
.imgBox:hover .imgCard img {
transform: scale(1.05);
transform-origin: center;
-webkit-transform: scale(1.05);
}
Looking at your code example on codepen, the solution looks to be making the width of the img 100%. So in your example you would do something like:
.photo {
width:100%
}
However, this cuts off the bottom of the image. You're going to need to adjust the height of the imgBox that contains the imgCard. It's currently set to 360px. Because of the way your example is written, it will probably be best for you to just choose a number so that the resulting image will have the same aspect ratio as the original image (playing around with it, 478px looks like the magic number to show the entire image).
This question already has an answer here:
Why does perspective changes fixed position in CSS?
(1 answer)
Closed 6 years ago.
I'm running into an issue where a fixed element (The nav) moves when the body element is used as a parallax container with the following css:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y:auto;
}
Where the original body element has this css:
html,body {
width: 100%;
margin: 0px;
margin-bottom: -1.4rem;
overflow-x: hidden;
display: block;
font-size: 10px;
}
And the original nav has this css:
nav {
position: fixed;
top: 0rem;
right: 0rem;
height: 100%;
/*animation*/
transition-timing-function: all ease 0.3s;
-webkit-transition: all ease 0.3s; /* Safari */
transition: all ease 0.3s;
}
Where the fixed position style only breaks when the parallax class is applied to the body element.
All of this is within this representation of the html:
<body class="parallax">
<header></header>
<div></div>
<nav></nav>
</body>
Why did it break?
Edit to clarify some confusion: no javascript is involved, the parallax container class is shown above, nothing else has been added. Upon inspection, the nav element still has the fixed position style applied to it
Here is the fiddle
(As an aside, I know the work-around is to add parallax to a different container instead, and have the nav outside of that container, but in order to make sure iOS shrinks the url bar the body needs to be the element that scrolls)
The issue is due to perspective being added via the .parallax class.
This cannot be overcome.
Any time you add transform (which is what perspective is) to an element, it becomes the positioning "base" for any positioned children, including position: fixed. Your position:fixed nav element becomes fixed relative to the transformed parent
I am just trying to stick header to the top. I have set position to fixed and top:0px; and left:0px.
I have uploaded my code here.
Below is the CSS class for header:
header.header
{
background: #861912;
padding:5px 10px;
overflow: hidden;
height: 43px;
position: fixed;
width: 100%;
top: 0px;
left: 0px;
}
Please help me finding out what stopping my header to stick at top.
Just put the Navbar out of other divs and directly inside body and increase it's z-index, this way it will work fine.
The problem seems to be this line:
.container {
...
-webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
}
(and, of cource, the variant without prefix too).
If I remove it via Developer Tools, everything works fine.
But I'd rather move that <header> completely outside the container.
This problem occur by transform css property. try it after remove transform from .container
I have been trying to make a simple site like this. The button never does show up as intended. I want #play_button to show up exactly on the play button image in the background. How can it be done?
My CSS code:
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover; /*For covering full page*/
}
#play_button {
position:relative;
transition: .5s ease;
top: 191px;
left: 420px;
right: -420px;
bottom: -191px;
}
#play_button:hover {
-webkit-transform: scale(1.05);/*Grows in size like Angry Birds button*/
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
}
Just one thing more, problem occurring is that if I resize the browser window, then the image moves to a new position.
UPDATE:
Problem solved :) Here, in this example, you can see how the button remains in the center of the page even if you resize the browser window.As always, you can tweak the left and top offsets to get the desired results. Here's the code.
Try using absolute positioning, rather than relative positioning
this should get you close - you can adjust by tweaking margins or top/left positions
#play_button {
position:absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
http://jsfiddle.net/rolfsf/9pNqS/
I'd use absolute positioning:
#play_button {
position:absolute;
transition: .5s ease;
left: 202px;
top: 198px;
}
It seems some what center of the screen. So I would like to do like this
body {
background: url('http://oi44.tinypic.com/33tjudk.jpg') no-repeat center center fixed;
background-size:cover;
text-align: 0 auto; // Make the play button horizontal center
}
#play_button {
position:absolute; // absolutely positioned
transition: .5s ease;
top: 50%; // Makes vertical center
}
So, the trick here is to use absolute positioning calc like this:
top: calc(50% - XYpx);
left: calc(50% - XYpx);
where XYpx is half the size of your image, in my case, the image was a square. Of course, in this now obsolete case, the image must also change its size proportionally in response to window resize to be able to remain at the center without looking out of proportion.