Centered submenus

Hi,

I added following code to bottom of Quick CSS field

.main_menu .menu li#menu-item-2120 ul { 
transform: translate(-18%);
}
.main_menu .menu li#menu-item-2127 ul {
    transform: translate(-23%);
}
.main_menu .menu li#menu-item-2098 ul { 
transform: translate(-21%);
}

Please review your website :)

Best regards,
Yigit

Hi,

The sub menu looks exactly like the screenshot now, so we are not really sure which element you’re trying to center here.

You should be able to center align an element relative to the parent container using the transform property.

.parent{
  position: relative;
}
.child{
  position: relative;
  left: 50%;
  transform: translateY(-50%);
}

Best regards,
Ismael

Hi,

You can use following code to adjust their position on smaller screens

@media only screen and (max-width: 1080px) {
.main_menu .menu li#menu-item-2120 ul { 
transform: translate(-18%);
}
.main_menu .menu li#menu-item-2127 ul {
    transform: translate(-23%);
}
.main_menu .menu li#menu-item-2098 ul { 
transform: translate(-21%);
}}

Best regards,
Yigit

Hi,
Sorry for the late reply, unfortunately, this is not possible. Each sub-menu is a child of a main menu item and it’s left edge is position zero for that tree of elements, but that position is different for each menu item. When you center the sub-menu it is within its tree, not the page, to place all of the sub-menus in the same location the calculations will need to be done on the screen size instead of the parent location.
I hope I have explained this well, from your video it looks like you are using a laptop sized screen, on my desktop the sub-menus move much more, so perhaps they looked like they are very close to being superimposed.
I tried to write a script to move the sub-menus based on the screen size in order to find a fixed location, and while it works for the most part, its limitations are that after the sub-menus are moved its hard to move your mouse from the main menu into the sub-menu without losing focus on a desktop, and it’s based on screen size.

I’ll post the script here, perhaps it can be used for something else.

function bad_custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function() {
jQuery.fn.center = function () {
    this.css("position","fixed");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 3) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 6) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}
$('.menu-item-top-level.dropdown_ul_available ul.sub-menu').center();
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'bad_custom_script');

I tried to think of some other ways such as if the sub-menus were actually a moral, or lightbox, but I think you would have the same issues with the mouse unless it was triggered by click instead of hover.
Sorry, but I believe the best solution is @Yigit’s css.

@media only screen and (max-width: 1080px) {
.main_menu .menu li#menu-item-2120 ul { 
left: -520px;
}
.main_menu .menu li#menu-item-2127 ul {
    transform: translate(13%);
}
.main_menu .menu li#menu-item-2098 ul { 
transform: translate(-21%);
}}

Best regards,
Mike

Hi,
We are happy to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike