Shapely - Nav menu split over two lines in mobile view

Shapely
1

Good morning. I’m having a problem with my main nav menu being split over two lines in landscape mobile view (ie on an iPad). This looks fairly ugly so it would be great if I could force it to change to the mobile block nav before it did this.

I’ve searched the forum and tried a few things but have had no luck. Any help would be most appreciated.

Thanks.

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can see the issue and provide some CSS to fix the issue?

Best Regards,
Support

3

Thanks very much. The site is: http://www.tpacademytrust.org

4

Hello there,

Thanks for the link.

You can use the following CSS code to adjust the spacing in the menu by going to Appearance > Customize > Additional CSS and pasting it there.

/*Mobile menu items space*/ @media (max-width: 1120px) .main-navigation .menu > li { margin-right: 1px; padding-right: 1px; }

Best Regards,
Support

5

Many thanks for your reply and code. Unfortunately it doesn’t seem to work (I’ve tried it in both the additional CSS and directly in my child theme) It’s showing an error on line 3 - could this perhaps be why it doesn’t work?

Thanks for your time.

6

Hi. Does anyone have any have any other suggestions to fix this please? Many thanks.

7

Still looking for a solution… Any suggestions welcomed!!! Thanks.

8

Hello there,

I am sorry for the inconvenience caused here.

I have viewed the page and the menu is now appearing in a single line.
Could you please add an image of the issue so that I have a reference?

Best Regards,
Support

9

Thanks for your reply. Here’s the problem:

10

Hello there,

Please try using the following CSS:

@media only screen and (max-width: 1120px) {
.module {
display: inline-block;
padding: 0px 0px;
}
}

@media (max-width: 1120px)
.main-navigation .menu > li {
margin-right: 1px;
}

@media (max-width: 1120px)
#site-navigation .module.left {
padding-left: 0px;
}

Best Regards,
Support

11

Thanks for your help. Still no luck unfortunately - there appears to be a couple of errors in the code too.

I’ve tried adjusting the media px but it will always go on to two lines before switching to mobile block view…

12

I’m still hoping to find a solution so any help would be great. I’ve searched the internet and just can’t find the right code to make it work… Thanks again…

13

Hello!

Did you find a solution for this? I have the same problem…

14

HI there

@frime, can i see your website? please provide url of your website,
i see this is no longer problem for the ticket author because i just checked website link provided here and i no longer see the problem explained in the ticket

Have a good evening :slight_smile: