NavMenu | Center Logo | NavMenu

[PeteSharp]

@Eldar

One question, why didn’t you just use the same visibility settings in the inspector for the centered logo?

Hey @Eldar, thanks and good point, it wasn’t working when I first built it earlier that day and I didn’t try it again (nice spotting)

If this was an actual project of mine both icons would have had classes anyway and I would have used the display property and not the visibility. I would try and avoid having some styles in the side panel and others in a custom class if I can.

Flex is definitely one of the key things to get your head around heading into the future with Bootstrap.

EDIT: Interesting when I re-tried the visibility it worked, must have been one of those “things”. In my own project I would have also used the class navbar-brand for the other image and not used the visibility options.

[Stewie_Griffin]

So nice to put a voice to your pict great video!!
What if you want to do something like this?

[PeteSharp]

The answer is on the Bootstrap Docs, which is why I put that in the video

We are lucky to be the only nation with no accent

[Stewie_Griffin]

@PeteSharp

We are lucky to be the only nation with no accent

You should hear mine

Can you divide the list on you need to do two for this nav? I check on a website with this and they are using two lists one for right and another for left!

[PeteSharp]

You can use the same process I used above. Just set the logo to take up more space.

[Stewie_Griffin]

Ahh right!! Thank you

[PeteSharp]

Hey,

If you wanted to create was Stewie was suggesting you can do this with 1 extra class.

Used a class called flex-fill and changed the menu width to 100%.

[Stewie_Griffin]

What happened to your voice
Awesome video!!! Thanks a lot! Im actually doing a website like this right now

[alanwho]

Video seems to be deleted from your dropbox now

[PeteSharp]

Yes. I had a big clean out.

[alanwho]

I saw someone link to this in another post:

How to center navigation bar?

Check here

Is the video gone for good? Or it survived your clear-out in some form?

[PeteSharp]

Deleted

Actually @alanwho I realised its on my YouTube channel. Blocs 3 - Centre Menu Logo with Flex - YouTube

This is much easier to make in Blocs 4. As you can do everything in the class editor now.

[Stewie_Griffin]

Hey, Why when doing this on blocs 4 doesn’t work for me? What Im missing?

[pumpkin]

To center the navigation using flex, you’d need to set the width to use 100% of the parent element, which is the full width nav container

[PeteSharp]

@Stewie_Griffin

What Im missing?

Set the width to 100%

EDIT: Whoops sorry to repeat what @pumpkin said, for some reason I didn’t see your post? … Oh you were editing it

[pumpkin]

Yeah. I was being dumb and didn’t read the thread title before I posted

[Stewie_Griffin]

thank you so much guys, it works
Question: How can you float the menu items to the left and right border?

[PeteSharp]

Watch the flex video. Also change the flex justify setting, and set some width for the menu items.

Hint: By setting a width for the menu items, they space evenly. You can use % for this.

[Stewie_Griffin]

Thank you

[PeteSharp]

How do you mean what happened to the video?. The old one is still on YouTube.

Of course it’s dated. Blocs 4 makes it easy.