Responsive, centered navbar?

Responsive, centered navbar?
0

#1

Hey guys, having a bit of trouble here. The linkedin and GitHub navpills should be centered and responsive. I’m avoiding bootstrap if possible and trying to make them act accordingly when I shrink the page (they keep breaking up at the icons and words). I somehow can’t make them completely centered either. Any help would be appreciated, thanks!


#2

You can either set a fix width for the links or use flexbox for your layout. I would choose the latter personally.

Also, you could use a media query, but that’s a little too much for this thing I guess.


#3

try setting your display to inline for the <i> and <a> elements that are supposed to stay together (both must have that setting). and you can then wrap them both up in a span if you need the span to have different display characteristics as a whole.

This will solve the breaking up apart problem.


#4

I don’t know flex box yet and what do you mean set a fix width?

EDIT: Nvm, I just did text-align: center; on the botnav class. Still trying to figure out the breaking up problem.


#5

That’s almost correct, you just have to make the anchor tags as display:inline-block and use
text-align:center to the.botnav and also now remove the width you have set on .botnav


#6

Quite honestly, all display: inline-block; on the anchor tags does is add padding to the botnav div? I’m confused on that. It doesn’t center it any moreso.


#7

It centers the links clearly, if you had followed the steps


#8

Without adding it in at all, it is still centered without the padding.


#9

You have to apply text-align: center to your .botnav class


#10

I didn’t use padding, it was already set there, since it was inline elements those paddings were not seen


#11

I updated my code from what I had in my IDE from last night. Check it now.


#12

Yep, that’s good to go, you have added what i had said before.