Html - I'm trying to figure out how to setup a responsive navbar with a centered logo

Marketingn3rd
April 27, 2024
93 views
1 vote
2 Answers

I’m new here, but I wasn’t able to find an answer to this using just html, css, and js. This is my first expedition outside WordPress. I’ve been stuck for 3 days and I’m missing something. I don’t have anyone to reach out to get another set of eyes on it, so I figured I’d try my luck here. The desktop version works, it’s the mobile responsive that’s not working for me. I debated creating a separate navbar for mobile only, but figured there’s probably a way to do this without that.

The header is transparent until hover (got that)
It’s sticky and transforms to another color on scroll (got that)
The responsive part is killing me though, I lose the centered logo and can’t get the button to open a dropdown menu. Any help is appreciated.

header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-weight: 600;
  height: 78px;
  width: 100%;
  background-color: transparent;
  position: sticky;
  transition: background-color 0.3s;
  z-index: 10;
  top: 0;
}


/* BLUE HEADER BACKGROUND ON HOVER */

header:hover {
  background-color: #7B97A6;
}


/* START HEADER BACKGROUND TRANSITION ON SCROLL */

header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #7B97A6 0%, #2C4149 50%);
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.header-scrolled::before {
  opacity: 1;
}

.menu {
  display: flex;
  flex-direction: row;
  height: 100%;
  align-items: center;
  justify-content: space-evenly;
  font-size: 1.8rem;
  width: 100%;
  height: 100%;
  column-gap: 7vw;
}

.menu a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.1rem;
}

.menu a:hover {
  color: #cf0a2c;
  transition-duration: 0.6s;
}

.btn-toggle,
.menu-container .links {
  display: none;
}

.nav-logo {
  display: block;
  width: 144px;
  margin: 0 auto;
  float: none;
}

.logo {
  width: 100%;
  height: auto;
}

.icons {
  height: 20px;
  margin-right: 2px;
  align-items: center;
  vertical-align: middle;
}

.menu ul {
  display: flex;
  flex-direction: row;
  list-style: none;
  text-transform: uppercase;
  column-gap: 6vw;
}

<header>
  <nav class="menu-container">
    <div class="menu" id="navbar">
      <ul class="left-side nav-links">
        <li>
          <img src="iconsproducts-icon.svg" alt="product icon" class="icons" />
          <a href="#" target="_blank">Products</a>
        </li>
        <li>
          <img src="iconsshopping-cart.svg" alt="shopping cart icon" class="icons" />
          <a href="#" target="_blank">Order-now</a>
        </li>
      </ul>
      <div class="nav-logo" id="nav-logo">
        <img src="imageslogo.png" width="144" alt="Logo" class="logo" />
      </div>
      <ul class="right-side nav-links">
        <li>
          <img src="iconsservice-locator.svg" alt="search icon" class="icons" />
          <a href="#" target="_blank">Service Locator</a>
        </li>
        <li>
          <img src="iconscontact-icon.svg" alt="phone icon" class="icons" />
          <a href="#" target="_blank">Contact</a>
        </li>
      </ul>
    </div>
    <button class="btn-toggle">
            <img src="iconsmobile-toggle.svg">
        </button>
  </nav>
</header>

Here’s an image of the desktop version centered logo desktop menu.

This is the mobile responsive look I’m going for.responsive mobile dropdown nav

Answers

Hy my friend. You have definitely created too many unnecessary wrappers and duplicated the menu for some reason, although this makes no sense. Refactoring your code turned out to be more difficult than writing a working new sample. I recommend using the grid system for navbar.

document.querySelector('.btn').addEventListener('click', () => {
      document.querySelector('.nav').classList.toggle('active')
    })

.header {
  position: sticky;
  background: red;
  transition: background 0.5s ease;
}

.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header:hover {
  background: blue;
}

.btn {
  display: none;
}

.content {
  min-height: 1200px;
  background: green;
}

@media screen and (max-width: 768px) {
  .header {
    display: flex;
    justify-content: flex-end;
  }

  .nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
  }

  .btn {
    display: block;
  }

  .active {
    opacity: 1;
    transform: translateY(100%);
  }
}

      <div class="header">
        <nav class="nav">
          <li>item1</li>
          <li>item2</li>
          <li>logo</li>
          <li>item4</li>
          <li>item5</li>
        </nav>
        <button class="btn">button</button>
      </div>
      <div class="content"></div>

I also encourage you to use my code only as a rough template. You need to put elements on const, create separate functions for the event listener and choouse correctly media quares.

You probable need to use media queries to achieve something responsive.
Here is a small snippet that will behave differently below 600px

function toggle() {
  const navList = document.getElementById('nav-list')
  if (navList.classList.contains('expanded')) {
    navList.classList.remove('expanded')
  } else {
    navList.classList.add('expanded')
  }
}

body {
  padding: 0;
  margin: 0;
  background: #7B97A6;
}

header {
  background: #1D617A;
  position: relative;
}

#nav-list {
  height: 3rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#nav-list li {
  list-style-type: none;
  cursor: pointer;
}

.expander {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  height: 2rem;
  width: 2rem;
  display: none;
}

@media (max-width: 600px) {
  #nav-list {
    flex-direction: column;
  }
  #nav-list.expanded {
    height: fit-content;
  }
  header {
    background: #7B97A6;
    cursor: pointer;
  }
  header:hover {
    background: #1D617A;
  }
  
  .nav-link {
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    display: none;
    width: 100%;
  }
  .nav-link:hover {
    background: #345F77;
  }
  
  .expanded .nav-link {
    display: block;
  }
  .expanded .nav-logo {
    background: #7B97A6;
    height: 3rem;
    line-height: 3rem;
    display: block;
  }
  .nav-logo {
    order: -1;
    width: 100%;
    text-align: center;
  }
  .expander {
    display: block;
  }
}

<body>
  <header onclick="toggle()">
    <nav>
      <ul id='nav-list'>
        <li class='nav-link'>Products</li>
        <li class='nav-link'>Order Now</li>
        <li class='nav-logo'>LOGO</li>    
        <li class='nav-link'>Service Locator</li>
        <li class='nav-link'>Contact</li>
      </ul>
    </nav>
    <button class='expander'>
      |||
    </button>
  </header>
</body>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – I'm trying to figure out how to setup a responsive navbar with a centered logo

Answers