[Jay BParticipant]

Hi!

As you can see I’ve disabled the X menu on a mobile device but I am keeping some menu items in desktop and tablet mode. Only problem is when shrinking the screen or viewing from an Ipad the menu overlaps the superfly menu. See screenshot highlighted in red.

Is there any way to ensure the X menu doesn’t mix with the superfly menu when the screen is shrunk?

Thanks

Jay

[Jay BParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi there,

Thanks for writing around! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.masthead-inline .desktop .x-nav {
    margin-right: 70px !important;
}

Let us know how this goes!

[Jay BParticipant]

That worked perfectly thanks very much!

[Jay BParticipant]

Oh I’ve just noticed the menu is supposed to activate upon hover but actually activates upon hover all along the right hand side of the page.

Is there anyway to contain the hover effect to the button? If not I will make it so you have to activate upon click.

Many Thanks

[LelyModerator]

Hello Jay,

Unfortunately, that is how it works by default under BEHAVIOUR option for desktop menu. That effect that menu can be activated on button hover only is just for mobile.

[Jay BParticipant]

Ahh ok – I’ve changed it to activate upon click as using the hover method when the menu is aligned right will effect anyone wanting to scroll down the page using the traditional scroll method. Figure I should cater for anyone without a trackpad or a mouse wheel.

I’ve managed to slim down the height of the search box within the superfly menu using the following CSS but I can’t seem to align the text/cursor height to the middle of the search field reflecting the new height. The search icon however is aligned at the perfect height. Is there anything I can add to this CSS to make the text flush with the icon?

#sfm-sidebar .sfm-search-form {
height: 40px;
}

Thank you.

[JadeModerator]

Hi there,

Please try this code in the customizer:

#sfm-sidebar .sfm-search-form input[type=text] {
    height: auto !important;
}

Hope this helps.

[Jay BParticipant]

Like a charm!

Thank you Jade 🙂

[FriechModerator]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts