How to add a logo to the HTML+CSS menu?

Asked

Viewed 477 times

0

What is the correct way to add a logo or only the "name" of the site on the left side of the menu?

* {
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 50px;
  background-color: #1a1a1a;
  font-family: Roboto;
  box-shadow: 0px 0px 100px 5px;
}

.menu ul {
  text-align: center;
  list-style: none;
  position: relative;
  padding: 0;
}

.menu ul li ul {
  width: 100%;
}

.menu ul li {
  display: inline-block;
  width: 150px;
  padding: 0px 10px;
  line-height: 25px;
  padding: 0;
  position: relative;
}

.menu ul li a {
  text-align: center;
  font-size: 18px;
}

.menu a {
  padding: 12.5px;
  display: block;
  text-decoration: none;
  color: #666666;
}

.menu ul ul {
  background-color: black;
  position: absolute;
  opacity: 0;
  transition: all 500ms;
}

.menu ul ul li {
  float: none;
  border-bottom: solid 1px #262626;
}

.menu ul li:hover ul {
  opacity: 1;
}

.menu ul ul a:hover {
  transition: all 0.4s ease;
  background-color: #262626;
  color: white;
}

.menu a:hover {
  transition: all 0.4s ease;
  color: white;
}

.menu ul ul li {
  background-color: #1a1a1a;
}

.menu ul ul a {
  font-size: 17px;
}

.menu ul ul li a:hover ul ul ul {
  visibility: visible;
}
<body>
  <nav class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home2</a>
        <ul>
          <li><a href="#">SubA</a></li>
          <li><a href="#">SubB</a></li>
        </ul>
      </li>
      <li><a href="#">Home3</a>
        <ul>
          <li><a href="#">SubC</a></li>
          <li><a href="#">SubD</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

css html5

1 answer

1


You can use a display: flex; in <nav> menu so that the items stay in the same line. Then just apply a style to the title and put a margin: 0 auto; in his <ul>.

* {
  margin: 0;
  padding: 0;
}

.menu {
  height: 50px;
  background-color: #1a1a1a;
  font-family: Roboto;
  box-shadow: 0px 0px 100px 5px;
  display: flex;
  width: 100%;
}

.menu h1 {
  font-size: 18px;
  text-align: left;
  padding: 12.5px 0 12.5px 12.5px;
  color: white;
  width: 0;
}

.menu ul {
  margin: 0 auto;
}

.menu ul li ul {
  width: 100%;
}

.menu ul li {
  display: inline-block;
  width: 150px;
  padding: 0px 10px;
  line-height: 25px;
  padding: 0;
  position: relative;
}

.menu ul li a {
  text-align: center;
  font-size: 18px;
}

.menu a {
  padding: 12.5px;
  display: block;
  text-decoration: none;
  color: #666666;
}

.menu ul ul {
  background-color: black;
  position: absolute;
  opacity: 0;
  transition: all 500ms;
}

.menu ul ul li {
  float: none;
  border-bottom: solid 1px #262626;
}

.menu ul li:hover ul {
  opacity: 1;
}

.menu ul ul a:hover {
  transition: all 0.4s ease;
  background-color: #262626;
  color: white;
}

.menu a:hover {
  transition: all 0.4s ease;
  color: white;
}

.menu ul ul li {
  background-color: #1a1a1a;
}

.menu ul ul a {
  font-size: 17px;
}

.menu ul ul li a:hover ul ul ul {
  visibility: visible;
}

/* Apenas para a resposta */
nav {
  margin-bottom: 10.0rem;
}
/* --------------------- */
<body>
  <nav class="menu">
    <h1>Logomarca</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home2</a>
        <ul>
          <li><a href="#">SubA</a></li>
          <li><a href="#">SubB</a></li>
        </ul>
      </li>
      <li><a href="#">Home3</a>
        <ul>
          <li><a href="#">SubC</a></li>
          <li><a href="#">SubD</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

  • John, and to align the menu items to the center leaving the logo on the left side?

  • @Carlosalberto, I’ll see and fix my answer [I’ll just have a snack before haha].

  • @Sam, yours worked here but menu items are more centered to the right than in the center.

  • 1

    @Carlosalberto, I believe that now is the way you would like. Anything is just call.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.