Menus - Pro - Headers

I made the navigation menu of my website in the PRO version, in Headers, but:

  • (1) It does not work in all browsers! Internet explorer, for example.
  • (2) The element “Cart Dropdown” does not work correctly in my menu. If you click on Edge or Chrome browser on a small screen you do not see the products that are on the strip, you see a litle section, it is not within the graphical view of the screen. How can I solve it?
  • (3) How to activate the “Mega Menu” function to this menu made in PRO, in Headers.
    My URL is http://midentistry.es/. Thank you!

Hi there,

Thanks for writing in.

  1. What do you mean by it’s not working in IE, the only difference that I could see is the logo size other than 2 and 3.

  2. I checked in the mobile device and the cart drop-down is properly aligned. Are you perhaps testing it on the desktop instead of the actual mobile? If you just wish to make the dropdown full-width then you may add this CSS to your global custom CSS.

@media ( max-width: 767px ) {
.hm14 .x-dropdown {
    width: 100vh;
    right: -11.6vh;
}
}

The dropdown width is standard to around 340px, it’s made intentionally that way due to flex styling.

And for IE fix, please add this as well

.hm14 .x-dropdown {
    left: auto;
    right: 0;
}
  1. You can’t add mega menu yet, it is only applicable for X standard navbar for now. But you may also use Ubermenu in Pro (by adding shortcode to the text element).

Thanks!

Hello @Rad
Thanks for your response.
In internet explorer it looks like in this image. I worry that in other browsers the same thing happens.

-The dropdown of the cart looks like this in Chrome and Edge.

Thanks for your help

Hi there,

In the flex options of the header builder please kindly avoid using the AUTO option of the Flex property. Kindly use 100% instead and try to adjust the other parts as the Internet Explorer has problems rendering the flex properties with AUTO value.

Thank you.

Hello Staff,
I change the AUTO value for 100%, but I have the a big problem with the header:

IE:

Edge:

What can I do to solve it?

Thanks

Hi there,

Looks okay on my Edge browser, it’s the same in my chrome. Though, what I’m getting in your IE is

500: Internal Error
This website is unavailable at the moment

I’ve been waiting and still the same, I’ll just check it again later.

Thanks.

Please @Rad , try again.
Thanks

Hi There,

Unfortunately, it is still not loading. See this: https://screencast-o-matic.com/watch/cbQOIAIuOZ

Hello, please excuse me for this. I think I have solved it.
Thanks

No worries. Have a nice day! :slight_smile:

Hello @Lely,
I still have the error, worse I solved the error 500. I already load my web. Could you help me correct my menu?
Thank you

Hi,

I would like to check but currently your site shows up blank.

To see the error, try to set wp debug to true.

Edit your wp-config.php file located at the root directory of your site and set wpdebug to true.

define('WP_DEBUG', true);

Please let us know how it goes.

Thanks

Hello @paul.r
I solved the error, please try again. I would like to see the menu work perfectly in all browsers.
Thank you!

Hi there,

It’s accessible now, the issue in IE is because of this CSS.

.hm13.x-menu {
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-self: stretch;
    align-self: stretch;
    -webkit-flex: 0 1 100%;
    flex: 0 1 100%;
    margin: 0px;
    font-size: 0.95em;
}

It’s the flex setting of the menu itself (not bar or container). It should be set to AUTO instead of 100%. I’m not sure if this is related to the previous recommendation but would you mind providing your login credentials in a secure note? I’ll directly test it instead of using browser tool. Through developer console, I changed it to AUTO and it works on Edge, IE, and Chrome.

Thanks.

Thank you @Rad I send you in secure note the credentials.

Hi,

Thank you for providing your login.

I went ahead and set flex to auto.

I check on IE and it fixed the issue.

Kindly check in your end.

Thanks