How to keep the content of my page below the navbar, regardless of screen height?

user_16422199 0
Viewed 31

I am trying to place the content of my homepage below my navabr which is located at the center of the page. I was able to place the content below the navbar, but it changes when I change the window's height. How do I make it stick below the navbar? this is the css:

.content {
    position: relative;
    height: 100vh;
    transition: 0.3s;
}

.homeNav {
    transition: 0.3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.homeContent {
    position: absolute;
    transition: 0.3s;
    top: 65%;
}

This is my html:

<body>
    <div class="container content">
        <nav class="homeNav" id="all">
            <img src="/images/400x200.png" class="img-fluid mx-auto d-block" />
            <div class="row bg-info">

             NAVIGATION BAR HERE

            </div>
        </nav>
        <div id="main-page" class="homeContent">
        </div>
    </div>
</body>

Please note that this is a single-page application, and the content of the main-page is obtained from a separate HTML file.

responsive-design screen-orientation css html
1 Answers

You can add css to the body element

body{
  margin-top: 200px;
}

That's it. Alternatively, you can wrap the header and bottom content in a div and then give margin-top to that div element.

<div class="wrapper">
   <nav>Header Area</nav>
   <!-- Everything else goes here -->
</div>

CSS for wrapper class:

.wrapper{
   margin-top: 200px;
}
user_71525930
Related