Public Forums 71,145 posts

[bit stupid Friend bit stupidJoin date: September 2012Posts: 21Downloads:0Uploads:2 Thanks: 3 Thanked: 4 times in 1 posts]

#181142

Hi

I am looking to tackle an issue I seem to always notice with JA T3 based sites, demo’s live sites and my own.

On the main menu bar (like in mine on the attachment, I can never get the menu items to fit the actual size of the menu bar. Is it possible to do something like the spotlight positions where I can have 1,2,3 or 4 of them but they always size themselves to the full width of the mainbody?

Hope that makes sense. If not then look at the demo site http://demo.t3.joomlart.com/joomla15/ the menu items take up about 75% of the space of the menu (the bit between the top and bottom border).

Ok I am starting to make even less sense! Hope someone can help by any means necessary

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#468894

Love the user name! :p

You can hack the javascript for the menü or you can do a quick and dirty with the css.

When the menü is finished – you have all the menü items you want at the top level, you can add some code to your template.css right at the end of the file. (Depends on the template maybe)

Let’s say you have 7 items, so 100% of the menü divided by 7 is roughly 14. Add the whole code.

.ja-megamenu ul.level0 li.mega {

• min-width: 14%;

}

Adjust as necessary!

Hope it works for you.

[bit stupid Friend bit stupidJoin date: September 2012Posts: 21Downloads:0Uploads:2 Thanks: 3 Thanked: 4 times in 1 posts]

#468953

Thanks Swissa

Worked a Charm. Just a couple of pointers for anyone else reading this. For me on the t3 blank template the code went into the Mega.css file. Again in my instance I had created my own custom theme (user-theme) so I did the code in there and it worked perfect.

Last thing to note is that for me I had 6 tabs, = 16.6666666% width desired, tried at 16.6% and it went over the possible length of the menu bar?! 😮 With a little research I remembered that if you have a border between your menu tabs you also need to account for this so with a little trial and error came up with the right figure to get it working:). Then I came out of Firefox and into chrome and IE only to find that there was still a little extra space at the end after my last border bar that is annoying me (and probably noone else in the world).

So I tried the following code in the same file to try to remove the first and last border bars but it does not seem to have any effect. Anyone any clues on this?

.ja-megamenu ul.level0 li.item-101 {border-left: none !important;}

.ja-megamenu ul.level0 li.item-132 {border-right: none !important;}

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#468958

Untested but try adding the following code to the mega.css

.ja-megamenu ul.level0 li.mega .left {border-left: none !important;
}

.ja-megamenu ul.level0 li.mega .right {
border-right: none !important;
}


and use suffix in menü for 1st item ” left” and last item ” right” in Parameters (JA Extended) – additional class

note the leading space in the suffix.

See if it works!

[Author]

Posts