Forcing desktop menu on tablet/mobile view

[svaldez]

Hi,

I have created a menu on the desktop view that I would like to have on the larger mobile screens. I would like the tablet (768-979px) mobile view to look like the menu on the desktop views with the logo centered within the navigation bar. I have searched the forum and tried all the recommendations for changing the breakpoints, but none worked.

I already have added several CSS changes in the global CSS section of Theme Options and I’m close to achieving what I want, but I just can’t get the mobile hamburger menu to change to the desktop view.

The website is still under construction so I’ll add a private comment with the log in info.

Thank you in advance!

[friech]

Hi There,

Thank you for writing in, please add this to Theme Options > CSS

@media (min-width: 768px) and (max-width: 979px) {
	/*hide the mobile menu*/
	.x-btn-navbar {display: none !important;}
	/*show the desktop menu*/
	.x-nav-wrap.desktop {display: block;}
}

But you need to reduce the spacing of your menu items (Theme Options > Header > Navbar Top Link Spacing), because the current spacing is too much for 945px - 768px screens.

Cheers!

[svaldez]

Awesome! Thank you!

Is it possible to also get the search field to just be the magnifying glass, removing the word “search,” like the desktop view?

Also, is there a way to have a separate/partial version of the desktop menu on the smaller mobile screens? So, instead of having all 4 menu fields visible inline with the logo, just having 2 of them?

[friech]

Hi There,

Please update the given CSS code to this:

@media (min-width: 768px) and (max-width: 979px) {
	/*hide the mobile menu*/
	.x-btn-navbar {display: none !important;}
	/*show the desktop menu*/
	.x-nav-wrap.desktop {display: block;}
	/*hide the word search*/
	span.x-hidden-desktop {display: none !important;}
}

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thank you for understanding,

[svaldez]

Perfect! I really appreciate your help. Thank you!

[rad]

You’re most welcome!