Flex centering outbidded by position sticky

HTML & CSS
1

The javascript discussion is going on here how to inject class based on scroll up.

The normal header CSS definition is like this:

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

but when the class active is injected: The definition will become like this →

.header.active {
    position: fixed;
    z-index: 99;
    animation-name: headeranimate;
    animation-duration: 1s;
    top: 0px;
    border: 1px solid #DADADA;
}
@keyframes headeranimate {
    0%   { top:-100px;}
    100% { top:0;}
}

The position: fixed; is causing issue:

image
image1364×131 14.3 KB

The header is no more centered in the horizontal middle but shifted to the left. I tried transform/translate, but could not fix the issue.

2

Do you have a public page for this so people can see it in action? It simply feels to me that you have taken the element out of the flow of the page and that the header was being centered because of some parent element… that or the element itself is just not being set to be the full width of the page because it was full width of a parent container (that now doesn’t apply).

It is hard to conclude that unless we can see and test some changes on the problem page.

1 Like
3

It is a child to div with class .wrapper whose max-width is 1190px, and margin set to auto.

4

But if the child is what you are making fixed, it will pull that element out of the flow of the page and no longer controlled by .wrapper. But again I don’t know if we can’t see an example. :frowning:

1 Like
5

I agree, how can me handle it now? Fixed element will have certain method to align it in horizontal center.

6

I replaced fixed to sticky, and it is working.

7

Then the fixed element would need to be 1190px wide because fixed elements are shrunk to fit. you would need left:0 ;right:0; width:100%; max-width:1190px and margin:auto.

I would stick with position:sticky and avoid those issues :slight_smile:

If you are going to use position:sticky then do you still need to add a class with JS?

1 Like
8

True,

Distraction-free: I am planning to give a distraction-free fixed/sticky menu. when the user is scrolling down the menu should not appear, when he scrolls up it should appear.

9

Ah ok. The example I gave you in the other thread does it the other way around which is what I thought you were doing (it would be simple to change).:wink:

1 Like
10

Ii have a genereral question. There are two possibilities →

Possibility #1

<body>
	<div class="wrap">
		<header></header>
		<main></main>
		<footer></footer>
	</div>
</body>

Possibilty#2

<body>
	<header class="wrap"></header>
	<main class="wrap"></main>
	<footer class="wrap"></footer>
</body>

CSS will be like this, and maybe some padding will be required.

.wrap {
  max-width: 1280px;
  margin: 0px auto;
}

Is anyone better than the other for some reason? or choice of the web engineer?

11

It depends on the layout of course because you may want some inner elements to be full width which will mean having them outside of the wrap would be more suitable.

Generally though if you have a centred layout then having a wrap means you only have to specify the dimensions once as all inner elements will be controlled by that wrap. This makes it easier for media queries as you only need to address one element. In your second element you would have to specify the width and margins for every direct child of the body and do the same when you change them in the media queries.

Some people like to use the body element as a wrap which is ok for simple designs but I often find it more cumbersome that way rather than having a wrap and leaving the body well alone (older browsers had many bugs when the body was sized or had margins).

In the end its up to the developer and how they feel things will work best. I prefer to use a wrap because that’s what works for me the best.

2 Likes
12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.