Public Forums 71,145 posts

[billrust Friend billrustJoin date: March 2011Posts: 121Downloads:35Uploads:13 Thanks: 15 Thanked: 3 times in 1 posts]

#192766

I am trying to get my mega menu item links to align properly, and having a horrible time getting them to look and act like I need them to.

http://hunt.bwpcommunications.com/

In this main menu, I need the menu item to be equally spaced from left to right. The menu links all have a hover class as well, so that has to match also.

The biggest issue I have is, if I make them any wider, the menu wraps to a 2nd line in Chrome and Safari.

I am attaching an image with what the spacing needs to be for the menu items for better clarification. You will notice the spacing to the left and right of the first and last menu item, this is what I am trying to achieve, in Chrome, Safari, IE, and Firefox. I will probably need to remove some existing styling that I have messed with and start over?

Thanks all,
Bill

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#514478

You may have tried this already, but here is what I just tried . . .

Within file path –> /plugins/system/jat3/jat3/base-themes/default/css/menu/mega.css
at line 30, add a }padding-left” property – for example . . .


.ja-megamenu ul.level0 {
margin: 0;
padding-left: 10px;
}

It may be that you need to create some CONDITIONAL CSS CLASSES to get it just right across all browswers.

Here are some additional resources concerning working with conditional CSS classes . . .

http://www.conditional-css.com/usage

http://www.mindfiresolutions.com/Using-Conditional-Statement-in-CSS-Statement-or-Block-For-Cross-Browser-Compatibility-49.php

Hope That Helps

😎

[billrust Friend billrustJoin date: March 2011Posts: 121Downloads:35Uploads:13 Thanks: 15 Thanked: 3 times in 1 posts]

#514492

<em>@TomC 400751 wrote:</em><blockquote>You may have tried this already, but here is what I just tried . . .

Within file path –> /plugins/system/jat3/jat3/base-themes/default/css/menu/mega.css
at line 30, add a }padding-left” property – for example . . .


.ja-megamenu ul.level0 {
margin: 0;
padding-left: 10px;
}

It may be that you need to create some CONDITIONAL CSS CLASSES to get it just right across all browswers.

Here are some additional resources concerning working with conditional CSS classes . . .

http://www.conditional-css.com/usage

http://www.mindfiresolutions.com/Using-Conditional-Statement-in-CSS-Statement-or-Block-For-Cross-Browser-Compatibility-49.php

Hope That Helps

:cool:</blockquote>

<em>@TomC 400751 wrote:</em><blockquote>You may have tried this already, but here is what I just tried . . .

Within file path –> /plugins/system/jat3/jat3/base-themes/default/css/menu/mega.css
at line 30, add a }padding-left” property – for example . . .


.ja-megamenu ul.level0 {
margin: 0;
padding-left: 10px;
}

It may be that you need to create some CONDITIONAL CSS CLASSES to get it just right across all browswers.

Here are some additional resources concerning working with conditional CSS classes . . .

http://www.conditional-css.com/usage

http://www.mindfiresolutions.com/Using-Conditional-Statement-in-CSS-Statement-or-Block-For-Cross-Browser-Compatibility-49.php

Hope That Helps

:cool:</blockquote>

Gave first suggestion a shot, but I can only get to 4px before it wraps. Looks good in Chrome and Safari, but FF and IE it’s still not far enough over to the right. I just don’t understand what’s pushing it down like that in Chrome/Safari, doesn’t make sense to me with existing code in place.

Bill

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#514493

<em>@billrust 400766 wrote:</em><blockquote>Gave first suggestion a shot, but I can only get to 4px before it wraps. Looks good in Chrome and Safari, but FF and IE it’s still not far enough over to the right. I just don’t understand what’s pushing it down like that in Chrome/Safari, doesn’t make sense to me with existing code in place.

Bill</blockquote>

That’s strange – because I tested the modification I made in Firefox

[billrust Friend billrustJoin date: March 2011Posts: 121Downloads:35Uploads:13 Thanks: 15 Thanked: 3 times in 1 posts]

#514494

<em>@TomC 400767 wrote:</em><blockquote>That’s strange – because I tested the modification I made in Firefox</blockquote>

See attached image. There is still way too much space on the right of the Contact Us menu item.

In Chrome it’s perfect, but in FF there is still a spacing issue. Then hover over that menu item, the grey hover action is about 30px off from the right edge of the menu.

If you compare the first image I posted with the second, the spacing to the right of Contact Us is still way off.

Bill

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#514495

I’m thinking it will take a few conditional css indicators (as I referenced above) and a little trial and error to get it just right for each respective browser.

The problem is, each browser interprets/translates the CSS just slightly different than the next.
Don’t ask me why … I know it can be an annoying nuance. (of course, IE is notoriously the worst of the bunch)

[Author]

Posts