[Resolved] Mobile header breakpoint

[themedleb]

Hello there,

I am using the mobile header, and I want to use it to start from 1330px, after copying the following CSS code (found in GeneratePress support forum for mobile header), on the desktop the menu looks normal, starting from 1330px the menu disappears and on mobile the menu appears again normally with mobile header feature/mode, is there a way to make the menu appears as mobile header starting from 1330px?

By the way I’m using an RTL site.

Thank you.

@media( max-width: 1330px ) {
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}
	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}
	.mobile-header-navigation.is_stuck {
		box-shadow:0 2px 2px -2px rgba(0, 0, 0, .2);
	}
	.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		display: inline-block;
		float: right;
		clear: none;
		width:auto;
	}
	#mobile-header .menu {
		display: none;
	}
	.site-header {
		display: none;
	}
	.mobile-header-navigation .mobile-header-logo {
		float: left;
		display: block;
	}
	.mobile-header-navigation .mobile-header-logo img {
		position: relative;
		vertical-align:middle;
		padding: 10px;
		display: block;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.nav-float-left .mobile-header-navigation .mobile-header-logo,
	.rtl .mobile-header-navigation .mobile-header-logo {
		float: right;
	}
	.nav-float-left.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle,
	.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
		float: left;
	}
	.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		position: relative;
		float: right;
	}
	.rtl.mobile-header-logo .mobile-header-navigation .mobile-bar-items {
		float: left;
	}
	body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
		position: absolute;
		right: 0;
		top: 0;
	}
	body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
		left: 0;
		right: auto;
	}
}

[themedleb]

Oh and I am using the website in a localhost for testing purposes.

[Leo]

Hi there,

Unfortunately it’s hard to tell without seeing the site live.

Any chance you have a live server to duplicate this issue?

Thanks!

[themedleb]

I will need to build the website online from scratch or duplicate the actual one if possible, I will see how to manage that and get back soon.

Thank you Leo.

[themedleb]

Here is the live website, please have a look at it, thanks.

http://test.slashfusion.com/

[Leo]

Hmm weird. Can you try disabling all non-GP plugins?

[themedleb]

Yes I did, still no menu, can I send you my credentials to get in and have a look at it? If yes, where?

[Leo]

Hmm I still see Elementor activated?

[themedleb]

I did deactivate it with it’s Pro plugin (all plugins deactivated except GP Premium) but still no menu, but because the website looked horrible without Elementor lol, I activated it again.

[Tom]

Can you try adding this CSS?:

#mobile-header .menu-toggle {
    display: block;
}

[themedleb]

Hi Tom,

After trying the CSS code you gave me, the menu icon (hamburger) appeared but -1- when it’s opened the menu items are not RTL (everything is LTR) -2- there is no search icon.

[Tom]

Add this in there as well:

.mobile-bar-items {
    display: block;
}

.rtl #generate-slideout-menu .slideout-menu>li {
    text-align: right;
}

[themedleb]

Great, now all what’s left is a conflict on the search icon when the website is on desktop resolution, after adding the last code you gave, it started showing two search icons stacked, one is RTL and the other one is LTR (flipped), and of course I only need the RTL one.

Thank you.

[Leo]

Can you try this additional CSS?

.main-navigation li.search-item i {
    transform: none;
}

[themedleb]

Perfect, thank you Leo and Tom, much appreciated.

[Author]

Posts