Adding items to Main Menu on Mobile?

Hi there,

Option 1 - hide them on desktop with CSS.
In Appearance > Menus, activate the CSS Classes field:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Then in that field add: hide-on-desktop hide-on-tablet

Those items will only display on Mobile size screens now.

Option 2 - use the Off Canvas Panel just for Mobile as it can have its own menu.

https://docs.generatepress.com/article/off-canvas-panel-overview/

Hi, I've come up with a better solution (in my mind at least).

How about if I put them in the top bar?

The problem then is how to display the top bar only on mobile?

I figured it out!

@media (min-width: 1024px){
.top-bar {
display: none;
}
}

So… my only issue now is that I am trying to figure out how to align the FB icon with the logo in the menu area below, but no matter what I do, it seems stuck over on the right. Thoughts?

Hi there,

I believe the original topic of "Adding items to Main Menu on Mobile?" has already been resolved.

In that case, can you open a new topic and link us to the page in question?
https://www.screencast.com/t/5Puiam6CY

Thanks!