hide breadcrumbs on mobiles

Public Ticket #31695

Conversation thread

PenciDesign Supporter replied

1 year ago

Staff Reply

Hi,

The issue is caused by the header you built, which includes extra spacing and CSS that removes the bottom margin/padding. As a result, the breadcrumb has shifted to the top.

Please go to Appearance → Customize → Custom CSS and add the following code:

@media only screen and (min-width: 960px) {
  .elementor-337 {
    margin-bottom: 60px;
  }
}

Regards,
PenciDesign.

maximilianruschepaul replied

1 year ago

Customer Reply

Works super well, thank you.
For some reason the header for screens bigger than the definition below is now hidden behind the header: Sample link

Not sure why this would be. Your code should actually not do that to my understanding. Anything you have seen before? I figured I could give it a display: fixed css to make it appear again, but that would make it look weird. Seems the position is somehow shuffled...?

PenciDesign Supporter replied

1 year ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
  .penci-breadcrumb {
    display: none;
  }
}

Regards,
PenciDesign.

maximilianruschepaul started the conversation

1 year ago

Conversation Start

Hi there,

in the Customize General section, there are options to generally hide or shorten the breadcrumbs. Can it also been disabled for mobiles / small screens? It looks specifically bad there for longer breadcrumbs...

Thank you!

Want to join this conversation or access attachments? Sign in first.