Projet Adoptly : Nav bar coloring


#1

I can't ajust the first element of the nav bar ("Adoptly) to render properly. The red color background apply only to the text and I didn't found the trick to apply it also the top and bottom of the header. I tried to wrap it in a div element but it didn't do the trick.

Here is my HTML :

 <div class="header">
      <div class="container">
        <ul class="nav">
          <div class="main">
           <li class="main">Adoptly</li>
          </div>
          <li>About</li>
          <li>Animals</li>
          <li>Blog</li>
          <li>Events</li>
        </ul>
      </div>
    </div>

Here is my CSS :

/*Header*/

.header {
background: #30627E;
color: #fff;
text-align: center;
}

.header ul {
margin: 20px 10px 20px 10px;
}

.header li {
padding: 10px;
display:inline;
font-size:22px;
}
.header .main {
background: #E52364;
font-size: 28px;
margin: 0;
display: inline;
padding: 10px;
}

Thank you for your help!


#2

Hi Marise,

Could you post a screenshot of what you're seeing?

I had to get a little more specific than I normally would to get around Bootstrap:

ul.nav li:hover {
  background-color: #E52364;
}

#3

Hi Zystvan,

Here is a link to the Project Adoptly. It is what it should look like : Project Adoptly.

Then, here is my project Adoptly, at the moment :

As you see, I was not able to make the red background colour around the word "Adoptly" take the full height of the nav bar, like in the original project. The background color is supposed to be there at all time, not just when hovered.

Thanks you a lot!

Marise


#4

Hi Zystvan,

I finally found a way to have it ok. I reduced the margin to zero for the .header li and I changed the padding of .header .main to expand it.

Here my new css :

.header li {
padding: 10px;
display:inline;
font-size:22px;
margin:0;
}

.header .main {
background: #E52364;
font-size: 28px;
margin: 0;
display: inline;
padding: 23px 10px;

}

See how it is now ok:

:

Thanks you very much any way!

Marise


#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.