Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • July 13, 2017 at 5:10 am #820319
    matt

    Hey guys

    I’m working on a site at the moment and the mega menu moves off the screen. I have disabled the theme and just gone back to the standard enfold theme and even then it still does it. I’ve linked to the website below but hover over “Brands” and you’ll see that it goes off to the right.

    Note that I have centred the menu items by making them display: inline-block and float: none but even if you disable these attributes it still happens. Like I said above it also happens if I just run the base enfold theme and set the menu to be below the logo. You can test it on a blank enfold theme by adding quite a few menu items and then setting one of the last ones to have a mega menu with three columns.

    Cheers

    July 13, 2017 at 12:25 pm #820491
    Rikard

    Hey twitchdevelopment,

    Thanks for the link, though there’s a login prompt (.htaccess) before being able to view your site. Could you post login details in private please?

    Best regards,
    Rikard

    July 14, 2017 at 4:34 am #820926
    matt

    Argh, sorry, it’s our hosting provider. They’ve got the strictest security! Details below.

    • This reply was modified 6 years, 10 months ago by matt.
    July 14, 2017 at 10:25 am #821082
    Rikard

    Hi,

    Thanks for that, though it seems like we have to log into WordPress as well? Please post login details for that as well.

    Best regards,
    Rikard

    July 14, 2017 at 9:07 pm #821426
    matt

    Sorry Rikard, details below

    July 15, 2017 at 5:45 am #821560
    Rikard

    Hi,

    Thanks I got in now. I can see your problem, did you make any changes to the theme at all? First off, could you try updating the theme to the latest version (4.1.1) to see if that helps please? http://kriesi.at/documentation/enfold/updating-your-theme-files/

    Best regards,
    Rikard

    July 17, 2017 at 12:24 am #822242
    matt

    Hey Rikard

    Just updated to the latest version locally but I haven’t done it on the dev site yet as I notice there’s been a few changes which has broken my child theme so I’ll have to deal with those before uploading.

    In the meantime I just tried this with a blank version of Enfold, the latest version and I still get the same issue: http://prntscr.com/fwhop8

    Cheers

    July 17, 2017 at 4:02 pm #822710
    Victoria

    Hi twitchdevelopment,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#menu-item-31856 .avia_mega_div.avia_mega3.nine.units {
  left: -700px !important;
}

#menu-item-31794 .avia_mega_div.avia_mega2.six.units {
  left: -230px !important;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    July 17, 2017 at 11:05 pm #822991
    matt

    Hey Victoria

    I did think about forcing it over with CSS but it seems like a bit of a hack and not really a solution to the original problem. I would expect the Javascript to correctly place the menu in the right place. It’s already running to place it relative to the menu item but clearly isn’t working properly.

    For the meantime I can do that, but I would appreciate if this was addressed properly.

    Cheers

    July 19, 2017 at 3:52 pm #824040
    Victoria

    Hi twitchdevelopment,

    The menu here does not go off screen. There could be something in your css or plugins that pushed the menu or does not allow correct calculations, could very well be a plugin conflict. Did you try disabling all the plugins?

    Blog

    Best regards,
    Victoria

    July 19, 2017 at 9:36 pm #824172
    matt

    Hi Victoria
    That screenshot you sent is clearly not the same as the example I gave. See the screenshot below, this was done with the latest copy of enfold on the latest version of WordPress on a clean install. There are no plugins activated or anything. I simply went into the Enfold settings > Header > Logo and Menu Position and set it to “Logo left, Menu below”. Then, to simulate our websites menu structure I added lots of menu items. Our website has about 9 menu items with long titles that extends almost the full width of the site. Each one of those menu items has a dropdown menu with three columns. It’s a large eCommerce store which is why they have so many different menu items and categories.

    Here is the front-end: https://prnt.sc/fxri3g
    And the menu structure: http://prntscr.com/fxriqp

    There seems to be an issue with the script that calculates the position of the menu relative to the site body. If I leave the header settings to “Logo Left, Menu Right” it actually does work, although it overlaps the logo. This is normally something I would fix up in the CSS myself: http://prntscr.com/fxrjhf but notice that the dropdown menu doesn’t break out of the site width. The issue seems to happen on any setting where the menu is not inline with the logo.

    Cheers.

    July 25, 2017 at 4:27 am #829336
    Ismael

    Hi,

    Thank you for the update. We also need the htaccess authentication details to be able to access the site. Please add it in the private field.

    Best regards,
    Ismael

    July 25, 2017 at 4:29 am #829338
    matt

    Hi Ismael

    The htaccess authentication details are above, please see this reply: https://kriesi.at/support/topic/mega-menu-going-off-page/#post-820926

    Also note the lowercase as mentioned in this reply: https://kriesi.at/support/topic/mega-menu-going-off-page/#post-821082

    I’ll update the original.

    Cheers

    July 29, 2017 at 9:19 am #831408
    Victoria

    Hi twitchdevelopment,

    A breaking menu to a new line is just not going to help you. It will confuse your customers even more. A top level menu that has so many men items is just bad information design.

    On the screenshots, besides the page we need to see the console. There might be some errors there.
    Could you describe n more detail the setup you have on you test environment.

    Here are some articles for you to consider:

    Website Navigation: 7 Best Practices, Design Tips and Warnings

    Best regards,
    Victoria

    July 30, 2017 at 9:58 pm #831910
    matt

    Hi Victoria

    Whether it’s bad design or not is a) debatable and b) irrelevant and beside the point.

    I don’t mean to sound cross but I have given you multiple details regarding the demo setup, I don’t know how I can be any clearer! I have also provided login details to the current website so you can use those to log in and see the issue. It’s not some tricky customisation that I’ve set up and I have given you lots of information about the menu structure and the theme setup. But to clarify, yet again:

    1. Create a new enfold Demo
    2. Go to the theme settings and in the header tab change the “Menu and Logo Position” to “Logo left, Menu below”.
    3. Create a new menu via Appearance > Menus, make this the main menu
    4. Make sure the menu structure matches this screenshot: https://prnt.sc/fxriqp
    5. Go to the front-end and hover over the last menu item, you will see it move off screen

    If you still argue that the long menu is bad practice, then what about if I have one mega menu item and set that to float right, instead of float left.

    1. Create a new Enfold demo
    2. Go to the theme settings and in the header tab change the “Menu and Logo Position” to “Logo right, Menu below”.
    3. Create a new menu via Appearance > Menus, make this the main menu
    4. Create one menu item, make sure the “mega menu” box is ticked
    5. Create three columns below that
    6. In the custom css box please add .av-main-nav li.menu-item-top-level { float: right !important; }
    7. Go to the front-end, hover over the menu items and you will see the mega menu break

    I understand that this could be considered “custom” work which is breaking the menu but I don’t think this is too much to ask really, do you?

    There are no errors in the console, I have checked and would have posted them had there been any.

    The issue looks like it’s in avia.js line 1124. The js checks if the right side of the div is greater than the width of the parent container. If it is then it sets the left position to be width of the mega menu less the left position of the menu item. This doesn’t make a lot of sense, and above it on line 1113 we see the correct calculation applied to menu items that aren’t left aligned. Please review line 1124 as it doesn’t check whether the new calculation pushes the mega menu off the screen or not.

    Thank you.

    August 2, 2017 at 7:51 am #833241
    Ismael

    Hi,

    I’m sorry that I didn’t notice the htaccess details. It’s a bit obscure. Anyway, for now, please use @victoria’s suggestion (#822710). Yes, it is a bit of a “hack” but it is also a working solution. Or edit the js > avia.js file, look for the code around line 1124:

    megaDiv.css({left: (megaDiv.width() - pos.left) * -1 });

    Replace it with:

    megaDiv.css({left: (megaDiv.width() - pos.left / 2) * -1 });

    Remove browser cache or hard refresh before checking the page to refresh the script.

    Best regards,
    Ismael

    August 3, 2017 at 12:10 am #833708
    matt

    Hey Ismael

    Is this going to be fixed on the next release of Enfold? I can edit the JS file but as I’m sure you’re aware overwriting core files isn’t really best practice as when we update Enfold it’ll overwrite it again.

    Cheers

    August 4, 2017 at 4:48 am #834138
    Ismael

    Hi,

    We’ll report the issue to Kriesi but I don’t think that he will add it immediately. For now, please use @victoria’s suggestion or edit the js file. Or consider redesigning the menu layout.

    Best regards,
    Ismael

    August 4, 2017 at 6:42 am #834178
    matt

    OK, thanks Ismael.

    August 5, 2017 at 5:46 am #834577
    Ismael

    Hi,

    Thank you for your understanding. Please open a new thread if you need anything else.

    Best regards,
    Ismael

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