Kevin Powell - Community•15mo ago

Centered navbar with cta button

Hey guys, I'm trying to make a navbar where the logo is dead center of the screen. I've already figured out how to do that; however, I have an extra item, the cta button, I need to add in. So instead of it being 5 li items, it's 6, which means the logo will not be dead center of the screen. Right now, I'm using position: absolute but it's not super responsive and feels super hacky. ~~I could use vw units I suppose~~ (I can't even get it to be responsive with vw) but I feel like there might be a better way with grid somehow. Curious what your thoughts are on how to tackle this problem. https://codepen.io/vince1444/pen/yLRyOQy

vince1444

CodePen

Example

...

42 Replies

Unknown User•15mo ago

Message Not Public

vince•15mo ago

Client requirements

Unknown User•15mo ago

Message Not Public

vince•15mo ago

Yup I basically did that, I was hoping there was a better way so I didn't have to do that though 😭

Dazani•15mo ago

Hey @vince! Couldn't you use grid to define 5 columns: padding, 1fr, Logo, 1fr, padding and then for the first 1fr column div, you could put your 2 links and the second 1fr column your 3 links? I'm just throwing an idea out there, but I'll go create a codepen to see if this works. created the codepen~ is this what you were looking for? https://codepen.io/joelramos_io/pen/jOeEMaZ

vince•15mo ago

Thanks Dazani! I never actually thought about structuring my HTML like that, I'll have to look up the html spec for nav. I've always just put my links inside of a list for better accessibility but I don't believe it's needed if it's inside a nav element... 🤔 thanks again, I really appreciate you taking your time out to help!

glutonium•15mo ago

hmm I'd prolly do like this https://codepen.io/-bloop-/pen/RweNGeG

Tahzib Ebad

CodePen

RweNGeG

...

Dazani•15mo ago

I actually don’t know the best practices for navigation menus (like whether to use lists and such). If anybody can comment on this, that would be great!

glutonium•15mo ago

u can use list u can just do it with a tags i don't think it matters that much

Dazani•15mo ago

Why does this work actually? Saw you put the “Logo” in a span element (which I think is an inline element right?)

glutonium•15mo ago

i mean here logo is probably going to be an image the text logo was just to indicate that and idk if span is an inline element or anything, but it generally doesn't do anything at all unless u customize it it's just like div by default, it's ike invisible and i could do the same with lists as well but I don't feel like lists r important here so didn't use

vince•15mo ago

Thank you! Why margin-left: 15% though? is it because of the differing flex children lengths?

glutonium•15mo ago

noo.. it's to make the logo come in the center

vince•15mo ago

Oh I see It's not centered though ;)

vince•15mo ago

vince•15mo ago

That's why I was using position: absolute in the first place to take the 6th element out of the equation so the nav can center my items based off 5, which means the logo will be dead center of the page From the w3 spec (https://www.w3.org/TR/2011/WD-html5-author-20110809/the-nav-element.html): A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>

So it looks like your markup is valid 🙂. I don't know if it's less accessible compared to the usual navigation > ul though... I could be wrong but I believe lists allow you to tab through the links, so if I don't have that then I don't think I'd be able to tab through the links, which would be less accessible. I'd have to test it though

~MARSMAN~•15mo ago

~MARSMAN~•15mo ago

Sorry I'm a little lost Vince, isn't this already centered?

vince•15mo ago

Yup! But that's because I used position: absolute on my Contact Us cta button... which isn't exactly responsive, so I was wondering if there was a better solution 🙂 I'm not great at grid

~MARSMAN~•15mo ago

Oh ok i just noticed the button position 🫣

vince•15mo ago

😂 I love that emoji

~MARSMAN~•15mo ago

Lol

glutonium•15mo ago

@vince

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    a{
      text-decoration: none;
      color: black;
    }
    
    span{
      font-size: 1.5em;
    }
    
    button{
      background: green;
      border: none;
      padding: 10px;
      font-weight: 600;
      color: white;
    }
    
    nav{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(9,1fr);
    }
    
    a:nth-of-type(1){
      grid-column-start: 3;
    }
    
    a,span{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
  </style>
</head>
<body>
  
  <nav>
    
      <a href="#">About us</a>
      <a href="#">Service</a>
      <span>Logo</span>
      <a href="#">Work</a>
      <a href="#">Portfolio</a>
      <button>Contact us</button>
    
  </nav>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    a{
      text-decoration: none;
      color: black;
    }
    
    span{
      font-size: 1.5em;
    }
    
    button{
      background: green;
      border: none;
      padding: 10px;
      font-weight: 600;
      color: white;
    }
    
    nav{
      width: 100%;
      display: grid;
      grid-template-columns: repeat(9,1fr);
    }
    
    a:nth-of-type(1){
      grid-column-start: 3;
    }
    
    a,span{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
  </style>
</head>
<body>
  
  <nav>
    
      <a href="#">About us</a>
      <a href="#">Service</a>
      <span>Logo</span>
      <a href="#">Work</a>
      <a href="#">Portfolio</a>
      <button>Contact us</button>
    
  </nav>
  
</body>
</html>

here is a similar code but with grid previous one was flex made in case u want to use grid

glutonium•15mo ago

vince•15mo ago

Thank you!! Looks similar to Dazani's 🙂 I appreciate your help!!

glutonium•15mo ago

but the better thing about this is there aren't any margins xD

vince•15mo ago

😂 Yea once you start adding the random margins/right: -10rem like I did it gets really messy... which is what I was trying to avoid in the first place lolol

glutonium•15mo ago

ahaha yaa

~MARSMAN~•15mo ago

https://codepen.io/ThatMartianDev/pen/RweNGYG

MarsMan

CodePen

force-center

...

~MARSMAN~•15mo ago

I tried this, see if it's what you want I just added a fake span in the ul and changed the grid to grid-auto-flow: column;

glutonium•15mo ago

i used 9 grids for 6 items Extra grids for the space xD

vince•15mo ago

This would be great if <span>s are valid children of uls 😩 https://www.w3.org/TR/2012/WD-html-markup-20120329/ul.html

glutonium•15mo ago

yours alao great tho i mean it's working fine.. so good enough i guess

vince•15mo ago

Less semantic/accessible though. I also believe if you use semantic elements wrong it's worse for SEO

glutonium•15mo ago

i think u can just use empty li insted won't that work?

~MARSMAN~•15mo ago

Hmm, but span has no meaning at it and will ignored eventually i believe.

glutonium•15mo ago

yaa span isn't a semantic tag

vince•15mo ago

Yea I suppose, but it would still wouldn't be semantic/accessible because if I'm adding a list element there should be something in there I've gotta fiddle around with everything, I think the best bet might just be to talk to the client about it and give them the option... Thanks again for all your help guys! Again, I'll look through these solutions and see if I can retrofit something from them and get back to you guys if I do 🤔

glutonium•15mo ago

u can also further more just add area-hidden = "true" to further seal the deal

vince•15mo ago

Ohhhh I didn't even think about that

glutonium•15mo ago

it hided elements from screen reader sure thing

Coder_Carl•14mo ago

Just fyi peeps: the typical ul>li for a navbar doesn't add anything for it's accessibility as soon as you add css list-style: none; Unless you add a role="list" back to the ul. Main thing is to add those landmarks in using the nav html tag and maybe an aria-label="Primary navigation" if relevant to identify the landmark and contents appropriately

Gaming

Programming

Centered navbar with cta button