Main menu items are wrapping and the search disappears when page is resized on desktop view. - Forum | JoomShaper
Solved Helix Framework

Main menu items are wrapping and the search disappears when page is resized on desktop view.

Asked by Shirley Craig 3 years ago Last activity 3 years ago

The main menu isn't resizing when I reduce the width of the page on desktop, the menu items wrap and the search bar disappears. The search is currently hidden behind the logo.
thank you.

Accepted answer

Marked as the solution
Mehtaz Afsana Borsha Staff

If you reduce the menu font size like 17px then it will be solved.

6 more replies

Mehtaz Afsana Borsha Staff

Hi

Thanks for contacting us. Could you please give me a screenhot of your issue?

-Regards.

Shirley Craig Asked this
3 years ago · edited

I would like to have the search bar above the "Contact" menu item.

Here is current view on site with no styling. As you will see it is behind logo.

https://screenrec.com/share/qwYDbh9Emd

Below styling moves search bar to the right but when the page width is resized (made smaller), the search box gets very narrow:

.search {margin:0px 1064px 0px 975px;}

view with styling:
https://screenrec.com/share/Cz9YQ4ficW

and when page is made even smaller, the menu text wraps:
https://screenrec.com/share/edgT61rbwX

Thank you Mehtaz. I appreciate your help with this.

Mehtaz Afsana Borsha Staff

Hi

Use this custom CSS

.form-control{
  width: unset !important;
}

Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Shirley Craig Asked this

The code worked for the search display. Thank you, however, when reducing the width the menu items still wrap before collapsing to the responsive menu.
https://screenrec.com/share/wBmCb0iM9y

Shirley Craig Asked this
3 years ago · edited

Thank you!

Mehtaz Afsana Borsha Staff

You are always welcome.

Log in to reply.