Change primary menu on a breakpoint

Hi there,

I'm not aware of a solution for this unfortunately. It will require some custom coding.

Are you trying to hide certain menu items on a lower breakpoint?

If so we can try some CSS solutions.

Let me know :)

Hello Leo,

What Im trying to do is if a menu has lots of items as the screen gets smaller when it hits a point I want it to collapse the last few items and replace it with a More menu which has a drop down with the removed items displayed below. I was thinking about using php but I suppose you could use css to hide the more menu item until its required and when I display that hide what it replaced. The Blocksy theme does this by default. I hope this makes sense.

So I guess my question is how do I hide a particular menu item when I hit a specific media query using css?

Can you try using the built-in hide-on classes and see if that works?
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

If not then we will try another way :)

Hello Leo,

I hadnt realised about those classes, very useful but not quite what Im after.

I added this css, see what you think to the result check out https://university.chaselifetech.co.uk/
Its as you make the website on desktop you will see the more box appear.

@media (min-width:1261px) {
li#menu-item-445 {
display:none;
}
}

@media (max-width: 1260px) {
li#menu-item-445 {
display:block;
}
li#menu-item-77 {
display:none;
}
li#menu-item-372 {
display:none;
}
li#menu-item-78 {
display:none;
}
}

Hello Leo,

I have refined my css code by adding a .more-menu class to the More navigation and a .more-menu-tems to the items to be removed.
It seems to work well, it constantly makes me realise how powerful css actually is. https://university.chaselifetech.co.uk/ this show how it works.

@media (min-width:1261px) {
.more-menu {
display:none;
}
}

@media (max-width: 1260px) {
.more-menu {
display:block;
}
.more-menu-items {
display:none;
}
}

Glad to hear :)

That looks good to me!