Overlapping Navbar (horizontal)

1

I’m trying to replicate random websites to practice CSS (beginning to learn) and i came across something that i dont know how to fix.

i did a horizontal nav bar that when i shrink down ( horizontally only), the logo and topics overlap.

looking for a solution.

Thanks for any help :slight_smile:

code below:

type or paste code here
```<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" href="princingex_nav.css">
 </head>
 <body>
  
<nav> 
<h2 id="logo">Company name</h2>
 
 <ul>
   <li><a href="#"> Features</a></li>
  <li><a href="#"> Enterprise</a></li>
  <li><a href="#"> Support</a></li>
  <li><a href="#"> Pricing</a></li>
  
  <li><a href="#" id="botao"> Sign Up</a></li>
</ul>
</nav>

<div id="div_principal">
<h1>Pricing</h1>
<p id="p_h1"> Quickly build an effective pricing table for your potential customers with this Bootstrap example. 
  It’s built with default Bootstrap components and utilities with little customization.</p> 
</div>

<div id="boxes">
<div class="box-price">
<h2 class="h2-box-price">Free</h2>
 
<p class="valor-p-box-price"> <b id="dolar">$ 0 </b>/ mo</p>

 <p class="p-box-price"> 10 users included<br /> 2 GB of storage<br /> Email suport<br /> Help center acess</p>

 <p><a href="#">Sign up for free</a></p>
</div>

<div class="box-price">
 <h2 class="h2-box-price">Pro</h2>
  
 <p class="valor-p-box-price"> <b id="dolar">$ 15 </b>/ mo</p>

  <p class="p-box-price"> 20 users included<br /> 10 GB of storage<br /> Priority email suport<br /> Help center acess</p>

  <p><a href="#" class="proeE-button">Get started</a></p>
</div>

<div class="box-price">
 <h2 class="h2-box-price">Enterprise</h2>
  
 <p class="valor-p-box-price"> <b id="dolar">$ 29 </b>/ mo</p>

  <p class="p-box-price"> 30 users included<br /> 15 GB of storage<br /> Phone and email suport<br /> Help center acess</p>

  <p><a href="#" class="proeE-button">Contact us</a></p>

 </div>
</div>

   </body>
</html>









**CSS CODE:**


nav{
   border-bottom-style: groove;
   padding: 5px 0px 7px 0px;
   
   
}


nav ul{
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: end;
}


nav li{
   display: inline-block;
   padding: 5px;

}



nav li a{  
   text-decoration: none;
   color: rgb(59, 58, 58);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
}


nav li a:hover{
   border-bottom-style: solid;
   border-bottom-width: 1px;
}


#botao{
   color: royalblue;
   border-style: solid;
   border-width: 1px;
   padding: 3px;
   border-radius: 5px;
}

#botao:hover{
   background-color: royalblue;
   color: white;
}


#logo{
   height: 0;
   margin: 0px 0px 0px 20px;
   font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
   color: rgb(36, 35, 35);
   font-weight: normal;
   
}




#div_principal{
   position: static;
   width: 100%;
   text-align: center;
   margin-top: 80px;
   font-family: 'Quicksand', sans-serif;
}

h1{
color: rgb(44, 43, 43);
font-weight: lighter;
}

#p_h1{
  display: inline-block;
  max-width: 50%;
  margin-top: 0;
  line-height: 25px;
}



#boxes{
   text-align: center;
   transform: scale(1.2,1.2);
}



.box-price{
display: inline-block;
border-style: groove;
margin: 50px 0px 0px 50px;
border-width: 2px;
border-radius: 5px;
border-color: rgb(248, 247, 247);
font-family: 'Quicksand', sans-serif;
text-align: center;
}


.h2-box-price{
   margin: 0px 0px 10px 0px;
   padding: 5px 0px 5px 0px;
   text-align: center;
   border-bottom-style: groove;
   border-bottom-width: 3px;
   background-color: rgb(236, 236, 238);
   font-weight: lighter;
   font-size: 20px;
}

.valor-p-box-price{
   padding: 0px 10px 5px 10px;
   text-align: center;
   color: rgb(158, 158, 158);
}


.p-box-price{
   padding: 0px 10px 5px 10px;
   text-align: center;
   font-size: 16px;
   line-height: 20px;
}

p a{
   display: inline-block;
   text-decoration: none;
   text-align: center;
   padding: 0px 15px 0px 20px;
   border-style: solid;
   border-color: rgb(20, 113, 219);
   border-radius: 5px;
   border-width: 1px;
   padding: 5px;
   color:  rgb(20, 113, 219);
}


p a:hover{
   background-color: rgb(20, 113, 219);
   color: white;
}    

#dolar{
   color: black;
   font-size: 20px;
}

.proeE-button{
   display: inline-block;
   text-decoration: none;
   text-align: center;
   padding: 0px 15px 0px 20px;
   background-color: rgb(20, 113, 219);
   border-radius: 5px;
   border-width: 1px;
   padding: 5px;
   color: white;
}

.proeE-button:hover{
   background-color:  rgb(17, 98, 190);
}
2

Hey Vinicius,

nice to meet you! :wave:

It would be awesome to see a (working) example of your project on codepen, so that we can fiddle around with it.

Looking forward to seeing it! :slightly_smiling_face:

3

It’s the height: 0 on the #logo h2.

That really isn’t how you are supposed to get the h2 and ul to share the same line. You can make the nav container a flex container, or you can set the elements (h2 and ul) to be inline-block so they share the same line in the container.

Flexbox example (remove the height: 0 on the h2)

nav {
  border-bottom-style: groove;
  padding: 5px 0px 7px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
1 Like
4

hey, miku89! nice to meet u2!

(the link to codepen)

:slight_smile:

5

hey, lasjorg!

when I researched, a lot about flexbox came up. as I’m still starting, I don’t quite know how to do it yet, but I’ll save your answer for when I get to the subject.

PS: I just tested it and it worked!!!

Thanks! :slight_smile:

6

I always recommend this for learning flexbox:

1 Like
7

This is also fun!

1 Like