Stop navbar from wrapping

Shapely
1

Hello!

I have an issue with the main navigation menu for my site - as the page narrows the menu drops down to a 2nd line before switching to the three lines menu icon.

How would I go about making it so that the instead of the inline navigation menu dropping to a 2nd line, it simply switches to the three lines menu icon? Exactly the same way it does on colorlib.com.

Thanks for your help!

2

My site is wanderingnarrator.com

3

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

.module-group {
    display: inline-table;
}

Thanks!
Colorlib Support Team

4

Thank you so much! It worked a treat :slight_smile: Is there any way to keep it the same height the whole way through? The bar gets slightly bigger when the three lines appear.

A few more things:

  1. How do I remove the words ‘site search’ that come up next to the search icon on the mobile menu?
  2. Can the mobile menu be moved to the right side of the page, so that it comes up under the three lines when you click it?
  3. Can the down arrow for the sub menu be moved closer to the word from the main menu?

Hope that makes sense. Really appreciate your assistance!

5

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the theme by going to Appearance > Customize > Additional CSS and pasting it there.


@media (max-width: 991px){
.module.widget-handle.search-widget-handle.left.toggle-search {
    display: none;
}
}

  1. Moving the menu elements would not appear correctly on different mobile sizes.

  2. This will move the button:


/*Move menu button*/
.menu > li.dropdown {
    padding-right: 120px;
}

Best Regards,
Support

6

Hello again,

The above CSS is not stopping the menu dropping down to a 2nd line before switching to the three lines menu icon.Is there another way to make sure the inline navigation menu switches straight to the three lines menu icon without dropping to a second line first?

Thanks!

7

Nevermind, I fixed it by making the header image smaller.

8

hi

So, can we mark this ticket now as a resolved? :slight_smile:

9

Yes :slight_smile:

10

Hi, there

Now I will now close the topic and mark it as resolved. Feel free to contact us again

If you’re happy with our service, don’t forget to rate us: [Shapely] Reviews | WordPress.org