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

li

items, it's 6, which means the logo will not be dead center of the screen. Right now, I'm using

position: absolute

position: absolute

but it's not super responsive and feels super hacky. I could use
vw
vw
units I suppose (I can't even get it to be responsive with

vw

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

CodePenvince1444

Example

...

HHuNTeR How about you move this contact section into footer and keep everything else up ...

vinceOP•4/7/23, 9:12 PM

Client requirements

Monimolimnion•4/7/23, 9:28 PM

Add a Home link as the first entry to the menu?

MMonimolimnion Add a Home link as the first entry to the menu?

vinceOP•4/7/23, 10:02 PM

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

Dazani•4/7/23, 10:26 PM

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.

Dazani•4/7/23, 10:33 PM

created the codepen~ is this what you were looking for?
https://codepen.io/joelramos_io/pen/jOeEMaZ

DDazani created the codepen~ is this what you were looking for? https://codepen.io/joelr...

vinceOP•4/7/23, 10:55 PM

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!

Vvince Hey guys, I'm trying to make a navbar where the logo is dead center of the scre...

glutonium•4/7/23, 11:04 PM

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

CodePenTahzib Ebad

RweNGeG

...

Dazani•4/7/23, 11:05 PM

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!

DDazani I actually don’t know the best practices for navigation menus (like whether to u...

glutonium•4/7/23, 11:06 PM

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

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

Dazani•4/7/23, 11:07 PM

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

DDazani Why does this work actually? Saw you put the “Logo” in a span element (which I t...

glutonium•4/7/23, 11:09 PM

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

glutonium•4/7/23, 11:10 PM

and i could do the same with lists as well

glutonium•4/7/23, 11:10 PM

but I don't feel like lists r important here so didn't use

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

vinceOP•4/7/23, 11:12 PM

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

Vvince Thank you! Why margin-left: 15% though? is it because of the differing flex chil...

glutonium•4/7/23, 11:12 PM

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

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

vinceOP•4/7/23, 11:13 PM

Oh I see

vinceOP•4/7/23, 11:13 PM

It's not centered though ;)

vinceOP•4/7/23, 11:13 PM

vinceOP•4/7/23, 11:14 PM

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

DDazani I actually don’t know the best practices for navigation menus (like whether to u...

vinceOP•4/7/23, 11:15 PM

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:

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~•4/7/23, 11:17 PM

~MARSMAN~•4/7/23, 11:17 PM

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

~~MARSMAN~Click to see attachment

vinceOP•4/7/23, 11:18 PM

Yup! But that's because I used

position: absolute

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~•4/7/23, 11:19 PM

Oh ok i just noticed the button position

~~MARSMAN~Oh ok i just noticed the button position 🫣

vinceOP•4/7/23, 11:19 PM

vinceOP•4/7/23, 11:20 PM

I love that emoji

~MARSMAN~•4/7/23, 11:21 PM

Lol

glutonium•4/7/23, 11:21 PM

@vince

glutonium•4/7/23, 11:22 PM

here is a similar code
but with grid

glutonium•4/7/23, 11:22 PM

previous one was flex

glutonium•4/7/23, 11:22 PM

made in case u want to use grid

glutonium•4/7/23, 11:22 PM

Gglutonium @vince ```<!DOCTYPE html> <html lang="en"> <head> <style> *{ m...

vinceOP•4/7/23, 11:24 PM

Thank you!! Looks similar to Dazani's

I appreciate your help!!

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

glutonium•4/7/23, 11:25 PM

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

vinceOP•4/7/23, 11:25 PM

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•4/7/23, 11:25 PM

ahaha

glutonium•4/7/23, 11:25 PM

yaa

~MARSMAN~•4/7/23, 11:26 PM

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

CodePenMarsMan

force-center

...