Docs

[kaylaadrianna]

Hi again! I’ve tried applying a number of codes provided in the forums to change the breakpoint for mobile, but I think I have other custom code used that’s conflicting with it. I’d like to keep my desktop layout for desktop and tablet (so the desktop mode is visible on my ipad mini) but have mobile enabled for anything with a smaller screen. Is there any way you could possibly look at the custom code I’m using an offer a solution? Much thanks in advance.

[kaylaadrianna]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! Usually mobile menu triggers on the screen size less than 980px. If you want to change this, you can use this CSS :

@media only screen and (min-width: 768px) and (max-width: 979px) {
.x-nav-wrap.desktop {
  display: block!important;
}
.masthead-stacked .x-btn-navbar {
  display: none!important;
}
}

You can change the min-width value if needed. Don’t forget to remove other codes you are using for this.

Cheers!

[kaylaadrianna]

This didn’t work unfortunately. As I said in the first post, I feel like there’s code I’m already using that this code is interferring with and I can’t figure out what’s going on.

When I look at the screen at 800px I see a version of the mobile site (I want to see the desktop version at this size)
When I look at the screen at 768px it’s still in mobile mode (I want to see the desktop version at this size)

but anything smaller can be mobile.

Can you help with this?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[kaylaadrianna]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials. I couldn’t find the provided code in your Customizer, I went ahead and added the code. Also You had this code in your Customizer which was hiding the Navbar in smaller screens:

@media (max-width:768px) {
  .x-navbar {
    display: none;
  }
}

I commented the code and it seems to working as expected. Please clear your browser’s cache and reload the site.

Cheers!

[Author]

Posts