Navbar flex-direction


I need help with putting the logo above the menu links in the standard navbar. The flex-direction “column” does not do the trick and I don’t understand why.

Thank you!

I don’t sure what’s you expect, but i try figure it out. Is it correct?

Thank you for the fast reply.

Maybe I was not clear what I meant, sorry. But what I’m after is to just have my Brand Logo above the menu. So menu-link will be text as and then just the logo centered above the menu.

Turn off the Brand of the navbar component, and add a new column above it to put your brand logo in instead. Much easier than trying to manipulate the navbar. :slight_smile:

1 Like

As @jo-r said above, it is a lot easier to add the image outside of the nav.

The example below has two images, one outside the nav, for desktops, and another in the navbar brand for mobile, just hide/show them using media query

When you say ABOVE, you mean like the following?

If so, put a row in above the navbar row, THEN a column inside that row. You can’t have a column without its parent row.

You don’t need a column, if you look at my example I have put the logo and nav in a header with a class of text-center.

Yeah totally true. I haven’t had my coffee yet, and I just fixated on his use of a column first.

As always, there’s a million ways to skin a cat. :smiley:

1 Like

Thank you for the help!