How can I put a logo on the same line as a navbar flexbox?

Question

How can I put a logo on the same line as a navbar flexbox?

Navigation

#1 by (1 votes)

0

Hello,

I have this situation:

.navigation{
  margin: 0; 
  display: flex;
  background-color: #6ab240;
  height: 64px;
  justify-content: center;
  align-items: center;
}

.navigation a {
  font-family: 'Roboto', sans-serif;
  color: white;
  text-decoration: none;
  padding: 20px;
}


/*Botão esta Certo*/
.botao-contato{
  background-color: #333366;
  color: white;
  border: none;
  font-size: 14px;
  padding: 10px 40px;
  border-radius: 8px;
  margin-left: 50px;
}

<header>
    <h1 class="logo"><img src="http://i.imgur.com/lo6IuZS.png"alt="Instituto Feira Livre"> </h1>
<nav>
        <ul class="navigation">
          <li><a href="#">O que é?</a></li>
          <li><a href="#">Como funciona?</a></li>
          <li><a href="#">Qual é a diferença?</a></li>
          <li><button class="botao-contato" type="button">Contato</button>
        </ul>
      </nav>
</header>

In this way the logo is above the navbar, how can I put the logo on the same line as the navbar? I did not put the logo inside the ul because I want it to be as semantic as possible.

link

html css

asked by anonymous 12.03.2017 / 16:37

1 answer

Limit text to first paragraph in AngularJS New time schedule - Database

score 1 · Accepted Answer

Place content of h1 within ul of navigation.

<nav>
    <ul class="navigation">
      <li class="brand"><img src="http://placehold.it/50x50"alt="Instituto Feira Livre"></li>
      <li><a href="#">O que é?</a></li>
      <li><a href="#">Como funciona?</a></li>
      <li><a href="#">Qual é a diferença?</a></li>
      <li><button class="botao-contato" type="button">Contato</button>
    </ul>
  </nav>