Docs

[mserougi]

Hello,

I’m trying to style the header menu submenu About submenu only on desktop browsers when they enter responsive mode. Currently it looks good in all cases, non-responsive desktop, responsive mobile, but the responsive desktop About submenu is messed up:

https://www.dropbox.com/s/x4npukm1mde9b3g/Screenshot%202016-06-22%2020.21.45.png?dl=0

I want the submenu to list all its four items horizontally, in a single row, with the close button as is. Is there a way to do that only for the desktop responsive version of the menu?

Please advise. I’ll include the site URL in a second message.

[mserougi]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

@media screen and (max-width: 1120px) {
    .ubermenu-submenu-id-8443 li {
        min-width: 25% !important;
        clear: none !important;
    } 
}

Hope this helps.

[mserougi]

That helped, thank you.

However, the Close button highlights the entire submenu now: https://www.dropbox.com/s/6wkd39slp3soo3h/Screenshot%202016-06-23%2002.31.39.png?dl=0

Also, is it possible to align the Close button to the far right of the submenu, next to the last item (Jobs), so that all items including the Close button are in a single row?

[Lely]

Hi There,

You’re welcome!
Please try this CSS:

@media screen and (max-width: 1120px) {
.ubermenu-submenu-id-8443 li.ubermenu-retractor.ubermenu-retractor-mobile {
    float: right;
    padding: 15px;
    min-width: initial !important;
    margin-top: -50px;
    clear: both !important;
    position: relative;
    z-index: 999;
}
}

Hope this helps.

[mserougi]

Well that pushed the Close button to the far right but it wasn’t vertically center aligned, so I changed it to be at the bottom:

https://www.dropbox.com/s/o9645u0hg12ilc2/Screenshot%202016-06-23%2012.08.47.png?dl=0

@media screen and (max-width: 1120px) {
    .ubermenu-submenu-id-8443 li {
        min-width: 25% !important;
        clear: none !important;
    } 
}

@media screen and (max-width: 1120px) {
.ubermenu-submenu-id-8443 li.ubermenu-retractor.ubermenu-retractor-mobile {
    min-width: initial !important;
    margin-top: -50px;
    clear: both !important;
    position: relative;
    z-index: 999;
}
}

My last problem here is that the above CSS affects the mobile responsive menu too, and I would like the mobile responsive menu to remain as it was from before, one row per submenu item:

https://www.dropbox.com/s/o9hp8dp1uqqd5rk/Screenshot%202016-06-23%2012.16.09.png?dl=0

[Christian]

Please try changing your media query from max-width: 1120px to

@media screen and (min-width: 768px) and (max-width: 1120px)

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[mserougi]

Well that did the trick. Thank you!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts