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 I could use (I can't even get it to be responsive with
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. vw
units I supposevw
) 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/yLRyOQy42 Replies
Unknown Userβ’2y ago
Message Not Public
Sign In & Join Server To View
Client requirements
Unknown Userβ’2y ago
Message Not Public
Sign In & Join Server To View
Yup I basically did that, I was hoping there was a better way so I didn't have to do that though π
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
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!
hmm I'd prolly do like this
https://codepen.io/-bloop-/pen/RweNGeG
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!
u can use list
u can just do it with a tags
i don't think it matters that much
Why does this work actually? Saw you put the βLogoβ in a span element (which I think is an inline element right?)
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
Thank you! Why margin-left: 15% though? is it because of the differing flex children lengths?
noo.. it's to make the logo come in the center
Oh I see
It's not centered though ;)
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:
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
Sorry I'm a little lost Vince, isn't this already centered?
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 gridOh ok i just noticed the button position π«£
π
I love that emoji
Lol
@vince
here is a similar code
but with grid
previous one was flex
made in case u want to use grid
Thank you!! Looks similar to Dazani's π I appreciate your help!!
but the better thing about this is there aren't any margins xD
π 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
ahaha
yaa
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;
i used 9 grids for 6 items
Extra grids for the space xD
This would be great if
<span>
s are valid children of ul
s π© https://www.w3.org/TR/2012/WD-html-markup-20120329/ul.htmlyours alao great tho
i mean it's working fine.. so good enough i guess
Less semantic/accessible though. I also believe if you use semantic elements wrong it's worse for SEO
i think u can just use empty li insted
won't that work?
Hmm, but span has no meaning at it and will ignored eventually i believe.
yaa
span isn't a semantic tag
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 π€
u can also further more just add
area-hidden = "true"
to further seal the dealOhhhh I didn't even think about that
it hided elements from screen reader
sure thing
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