Html - Align Header Logo to the left

cjenkins08
September 17, 2024
146 views
0 votes
2 Answers

I have a logo in my header with a navigation bar above and below. The logo always is centered. How do I get this to align left. I have updated from the original post to add some code that was missing.

The revised code that was missing from the original post are the divs for Wrapper, shell, and container, along with the CSS for these.

footer,
header,
menu,
nav,
section {
  display: block;
}

.shell {
  width: 100%;
  margin: 0 auto;
}

.container {
  background: #fff;
}

#header {
  height: 82px;
  float: left;
}

#logo {
  height: 80px;
  display: block;
  border: 2px solid silver;
}

#navigation,
#topnav {
  height: 37px;
  font-weight: 600;
  background-color: #1B2A47;
}

#navigation ul,
#topnav ul {
  list-style: none;
  list-style-position: outside;
}

#navigation ul li,
#topnav ul li {
  float: left;
  padding-right: 2px;
  line-height: 40px;
  font-size: 13px;
}

#navigation ul li a,
#topnav ul li a {
  display: block;
  padding: 0 22px 0 22px;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation ul li a:hover,
#topnav ul li a:hover {
  color: #7DC33A;
  text-decoration: none;
}

#navigation ul li.first a,
#topnav ul li.first a {
  padding-left: 30px;
}

#navigation a.nav-btn {
  display: none;
}

<div id="wrapper">
  <div class="shell">
    <nav id="topnav">
      <ul>
        <li><a href="link.html">Link</a></li>
        <li><a href="link.html">Link</a></li>
        <li><a href="link.html">Link</a></li>
      </ul>
    </nav>
    <div class="container">
      <header id="header">
        <h1 id="logo"> <img src="https://picsum.photos/50/80" alt="Logo" /></h1>
      </header>

      <nav id="navigation">
        <a href="#" class="nav-btn">Menu<span class="arr"></span></a>
        <ul>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
          <li><a href="link.html">Link</a></li>
        </ul>
      </nav>

Tags: css html

Answers

#header {
  height: 82px;
  float: left;
  width: 100%; /* make header span width */
}

#logo {
  height: 80px;
  align: left; /* align logo to left */
}

#navigation,
#topnav {
  height: 37px;
  font-weight: 600;
  background-color: #1B2A47;
  clear: both; /* ensure nav bars dont overlap the logo */
}

#navigation ul,
#topnav ul {
  list-style: none;
  list-style-position: outside;
}

#navigation ul li,
#topnav ul li {
  float: left;
  padding-right: 2px;
  line-height: 40px;
  font-size: 13px;
}

#navigation ul li a,
#topnav ul li a {
  display: block;
  padding: 0 22px 0 22px;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation ul li a:hover,
#topnav ul li a:hover {
  color: #7DC33A;
  text-decoration: none;
}

#navigation ul li.first a,
#topnav ul li.first a {
  padding-left: 30px;
}

#navigation a.nav-btn {
  display: none;
}

<nav id="topnav">
  <ul>
    <li><a href="link.html">Link</a></li>
    <li><a href="link.html">Link</a></li>
    <li><a href="link.html">Link</a></li>
  </ul>
</nav>

<header id="header">
  <h1 id="logo"> <img src="logo.png" alt="Logo" /></h1>
</header>

<nav id="navigation">
  <a href="#" class="nav-btn">Menu<span class="arr"></span></a>
  <ul>
    <li><a href="link.html">Link</a></li>
    <li><a href="link.html">Link</a></li>
    <li><a href="link.html">Link</a></li>
  </ul>
</nav>

Use the code below to set your logo to the left alignment, also add the closing div to the missing in your HTML code.

footer,
header,
menu,
nav,
section {
  display: block;
}

.shell {
  width: 100%;
  margin: 0 auto;
}

.container {
  background: #fff;
}

#header {
  height: 82px;
}

#logo {
  height: 80px;
  display: block;
  border: 2px solid silver;
}

#navigation,
#topnav {
  height: 37px;
  font-weight: 600;
  background-color: #1B2A47;
}

#navigation ul,
#topnav ul {
  list-style: none;
  list-style-position: outside;
}

#navigation ul li,
#topnav ul li {
  float: left;
  padding-right: 2px;
  line-height: 40px;
  font-size: 13px;
}

#navigation ul li a,
#topnav ul li a {
  display: block;
  padding: 0 22px 0 22px;
  color: #FFFFFF;
  text-decoration: none;
}

#navigation ul li a:hover,
#topnav ul li a:hover {
  color: #7DC33A;
  text-decoration: none;
}

#navigation ul li.first a,
#topnav ul li.first a {
  padding-left: 30px;
}

#navigation a.nav-btn {
  display: none;
}

<div id="wrapper">
    <div class="shell">
        <nav id="topnav">
          <ul>
            <li><a href="link.html">Link</a></li>
            <li><a href="link.html">Link</a></li>
            <li><a href="link.html">Link</a></li>
          </ul>
        </nav>
        <div class="container">
            <header id="header">
                <h1 id="logo"> <img src="https://picsum.photos/50/80" alt="Logo" /></h1>
            </header>

            <nav id="navigation">
                <a href="#" class="nav-btn">Menu<span class="arr"></span></a>
                <ul>
                  <li><a href="link.html">Link</a></li>
                  <li><a href="link.html">Link</a></li>
                  <li><a href="link.html">Link</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>

Your logo should be set as the left side when using the above code, also if you want to set your logo in the center just update the CSS only to center your logo.

#logo { text-align: center; }

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Align Header Logo to the left

Answers