Question 276795 in CSS Question posted in
Some basic documentation can be found here.

Css – Positioning divs with display flex and position fixed

so I am trying to figure the following issue: given a top nav bar with position fixed, is there a way that the following down section doesn’t get partially hidden by the navbar (because of the fixed position) by using "display: flex" and "align-items: center"? I know how to fix it by setting a margin-top equal to the height of the navbar to the section but I have seen that it can be also fixed in a more elegant manner by using display:flex and align-items:center and I would like to know if there is anybody who knows how to do that. I am attaching a codepen for the given situation. The problem is fixed with margin-top. Can you give an alternate solution to this issue using display: flex?

Here is the codepen code example:
https://codepen.io/buburuzza/pen/wvNWmBq

<div id="main">

  <div id="navbar">
  
    <ul style="display:inline-block;">
    <li style="display:inline-block; margin:10px;">Home</l>
    <li style="display:inline-block;margin:10px;">About</li>
    <li style="display:inline-block;margin:10px;">Contact</li>
    
  </ul>
  
</div> <!-- end navbar-->
        
            <div class="container">
              
              <div class="row" style="width:500px; margin:auto;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa lectus, semper et diam et, finibus mattis orci. Aliquam volutpat dui ac quam sagittis, sed volutpat velit sollicitudin. Nullam at consectetur erat. Proin quis est pretium, volutpat tellus sit amet, lacinia ex. Nam vel massa sed dolor tincidunt imperdiet non quis lorem. Ut efficitur luctus vestibulum. Phasellus nec blandit turpis. Sed viverra quam vitae gravida tincidunt. Praesent interdum iaculis dolor, ac cursus quam semper sit amet. Ut sapien magna, vulputate at erat quis, congue fermentum tortor. Etiam neque ex, pellentesque at venenatis ac, sollicitudin ut quam. 
                </p>
              </div>
            </div>
          </div> <!-- end main -->




  body {
    width:100%; margin:0; padding:0;
  
   }

   #main {
   width:100%; 
   height:auto;
   margin:0;
   padding:0;"
   }

   #navbar{
   display:block;
   margin:0;
   padding:0;
   position:fixed !important; 
   height:60px; 
   background-color:grey; 
   width:100%; 
   top:0;
   }

  .container {
  display:flex !important; 
  height:100%; 
  align-items: center !important;           
  background-color:yellow; 
  width:100%;
  height:auto;
  margin-top:60px; /* HERE */
  
   }
Tags:

2

Answers


  1. 0

    You can achieve the desired layout without using the margin-top property by using flexbox. Here’s an alternative solution using display: flex and align-items: center:

    <div id="main">
  <div id="navbar">
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </div>
  
  <div class="container">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa lectus, semper et diam et, finibus mattis orci. Aliquam volutpat dui ac quam sagittis, sed volutpat velit sollicitudin. Nullam at consectetur erat. Proin quis est pretium, volutpat tellus sit amet, lacinia ex. Nam vel massa sed dolor tincidunt imperdiet non quis lorem. Ut efficitur luctus vestibulum. Phasellus nec blandit turpis. Sed viverra quam vitae gravida tincidunt. Praesent interdum iaculis dolor, ac cursus quam semper sit amet. Ut sapien magna, vulputate at erat quis, congue fermentum tortor. Etiam neque ex, pellentesque at venenatis ac, sollicitudin ut quam.
    </p>
  </div>
</div>

    CSS:

    body {
  width: 100%;
  margin: 0;
  padding: 0;
}

#main {
  display: flex;
  flex-direction: column;
}

#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background-color: grey;
  width: 100%;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

li {
  margin: 0 10px;
}

.container {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: yellow;
}

    In this solution, I’ve used flexbox for both the #navbar and .container. The #main element is set to display: flex with a column direction to stack the #navbar and .container vertically. The align-items: center on both #navbar and .container ensures that the content is vertically centered, and you don’t need to use margin-top.

    Login or Signup to reply.
  2. 0

    Just use

    position: "sticky";

    for the navbar and you won’t need any margin.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search