Horizontal Drop Down Menu Help

[ablesonh]

I’ve managed to create a test drop down menu using images that goes horizontal. With the following css:

.x-navbar .x-nav .sub-menu >li>a>span {
display: inline-block;
}

.e467-3 .sub-menu {
display: inline-block;
vertical-align: top;
position: relative;
}

.e467-3 .sub-menu > a {display: block; height: 100%}

.e467-3 .sub-menu ul {
display: none;
position: relative;
top: 100%;
margin: 0;
padding: 10px;
min-width: 150px;
}

.e467-3 .sub-menu:hover ul {
display: block;
}

.e467-3.x-menu li {
display:inline-block !important;
}
.e467-3 .sub-menu .x-anchor .x-anchor-text-primary {
display:inline-block !important;
}

.e467-3 .x-dropdown {
width: 100%;
}

.e467-3 ul.x-dropdown {
margin-top: -3em;
}

However when I tried to replicate it on the actual menu it either broke the menu itself or wouldn’t go horizontal. I know I’m close, any css help you could give would be much appreciated.

[ruenel]

Hello @ablesonh,

Thanks for writing in!

Please remove your custom CSS. It will only create issues and conflict. Regretfully, currently, there is no such option to make the menu items horizontally aligned. It would require customization and which is beyond the scope of theme support.

If you still need that, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

You might want to use UberMenu instead which has more submenu options. See

• http://sevenspark.com/docs/ubermenu-3/settings/submenu

Please kindly read the article below to know how to change the Sub Menu of Ubermenu from Full Width mode to Natural Width mode:

• https://sevenspark.com/docs/ubermenu-3/settings/submenu/width

Thanks