Sub menu formatting

Support
#1

Why when the site is in a viewing size of 980px to 1199px does the submenu get cutoff?

CSS added to make the second tier child pages menu display on the right of the main child tier. It was displaying completely off the page when viewing at the sizes listed above. If you have a better alternative please advise.

.desktop .sub-menu {float: right; min-width: 250px;}

Thanks so much for you help.

#2

Hello Keith,

Thanks for asking. :slight_smile:

You can add following CSS under X > Theme Options > CSS:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0px;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Now the first child sub lines up the way we need it. The third child sub needs to pop out to the right of the second child sub. I hope I am making this clear? Sorry if I am confusing you. Check the sub menu triggered by hovering over the child labels under the main menu Services tab.

#4

Hello Keith,

Thanks for updating in!

Please have the code updated and use this instead:


.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0px;
}

.masthead-inline .x-navbar .desktop .sub-menu .sub-menu {
    right: auto;
    left: 100%;
}

We would loved to know if this has work for you. Thank you.

#5

worked perfectly! thank you.

#6

Glad we were able to help :slight_smile:

#7

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