Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 28, 2014 at 6:18 pm #257199
    mrgreenwaters

    Hello,

    I want to widen then mega menu and make it look full width.

    I did find #header .avia_mega_div, and was wondering if changing this width will affect it responsively.

    #header .avia_mega_div{
    width:1000px;
    }

    I also want to put a div behind it to give it the illusion of being full width, like this site:

    http://www.sperrytopsider.com/en/home

    Thanks!

    April 28, 2014 at 6:39 pm #257226
    Devin

    Hi mrgreenwaters!

    For that depth of customization you’ll need to have the assistance of a freelance developer to make sure the changes/customization don’t effect the cross browser compatibility and responsive functionality.

    It should be doable but will take a good bit of trial and error to make sure it doesn’t cause any issues.

    Best regards,
    Devin

    April 28, 2014 at 6:54 pm #257244
    mrgreenwaters

    So it’s a fair amount of work. How would you do it? Maybe that could get me on the right path. Setup different media queries?

    Where would I put the div to appear behind the mega menu on hover?

    I would use a hook to the menu li, and put a div behind the mega menu that is 100% full width. Is this the correct direction?

    April 28, 2014 at 7:09 pm #257259
    mrgreenwaters

    I see there is also this option: Let logo and menu position adapt to browser window

    How could apply that functionality to the mega menu?

    April 29, 2014 at 7:42 pm #257826
    Devin

    I’m not really sure what the best approach would even be in this instance. The mega menu is set to be twelve units wide, which will be whatever the current twelve unit value is set to.

    You would need to experiment a bit with the container, its positioning and z-index to see what would give you the result you are looking for.

    April 30, 2014 at 10:48 pm #258556
    mrgreenwaters

    I’ve been able to solve it. I placed a div under <header> with display:none; behind the mega menu. Afterwards activated with javascript/jquery after hovering over the mega menu, it adds a class called open-mega-a by default. Then in avia.js add the javascript to .show() the div when it’s hovered, and .hide() when it’s not.

    Thanks!

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Widen Mega Menu’ is closed to new replies.