Changing mobile menu breaking point in X Pro

Support
#1

Hi guys,

In X Pro, how do I increase/decrease the nav menu breaking point from desktop to mobile? I’m using the header builder. I’m assuming this might be a custom CSS job, but I’m not sure.

Cheers,

Tom

#2

Hello Tom,

Thanks for asking.:slight_smile:

If you are looking to change the viewport size then that will require custom CSS which falls outside the scope of support we can offer. More so it’s not recommended to change the viewport sizes as it will break the layout of website. You can take a look at following article to learn more:

https://www.w3schools.com/css/css_rwd_viewport.asp

That being said we do have the feature that you can take a look to hide or display element’s on various screen sizes under Customize > Setup > Hide during breakpoints. Here is a screencast that you can take a look.

For more information, please take a look at following article:

Thanks.

#3

Hi @Prasant,

Thanks for this. I maybe wasn’t very clear. I just want the desktop menu to switch to mobile menu sooner (setting a specific max width) when decreasing the screen size. I’ve seen on another support thread the following:

@media ( max-width: 700px ) {

	.masthead-inline .x-btn-navbar {
		display: block;
		float: right;
	}
}

@media (min-width: 701px) {

	.x-nav-wrap.desktop {
		display: block;
	}

	.masthead-inline .x-btn-navbar {
		display: none;
	}
}

As I’m using the xPro header builder, I wondered whether it would be the same code or something else?

Hope you can help!

Cheers,

Tom

#4

Hi There,

Please try with this custom CSS instead:

@media (max-width: 1000px){
    .x-nav-wrap.desktop {
        display: none;
    }
    .x-btn-navbar {
        display: block;
        float: right;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .x-nav-wrap.mobile {
        display: block;
    }
}

Please note that this custom will work on the default header only.

Hope that helps and thank you for understanding.

1 Like
#5

Wonderful, thanking you!

#6

Glad we were able to help :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.