Submenu at wrong offset

Support
#1

Hi APEX

On http://brainfire.ch.kosmos.ch-meta.net/ the submenu for smaller screen sizes is displaying wrong (it’s too high, so you cannot click to top 3 menupoints on laptops).

How can I manage that it is showing up like on the big screens or ever displaying 50% up / 50% down from the hover starting point?

Thanks for help, Patric

#2

Hi There @Brainfire

Thanks for writing in! Could you please try adding the following media query into your X -> Theme Options -> CSS area and see if that helps.

@media(min-width:768px) and (max-width:1024px){
  .e1159-11.x-menu > li > .x-anchor .x-anchor-content {
    padding: 0.125em;
  }
}

Thanks!

#3

Many Many thanks Mldarshana

#4

You are most welcome. :slight_smile:

#5

Hi there, I just tested this CSS-Hack but nothing helped my problem, it’s still to high (laptop) or too low to click several Menupoints):
On http://brainfire.ch.kosmos.ch-meta.net/ the submenu for smaller screen sizes is displaying wrong (it’s too high, so you cannot click to top 3 menupoints on laptops).

How can I manage that it is showing up like on the big screens or ever displaying 50% up / 50% down from the hover starting point?

Thanks for help, Patric

#6

I now have minimized the padding of the menu/submenu from 0.5 em to 0.35 ems but it is still critical and I would be glad if the submenu would be centered in heigth from the hover point.
Is there a solution for that?
Thanks for help. Patric

#7

Hey Patric,

We’re sorry for the confusion. First off, please stay away from using the generated classes like e1159-11. It is for the builder’s use only and it will change if you’re going to rearranged the elements. I’ll remind @mldarshana about this.

You should apply a custom class to the element itself or at least the element’s parent. In your case, you will need to apply it to the menu item. You can do that by following this guide.

If you followed that class in my screenshot, the code you’ll need to add in your Header CSS is this:

.mid .x-dropdown {
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
}

If instructions are followed correctly, your submenu will be positioned in the center like this.

Just note that it will remained position in the middle of its parent menu.

Hope that helps.

#8

Thank you Christian, that worked genius!!!

#9

You’re most welcome.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.