Docs

[Skiutah]

Hello,

I’m wanting to transform my current Navbar (Header Menu components) to:

1. Look more evenly distributed across the top of the site.
2. Be more responsive for various screen dimensions (i.e., utilize Flexbox functionality).

I’ve followed this introduction to flexbox as well as this one to learn the basics. I’m wanting to create something similar to the first link’s demonstration of flexbox’s third property, justify-content: space-around;

So far I’ve tried this:

.x-nav-wrap.desktop {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
}

…but nothing happens.

How can I achieve this?

Josh

[Rad]

Hi Josh,

Thanks for writing in.

Please try this one

.x-nav-wrap.desktop .x-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}

Cheers!

[Skiutah]

Thank you Rad for your reply.

My navbar menu items now stretch the width of the page/container. However, now I cannot get the menu items to center in their respective menus. Instead, they are aligned to the right.

I’ve tried the following code on just the ‘Home’ item to see how to achieve this, but to no avail:

.x-navbar .desktop .x-nav .x-menu-item-402 {
     display: flex;
     justify-content: center;
     flex: 1 1 20%;
}

How do I center the menu item text in their respective fields and keep flex functionality for them?

[Skiutah]

Bump.

[Skiutah]

Is there no support on weekends?

[Rad]

Hi there,

Please add this CSS as well,

.x-navbar .desktop .x-nav>li {
    float: none;
    width: 100%;
    text-align: center;
}

Hope this helps.

[Skiutah]

Thank you Rad for your reply.

That got it! Much appreciated.

Josh

[Thai]

If you need anything else please let us know.

[Author]

Posts