horizontal div menu - navpills fix

[shoulders]

I am using Joomla 3.5.1 and wanted a horizontal div menu for the footer and I discovered bootstrap has one inbuilt.

If you add " nav-pills" (notice the space at the beginning) to the module "Menu Class Suffix" you get the following effect

As you can see there is a border around the menu, bottom border on the menu items and the sitemap menu item is out of line. This is caused because the styling for the menu is for a horizontal menu. I have corrected this issue using the code below.

/*-- Horizontal DIV menu --*/

/* removes the vertical seperators */
.moduletable .nav.menu.nav-pills {
    padding-bottom: 0;  
    /* border: 1px solid #e0e0e5; - white border */
    border: none;
}

/* Corrects Spacing */
.moduletable .nav.menu.nav-pills li {
    margin-bottom: 0;
    margin-right: 0.625rem;
    border-bottom: none;
}

I think this is a bug, but perhaps could just be a point of view on the styling.

thanks

[mahagr]

I don't think this is a bug, and here's why:

In Gantry we decided against locking ourselves into a single version of a single CSS framework, which would have been Bootstrap 2 because of Joomla. Because of this we created very lightweight grid system called Nucleus. Everything inside Gantry 5 package is using Nucleus.

But Joomla uses Bootstrap 2. Basically what we do is to load a customized version of Bootstrap, which gets properly initialized only inside .platform-content. This is because of Bootstrap 2 uses some old CSS rules in its layout which have been later removed/replaced in Bootstrap 3, Nucleus and in fact in almost every newer CSS framework out there. Having these rules affecting Nucleus would break it.

The issue you are seeing comes from the fact that you can only use Bootstrap 2 inside .platform-content`. Well, it works mostly, but it does have a few layout related issues.

[mahagr]

Umm, I forgot to ask if the issue is inside a Joomla module (excluding particles)? If so, its indeed a bug.

[shoulders]

I created a menu in joomla using a joomla menu module published to a footer position i created in gantry. I added a Menu Class Suffix of " nav-pills" to change the menu into a div menu using the in-built bootstrap CSS. I then used my CSS to fix the styling issues.

[mahagr]

Then it sounds like a CSS issue for me.

[hexplor]

I believe this is fixed as i reproduced all steps described above and here's what i'm getting:

//Edit Actually in another section i see the issue. Fixing.