Joomla Templates Club 406,261 posts

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

#185225

I have a slightly customized main menu on the MixMaz template, which looks great on the desktop, but isn’t quite right on the mobile drop-down layout.

I have a background “button” graphic on each menu item, and when displayed in the drop-down on mobile devices, the button graphics just don’t look right. I’d like to just remove the background from the mobile navigation, but keep them on the desktop.

I’d also like to make the font larger on the mobile drop-down menu, to make it easier to read. But I can’t seem to find the CSS rules that the mobile menu is reading. I tried making changes to layout-mobile.css, but had no success with getting the navigation box to display the way I want it to.

Any ideas?

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

#484432

Hello synapsis,

Would you mind getting me a few screenshots for more clarifications? Then I shall know what you are trying to achieve. Right now, I am quite not sure where to start.

Regards.

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

#484809

Sure Stork, no problem.

As I was saying, the desktop (full-width) menu looks pretty good with my colorful button backgrounds. The problem occurs when the user is on a tablet or phone and the button backgrounds get pulled into the ja-menu-button pop-out menu. On those menus (mobile and tablet), I’d like the backgrounds NOT to be visible behind the text — and for the text to be much larger in the pop-out, so it’s more legible on small screens.

But I’m having trouble figuring out how to accomplish that. Please see the attachment for the ja-menu-button pop-out menu as I’m seeing it (with the partial button background images).

While I have your attention, I do also have one small issue with my desktop mega menu, which according to Firebug, apparently is being caused by the “has-children” spacer that is moving the text part of the button over a specific amount from the left border of the button, causing the text part of the button not appear centered. Some are more obvious than others, depending on the length of the link’s text (ie: News vs. Resources). What I’d LIKE is for them to be visually centered regardless of their length inside their button block.

None of the menus will have children, so the has-children part of the menu can be removed if that helps, but I can’t find it to get rid of it. I’m hoping someone can help me with that.

I hope that makes sense.

---

Attachments:

1. 
2. 

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

#484816

Well, I’ve made a little progress… but it’s still nowhere close to what I’m trying for. I just can’t get rid of the button backgrounds (so for now I’ve increased the size of each menu option to at least show the whole button image). Ultimately, I’d like to get rid of the background images, center the text in their button blocks, and put two buttons per row, centered, with a larger font (perhaps 1.25em or even 1.5em).

If you look at what I’ve gotten so far with the mobile layout, you’ll see something like this:

The big gap at the top under Navigation and the first button is actually a Home button that is hidden (because on the desktop version, there wasn’t enough space for it, and it just overlaps the logo invisibly (yeah, I know, terrible tactic, but it works for now).

Unfortunately, because it’s invisible on the desktop layout, it’s also invisible on the mobile and template layouts. Any idea how to resolve that? It would be good for it to show here.

What a challenge this has been… Ugh.

Matt

---

Attachments:

1. 

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

#484969

Hello Matt,

You can modify height of menu item in “/templates/ja_mixmaz/css/layout-mobile.css”, line “div.ja-megamenu ul.level0 li.mega” (line 679)

Regards.

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

#485056

Thanks for your assistance, @stork11. But the size of the menu items aren’t really my problem. You’ll see in my previous post, I got that figured out.

What I am still struggling with is getting rid of the background images applied to the menu items on the mobile and template layouts. As I stated, I want the button background images to appear on the desktop version of the menu, but not the mobile or tablet.

That’s what I really can’t sort out… adding background: none; to the menu item ul’s and li’s does nothing to remove it. Even with an !important attribute. Nothing. It just won’t go away.

Please look at this again? Thank you.

Matt

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

#486183

Bump.

Also, I’m strangely now unable to get the Home menu item to appear at all. It’s published, cache cleared, but only a blank space appears. But in the Joomla menu settings, it’s been given a background image just like the other menu items… yet, it just won’t appear. Anyone have a clue as to what I’m doing wrong? I’ve looked at all of the relevant CSS and PHP… at least I think so!

I’m surely overlooking something minor and stupid, but I’ve methodically gone over the menu settings and I just can’t figure out what it is.

Some help would be greatly appreciated.

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

#486266

Hello Matt,

Please try to add below code into “/templates/ja_mixmaz/css/layout-mobile.css” file:

.ja-megamenu ul.level0 li.mega .has-image {
background-image: none !important;
}

Regards.

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

#486283

Okay… not sure why, but when I deleted and re-created the home menu button, it would now appear. Very strange, but it’s working. So that part is now solved.

The last remaining issue is sorting out why the menu item TEXT isn’t centered on the menu item BACKGROUND. It’s as if the <li> is indenting them all a specific amount, and then they’re centered within that smaller space, with that indented margin on the left throwing everything off. Anyone have a clue as to where that indentation is coming from?

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

#486469

I saw that menu text was centered on the “li” tag. Did you resolve the problem?

[Author]

Posts