Mega Menu Width Too Wide - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Mega Menu Width Too Wide

JH

Jeff Honeyager

Helix Framework 3 years ago

Installed helix_ultimate_quickstart_j4_v2.0.11

When browser window is wider than 1180px, the mega menu drop down is displayed too wide and the left most part of the menu is not visible.

On the home page the mega menu works fine.

Where/how do I fix this?

fine: https://constitutionmarketing.com/ not fine: go to https://constitutionmarketing.com/work and mouse over "focus" or "about"

0
10 Answers
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #82251

Hi

Thanks for contacting us. Could you please give me a screenshot of your issue?

-Regards.

0
JH
Jeff Honeyager
Accepted Answer
3 years ago #82277

Go to the links provided.

Resize your browser window to different widths and see the mega menu response. Wider - it messes up. Narrow - it looks okay.

I'm sure it is a @media issue, but there are so many in the template.css I don't know what to change.

0
JH
Jeff Honeyager
Accepted Answer
3 years ago #82391
0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #82446

Use this custom CSS


.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    width: 900px;
    position: relative;
    left: 200px;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

0
JH
Jeff Honeyager
Accepted Answer
3 years ago #82449

Now it cuts off on the right hand side of the drop down mega menu...

Progress, but not quite.

What can I try?

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #82583

Did you use my CSS? Could you please give me a screenshot of it after using my CSS?

0
JH
Jeff Honeyager
Accepted Answer
3 years ago #82624

Creating screenshots of all the variations makes no senes.

PLEASE, just go to the site page:

https://constitutionmarketing.com/ Vary the width of your browser. Mouse over "Focus"

https://constitutionmarketing.com/spirit Vary the width of your browser. Mouse over "Focus"

You'll see the problem...

Thank you.

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #82726

Now check please.

0
JH
Jeff Honeyager
Accepted Answer
3 years ago #82732

It is much better - still inconsistent - drop downs either are left justified or right justified depending upon the width of the browser.

Please let me know what you did to change it; so I don't have to bother you again.

Thanks so much!

Peace & Joy, Jeff Honeyager

0
Mehtaz Afsana Borsha
Mehtaz Afsana Borsha
Accepted Answer
Support Agent 3 years ago #83083

I have used that CSS which I mentioned above in a proper path which I mentioned already above.

0