[Resolved] Disable Breadcrumbs on Mobile and Display custom menu on mobile

[Prajwal]

Hi,

1. I am using RankMath plugin and I want to hide the breadcrumbs on mobile (posts). How can I do that ?. I read some forum threads and tried using the below code but it doesn’t work.

@media (max-width: 768px) {
    #breadcrumbs {
        display: none;
    }
}

I also tried the below code and it seems i am doing something wrong.

@media (max-width: 768px) {
#rank-math-breadcrumbs {
display: none;
}
}

2. I have created a custom menu for mobile using the steps mentioned in the article – https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

Now for mobile, I want to display the menu items on the menu bar instead of hamburger icon and Menu label. I have got only 4 items in menu and I am sure they will fit well in the menu bar. Is that possible. Something like this – https://snipboard.io/Ik7rSG.jpg

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Please also a second topic for the question #2 so we can keep one question per topic.

Thanks

[Prajwal]

Yes

[Leo]

This CSS should work:

@media (max-width: 768px) {
    .rank-math-breadcrumb {
        display: none;
    }
}

[Prajwal]

Hi Leo, I tried your code, it doesn’t work. I have cleared the local cache but no luck.

[Leo]

Edited the code a bit:
https://generatepress.com/forums/topic/disable-breadcrumbs-on-mobile-and-display-custom-menu-on-mobile/#post-1841407

[Prajwal]

That one worked. Thanks Leo.

[Leo]

No problem 🙂

[Author]

Posts