Cloudbase 3, template, justify navigation menu

Question

I need to justify the navigation menu bar in the Cloudbase 3 template, so it spans the whole article width. Currently the menu is floating to the right and it ends somewhere in the middle of the article (depending on how many menu items are in there), it needs to be same width as the white space of the article bellow.

I'm new to Joomla so these things are also new for me, with is why I dont exactly know how to deal with it.

Answer 1

You can justify the menu by using Flexboxes. This is a CSS3 property, and browser support is still not excellent, but most modern browsers will handle it well.

Add the following CSS code to your site:

.gf-menu {
    display: flex;
    justify-content: space-around;
}
.gf-menu li {
    width: 100%; /* Remove white space between menu items */
}
/* Center text inside each menu item */
.gf-menu .item {
    text-align: center!important;
    padding: 0;
}

This should give you something to start with, you might have to adjust the CSS a little to get it to look like you want it to.

Hope this helps.

(Answer based on this question from SE)

In case you would like to center the menu instead of justifying it, try with this CSS code:

ul.gf-menu.l1 {
    text-align: center;
}
.gf-menu li {
    display: inline-block;
    float: initial;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}