Avoid menu shortening on mobile displays

Resolved juan md
(@andresmilleiro)

7 months, 3 weeks ago

Hi!

When you add several elements on Twenty Nineteen there’s a shortening on the menu with 3 dots as you can see here: https://imgur.com/a/GnUrSLf .

Is it possible to avoid that and render 2 lines of menu instead? How?

Thanks!

The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)

Joy
(@joyously)

7 months, 3 weeks ago

It started out wrapping like you prefer, but the design was to do the shortening. That is done by a script and CSS, so if you dequeue the script, you can see how you need to fix the CSS.

juan md
(@andresmilleiro)

7 months, 3 weeks ago

Thanks! I thought it was something simpler. It’s a shame only by one element to shorten it, maybe with some ability to increase or decrease the size of the menu it can work…

Best

denis24
(@denis24)

4 months, 3 weeks ago

Joy wrote:

“That is done by a script and CSS, so if you dequeue the script, you can see how you need to fix the CSS.”

What script needs to be dequeued, and how would I do that? (I know I’ll need to add some code to my child theme functions.php, but what?)

Thanks!
Kimball31
(@kimball31)

4 months, 3 weeks ago
@denis24
This worked for me, added to bottom of functions.php
```
function dequeue_priority_menu() {
   wp_dequeue_script( 'twentynineteen-priority-menu' );
}
add_action( 'wp_enqueue_scripts', 'dequeue_priority_menu', 100 );
```
jaywaltm
(@jaywaltm)

2 months, 4 weeks ago
@denis24 and @kimball31 , when the theme is updated, this modification gets wiped, is that because I don’t have a child theme?

Also, wondering if there’s a just CSS option to get the same non-collapsing behavior?

Thanks in advance!
- This reply was modified 2 months, 4 weeks ago by jaywaltm.
Moderator James Huff
(@macmanx)

Volunteer Moderator

2 months, 4 weeks ago

when the theme is updated, this modification gets wiped, is that because I don’t have a child theme?

Yes, you’ll need to either create a child theme: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Or, use a functionality plugin: https://wordpress.org/plugins/code-snippets/

Also, wondering if there’s a just CSS option to get the same non-collapsing behavior?

No, this is a structural change and requires more than simple CSS styling.
Ron the Web Guy
(@ronthewebguy)

2 months, 3 weeks ago
Is there a simple CSS option to get the same non-collapsing ellipsis… behavior?
- This reply was modified 2 months, 3 weeks ago by Ron the Web Guy.
- This reply was modified 2 months, 3 weeks ago by Ron the Web Guy.
Moderator James Huff
(@macmanx)

Volunteer Moderator

2 months, 3 weeks ago

No, this is a structural change and requires more than simple CSS styling.

CSS controls how pages look, not how they act.

Ron the Web Guy
(@ronthewebguy)

2 months, 3 weeks ago

Got it. Thank you @macmanx 🙂