Joomla Templates Club 406,261 posts

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#181785

I want to add a graphical button background to the 1st level menu items in my JA Mixmaz site’s mainmenu (mega menu). I’ve already figured out how I might add a background to the container that holds the buttons, and then line those buttons up with that background, BUT doing so breaks the mobile navigation, and really isn’t the best way for other reasons as well.

So what I need to do is apply a background graphic to each menu item’s block on the first level of the mega menu. I want each menu item to have a different colored button. That’s where things get a bit more complicated, because each menu item will have to have a unique identifier so I can assign a different graphic to it.

ANY help I can get with this would be greatly appreciated. Thank you.

Matt

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#471421

Well, after trying all sorts of CSS options, I’ve settled on just applying a Link Item image through the menu manager. It allows me to easily add a background image that works.

However, doing this also moves the menu text to the right, so they’re no longer centered on my new buttons. Can anyone please tell me where the CSS is located to modify the positioning/padding/margins/etc of the Link Image under Link Type Options on the Menu Manager?

Thank you for your help.

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#471425

By the way, I did already try to use the Link CSS Style option in the same Link Type Options menu… no joy. I entered a new style name called “mainnav_shift” and then tried adding that class to several related stylesheets (mega.css, template.css, jat3/base-themes/default/css/menu/mega.css — none of them did anything to my menu text’s position.

So either I’m using it wrong, or the Link CSS Style is broken on JA Mixmaz?

I’d really appreciate some help.

[Stork11 Friend Stork11Join date: March 2011Posts: 2273Downloads:0Uploads:142 Thanks: 55 Thanked: 431 times in 393 posts]

#471429

Hello synapsis,

Did you clean your site cache before checking front-end? You must clean the cache to see your changes.

Regards.

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#471598

I have the site in Development mode, so there shouldn’t be any caching there. I’ve cleared the T3 cache before testing, and I’ve also cleared my browser’s cache and looked at the page in other browsers (fresh). So no, it’s not a caching issue.

Can no one point out where the menu image css is located? I’d much rather change the offending css, than throw in negative margins to adjust for them after the fact.

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#471609

This is getting VERY frustrating. I thought I’d finally located the CSS responsible for the indent here:

/plugins/system/jat3/jat3/base-themes/default/css/menu/mega.css

.ja-megamenu ul.level0 li.mega .has-image {
padding-left: 25px;
display: block;
background-repeat: no-repeat;
background-position: left top;
cursor: pointer;

But when I comment that line out, nothing changes! I’ve cleared caches. But nothing changes.

Can I please get an admin to check into this for me?

[synapsis Friend synapsisJoin date: April 2007Posts: 234Downloads:18Uploads:28 Thanks: 58 Thanked: 19 times in 1 posts]

#471610

Okay, commenting that line out didn’t do anything, but changing the 25 to a 0 did. Problem solved. NOW I can enjoy my Halloween.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#471611

Are you sure this isn’t being overridden by the theme in use on the site? I don’t use templates, rather – I just use the T3 framework, create a theme and style according to my design, however, when I do, I create override css files for the template and the megamenu, which live inside the theme file. So anything happening in there is going to naturally override anything in the file you pathed to in your example.

Do you have a link to the live site?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Author]

Posts