Docs

[toddbiala]

Hi,

not sure why this is happening, i assume i have some bad css or something? When you visit my site from mobile it loads ok but when you scroll then the breadcrumbs become invisibile. it’s as if the content needs a padding or something. So if someone wanted to click on a breadcrumb they wouldn’t be able to.

you can see here: https://www.junkcarmedics.com/service-area/

any ideas?

[Rupok]

Hi there,

It seems you have added the below code that forcing the Navbar to be fixed on mobile as well :

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
  position: fixed;
}

Kindly remove this to get expected result. If you want to make it fixed for mobile then you need to add the below code as well ;

@media only screen and (max-width: 580px) {
.x-container.max.width.offset {
  margin-top: 165px;
}

.x-breadcrumb-wrap {
  position: absolute;
  top: 110px;
  width: 100%;
}
}

Hope this helps.

Cheers!

[toddbiala]

Ok i added that but i still get similar issue just now it shows everything then scrolls up.

Any suggestions for this to remove the large white space between title and breadcrumb and how to stop that jumping after

[Rue Nel]

Hello There,

As we have mention in our previous reply, please remove this block of code:

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
  position: fixed;
}

And if you are using it, you need to update it and use this instead:

@media(min-width: 980px){
  .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed;
  }
}

Please let us know if this works out for you.

[toddbiala]

sorry i am a little confused – if i remove that code or change it to the code you provide it makes the navbar unfixed on mobile. we want it fixed to the top.

but theres some where blank space or jumping going on when it’s there.

[Joao]

Hi there,

Please add the following code to Appereance Customizer Custom CSS at the bottom.

Or try to find the respective code on your Customizer and change de values of it like to 70px.

@media only screen and (max-width: 580px) {
.x-breadcrumb-wrap {
top: 70px;
}
.x-container.max.width.offset {
margin-top: 70px;
}
}

Hope that helps

Joao

[toddbiala]

Hey sorry – can you check i still get the problem. If you visit you’ll see. on mobile it appears lower then jumps up still. want it just to be up higher.

I believe the above code you supplied is added properly

https://www.junkcarmedics.com/blog/auto-junk-yard-scams/

[Christopher]

Hi there,

Thanks for writing in !

I’m not able to replicate this, please clear cache on your mobile browser and check again.

Hope that helps.

[toddbiala]

i did. its still jumpy at the top. tried on 4 phones

[Christian]

Hey Todd,

Could you give us more details (perhaps some screenshots or better yet a screen recording)? What do you mean by “jumpy at the top”?

Thanks.

[Author]

Posts