Many struggles centering items on a menu bar

Hi there,

I have been trying to recreate a website design in code, and I’m having some difficulty figuring out my menu bar.

I want all the items centered vertically in the bar, and I want parts of it to be on the right side, and parts of it on the left. I have tried different floats but I’m just having the hardest time.

Also, as in the example, I would like the content to be centered in the page, but even though I used .top-menu { max-width: 80%; } , it didn’t change anything.

I’m super green! Any suggestions will be greatly appreciated :smiley:

This is what it is supposed to look like:

This is my attempt:
(Don’t worry about any of the icons or font styling. I will get to that later :sweat_smile:)
https://codepen.io/katiemackness/pen/exzwLP?editors=1100

Thanks very much!

align-items:center (MDN)

lots of great tools in Flexbox for dealing with things like this

1 Like

I’ve been trying different things with Flexbox, but having lots of difficulty. Do you have an idea maybe what I’m doing wrong? thanks for the suggestion!

So a couple of tips to help keep your project more manageable

add this:

.top-menu {
  display: flex;
  align-items: center
}

make a habit of wrapping certain groups of components in their own div.

give links and logos their own div called title-wrapper and link-wrapper

then you only have to manage floats for 2 divs instead of 7

–trying to make the links float right. ill send you a link in a sec–

1 Like

your refactored project on Codepen.

i was going for conciseness so that I can troubleshoot problems faster.

Not exactly the same image., but I did a quick markup of what you’re looking for:

<!doctype html>
<html>
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <div id="site_container">
    <div id="header_wrapper">
      <div id="header_container">
        <div class="left_side">
          <div class="logo_container"><img src="https://designshack.net/images/designs/bonfire-logo.jpg" alt="logo"></div>
          <div class="logo_moto">SO TURN THE LIGHTS OUT</div>
        </div>
        <div class="right_side">
          <ul class="menu">
            <li><a href="#" name="wishlist">WISH LIST</a></li>
            <li><a href="#" name="my_account">MY ACCOUNT</a></li>
            <li><a href="#" name="shopping_cart">SHOPPING CART</a></li>
            <li><a href="#" name="checkout">CHECKOUT</a></li>
            <li><a href="#" name="trashcan" class="material-icons">delete</a><span class="counter">0</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

<style>
* {
  box-sizing: border-box;
  font-family: arial;
}

body {
  margin: 0;
  padding: 0;
}

#header_wrapper {
    background: #d85246;
}

#header_container {
    background: #d85246;
    display: flex;
    justify-content: space-between;
    max-height: 80px;
    max-width: 900px;
    margin: auto;
}

#header_container a {
    text-decoration: none;
    color: #fff;
    font-size: 12px;
}

#header_container a[name='trashcan'] {
    display: block;
    background: transparent;
    font-size: 22px;
}

#header_container .menu li:last-child {
    position: relative;
}

#header_container .menu li:last-child .counter {
    background: #ff0000;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: -4px;
    right: 8px;
    color: #fff;
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: arial;
}

#header_container .logo_moto {
    color: #fff;
    font-size: 12px;
}

#header_container .left_side {
    display: flex;
    align-items: center;
}

#header_container .logo_container {
    max-width: 140px;
}

#header_container .menu {
    display: flex;
    align-items: center;
}

#header_container .menu li {
    padding: 0 10px;
}

img {
    width: 100%;
}

#header_container .right_side {
    display: flex;
    align-items: center;
}

#header_container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
</style>


</body>
</html>
1 Like

Be sure to add

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

in the head

Change this in your .top-menu from;

justify-content: space-between;

to

justify-content: space-evenly;

space-evenly has good support on desktop, but shaky support on mobile.

That did it! Thanks very much for your advice. I suppose I was putting the wrong flex properties together? I definitely need more practice!

btw, what is the purpose of having the href attribute in <div class=“title-wrapper” href="#" ? Does this make the whole thing a link together?

Thanks

That looks really good! This gives me a lot of great ideas! What did you do to make the logo?

some attributes can be applied to the children of a div by assigning it to the parent. thats how alight-items works and the same is true for many other css attributes.

also its good practice to section off your html into smaller components so that you dont have to repeat yourself. you can just apply css to one thing instead of a bunch of things. makes your code neater and easier to manage.

The href attribute in the div will make the whole div link to where the href is pointing to, yes. That href in the title-wrapper div would have just linked the div to that div, so the page would have gone nowhere if that div was clicked in that instance.

That’s very helpful. Thanks very much! This is my first try coding a design, so I really appreciate the input. :smiley:

1 Like

Excellent job so far!

A few resources I like to point folks to are;

https://gridbyexample.com/resources/ to get you started.

Some others;



Rachel is the one to follow when it comes to Grid and Flexbox. Jen Simmons is the other one you should follow if you want to learn and know Grid and Flexbox.