CODEWITHSUNDEEP
csshtml
salty_coffee
salty_coffee

Reputation: 631

html content overlapping navbar

The content from my html document is overlapping my navbar.

I have tried to add margins to my .main-nav in css but it did not work.

The example code has "Hello World" on top of my nav bar. I want to have a new section that starts right below the main navbar without using 

.main-nav{
  float:right;
  list-style: none;
  margin-top: 25px;
  margin-bottom: 50px;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}

.section-test{
    margin-top: 200px;
}
<body>
    <nav>
      <div class="row">
      <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
      <ul class="main-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Log In</a></li>
        <li><a href="#">Get a Demo</a></li>
      </ul>
      </div>
    </nav>

   <section class="section-test">
    <h3>hello world</h3>
   </section>
</body>

Upvotes: 1

Views: 400

Answers (2)

GuCier
GuCier

Reputation: 7405

As you are using float: right on your nav element, it is out of the flow. What that means is that the nav parent doesn't takes it's height into account.

You have multiple solutions here. The first one is to apply an overflow:hidden to the nav element to force it to grow, to use a clear element as mentioned by Punith Jain, or simplify your markup and get rid of the floating with the usage of flexbox!

.row {
  display: flex;
}

.main-nav{
  text-align: right;
  flex: 1;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}
<nav>
  <div class="row">
    <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
    <ul class="main-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Get a Demo</a></li>
    </ul>
  </div>
</nav>

<section>
  <h3>hello world</h3>
</section>

Upvotes: 0

Punith Jain
Punith Jain

Reputation: 1677

use clear:both; on section-test class

/* Styles go here */

.main-nav{
  float:right;
  list-style: none;
  margin-top: 25px;
  margin-bottom: 50px;
}

.main-nav li{
  display: inline-block;
  margin-left: 15px;
}

.section-test{
  clear: both;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <nav>
        <div class="row">
        <img src="{% static 'resources/img/logo-transparent.png' %}" class="logo" alt=" Logo">
        <ul class="main-nav">
          <li><a href="#">About</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Get a Demo</a></li>
        </ul>
        </div>
      </nav>

     <section class="section-test">
      <h3>hello world</h3>
     </section>
  </body>

</html>

Upvotes: 2

Related Questions