Bootstrap 4 Navbar help

Bootstrap 4 Navbar help
0.0 0

#1

On the portfolio project, I’m trying to use a navbar. I would like the brand to be centered, no matter the page size, with the links on the right. So far I’ve only figured how to do it when the navbar is collapsed. Any help would be greatly appreciated.


#2

Hey there!

You currently have .nav-brand implemented as follows:

    <a class="navbar-brand d-flex mx-auto" href="#">Philip Kenny</a>

If I’m not mistaken, .d-flex is unnecessary here because you don’t actually require any of its child element to be flex items (well, there are none), and it’s making the anchor a block element that can’t be aligned the way you want.

If .d-flex is not necessary in your design, you can simply remove it (probably mx-auto, too) and then add the Bootstrap text-center class to the anchor. If you do need it to be a flex box then you can consider using .d-flex-inline.

I hope that helps! :slight_smile:


#3

Thanks for the reply, but that didn’t work either.

Using Chrome’s Inspect Element, I can see that the nav items on the right have a massive amount of margin to the left of them:

Maybe using additional css, to reduce this might help, but I don’t think it will center the brand in the middle of the page, just the space that is left.


#4

EDIT Please ignore this. It only works when the menu is collapsed. Not entirely sure what I was thinking and doing at the time.

I just tested it on Chrome and the text-center solution it seems to be fine. :frowning: Just in case I was being ambiguous, I simply changed the anchor with the nav-brand class to:

<a class="navbar-brand text-center" href="#">Philip Kenny</a>

And that centers your name both when the menu is and isn’t collapsed on both Chrome and Safari. If I’m not mistaken, the margin that you mentioned is not the issue because <ul> is a block element and will always fill whatever space available to it.

I hope that helps. :slight_smile:


#5

Using Chrome, on screens bigger than 992px, this is what I see when using

<a class="navbar-brand text-center" href="#">Philip Kenny</a>

Smaller than 992px, and the brand centers, and the collapse menu button shows up.


#6

Hi there!

I looks like you have added another navbar-collapse and that it’s centering everything now. I’m still a bit puzzled about what happened last night with the discrepancies, but it looks like I must have only tested when it’s collapsed (I thought I tested both) and everything else is just… completely wrong. Many apologies!

You may already have figured it out—but if you don’t actually want the Home button you can simply remove the text and the structure will still be preserved.