Kevin Powell - Community•2mo ago

How do i center the logo and the nav items perfectly

how do i center my logo and my nav list perfectly in mobile mode, and what is causing that extra spacing on the logo? https://codepen.io/Adhurim-Gashi/pen/PoryKxQ

5 Replies

razesh•2mo ago

It looks like in center

theboyduddus•2mo ago

On mobile sizes The crl logo isnt perfectly centered with the nav items

razesh•2mo ago

Make it flex, and align items as center on bigger devices

Chris Bolson•2mo ago

The logo isn't centered because it is in a container that has display: flex along with the hamburger icon/button. This means that the parent has to divide the content as best it can between the 2 items and, whilst it can center the logo within the second cell, it can't center it within the parent as the button is taking up part of the available area. One way to achieve what you want is to add another element, albeit empty, to the right of the logo that has the same width as the hamburger icon. You could even do this with a psuedo element if you don't want to add any extra markup in the HTML. This is how you could do it with a pseudo element:

.site__tagline {
  position: relative;
  display: flex;
  align-items: center;
}
.site__tagline:after{
  content: '';
  width: 33px; /* same width as hamburger button */
}

.site__tagline {
  position: relative;
  display: flex;
  align-items: center;
}
.site__tagline:after{
  content: '';
  width: 33px; /* same width as hamburger button */
}

Alternatively you could use grid on the parent element and give it 3 columns. This way you wouldn't need to add any extra elements, something like this:

.site__tagline {
  display: grid;
  grid-template-columns: 33px 1fr 33px; /* 33px = width of hamburger button */
}

.site__tagline {
  display: grid;
  grid-template-columns: 33px 1fr 33px; /* 33px = width of hamburger button */
}

There are of course many other ways to achieve the same thing.

theboyduddus•2mo ago

bro thank you so much

Gaming

Programming

How do i center the logo and the nav items perfectly