Awaiting an answer Helix Framework

Menus move down into slider when page narrows

Asked by Walter Wood 4 years ago Last activity 4 years ago

I am running SP Page Builder Pro 3.8.3 and Helix Ultimate 2.06 in Joomla 3.10.5. When running full screen, the menus work fine but if the page narrows the menu move down a line into the slider at the top of the page. How can this be fixed.

Thanks,
Walter

11 replies

Ariba Staff

4 years ago

Hello

Thank you for providing the credentials.

Could you kindly share a screenshot of the issue highlighting it, please? That would be helpful for a better understanding. You can use this tool to share the image here: https://imgur.com/

Walter Wood Asked this

4 years ago

geotech.com/documents/helix-menus.mp4

Ariba Staff

4 years ago

Kindly check now.

I have added the following css rules in custom css section. Also I noticed you might have reduced the logo height which is helping to accomodate all the items in a single row.

#sp-logo.has-border {
    padding-right: 0px !important;
    padding-left: 0px !important;
}
#sp-menu.menu-with-social .sp-megamenu-wrapper {
    justify-content: end !important;
}

Hope this helps you :)

Walter Wood Asked this

4 years ago

Thank you. I know I will catch some grief about the logo in the header being so small. If it becomes necessary, how much could I increase the height without causing a problem?

Ariba Staff

4 years ago

You are welcome.

Right now you can increase the height to 35px, if you have to increase more - you will need to reduce the gaps between menu items and/or reduce the font size of them.

Walter Wood Asked this

4 years ago

Ariba,

The boss is still not happy with the (small) size of the logo in the header. Do you have any more suggetions on how to make it larger?

I am using the Classic Layout for the header. Would another layout provide for a larger logo?

I did change one menu item so that the whole menu is now shorter and that did not seem to help. Also, it was mentioned to reduce the spacing between the menu items. How is that done?

Thanks.
Walter

Ariba Staff

4 years ago · edited

Hello Walter

Thank you very much for your patience.

Now that the whole menu is shorter, we can increase the logo height. I have increased it from 35 to 50. Kindly check if it is alright now.

If you want to increase it more by reducing the spacing between menu items - edit the following padding rule and add it in custom css section, then increse the logo height.

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    padding: 0 15px;
}

Walter Wood Asked this

4 years ago

Thanks Ariba, sorry to be such a pain. When you say edit the following padding rule, I really do not understand padding. . Does this mean I can reduce the 15 to something like 10 or 12?

It seems that when I change the padding and margins in the Styles sections, I do not see any change. Is these some where in the documentation that discuses padding and margins so I can learn more?

Walter Wood Asked this

4 years ago

After my last message earlier today, I noticed that when you hover over main menu items, that the submenu items are well below the main menu items with a gap of almost one inch. Is there a way to reduce this verticle space?!

Ariba Staff

4 years ago

You are welcome.

Kindly check now. I have added these:

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    padding: 0 7px;
    line-height: 40px;
}

Line height is for the submenu item issue - you can increase or decrease the value as per your need. Also adjust the padding value 7px as necessary (to change the space between menu items).

You can check this link: https://www.joomshaper.com/documentation/helix-framework/helixultimate/faq-how-to-do - find the section "How to reduce space between menu items"