Search code examples
cssfixed

text unarangeable in position fixed

hello guys I am a beginner of CSS I was trying to make a webpage and I was making header but when I used the position: fixed; command my header shrink and goes to the right side of the page and the text that was arranged in a row like this text text text some text goes in the below row text text text and I cant fix it plz help me

Solution

  • Firstly welcome to web development! When posting here it can be helpful to include a snippet of the code you're having trouble with so people can be more specific with their answers.

    since I don't know what your header code looks like this will be a bit more general, but i'll include some possible fixes for your issue and an example header you can use for ideas.

    .header-container {
  position: fixed;
  top: 0;
  width: 100%;
  ...restOfStyles
}

    this should fix your issues with the fixed header, but I also wanted to recommend looking into position: sticky; by design fixed doesn't interact with the rest of your layout, this means for a header you would need to set a margin or padding on the top of your page content to stop it covering content before scrolling the page.

    position: sticky; will keep your other page elements positioned around it, but with a top value defined will pin itself to the top of the window as the user scrolls past it - meaning you don't have to add padding to account for the height of the header.

    it's more or less the same code, just switching out the positioning property;

    .header-container {
  position: sticky;
  top: 0;
  width: 100%;
  ...restOfStyles
}

    happy coding!

    edit: Just wanted to include some resources to help you on your journey;