0

I would like to make a position: fixed; header centered to the screen with a dynamic width and height. Right now, on desktop it is centered fine with this solution:

const Container = styled.div`
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
`;

I found that solution here. The problem I have is that if you enter my website, and make the window narrower, the header also gets smaller, and the menu items run out of space. I want to have width: auto; because I want the header to be just as wide as the menu and logo, even if I add or remove menu items, and I don't want to manually change the width every time I do that.

Can anyone think of a way to solve this?

Kasper Aamodt
  • 1
  • 2
  • what i would recommend is making a special header properties with @media query when on mobile(max-width: "EnterMobileWidth"). When interested, check this out: https://www.w3schools.com/css/css_rwd_mediaqueries.asp – Dev Sep 17 '21 at 14:02

1 Answers1

-1

Try to add this:

align-items: center;
justify-content: center;

I don't really know the reason for the width auto because that will just make the width the width of the child elements.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Jelle Stekelenburg
  • 154
  • 1
  • 11
  • Hi, I want the width to be the width of the child elements. But when you make the page smaller, the width of the header becomes smaller, even though the width of the child elements stays the same. Here is a [video](https://youtu.be/xEEsoyy9YLE). – Kasper Aamodt Sep 17 '21 at 14:38
  • Maybye put a min-width on the item until it gets full with? – Jelle Stekelenburg Sep 17 '21 at 20:04