[Support request] How to go responsive (=) as soon the tabs in navigation doesn't fit

[Sylvester]

Hello

My question is what i should do if i want my tabs in primary navigation to go responsive as soon it doesn’t fit the line anymore.

If you try to scroll in the webpage on https://iapp.org you can see the navigation goes to the responsive tab (=) as soon it doesn’t fit the primary navigation anymore.

I would like this too on my website juraliv.dk . But when i scroll in the kalender, jobopslag and search bar goes to a second line which is annoying and looks ugly.

Then i scroll a little bit more the primary navigation goes to the (=) responsive tab.

So my question is, how i can do the same as the webpage https://iapp.org

Best regards

[Leo]

Hi there,

Try this: https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[Sylvester]

Hey Leo, Thanks.

Its okay but it mixes with some CSS (the hovering line) when you click on it.

The = (box) also displays under the logo. Can i move it up, in the top next to the search bar like in mobile/ipad form?

Try to take a look at it now; https://juraliv.dk/

[Leo]

Ahh you are using mobile header. Try this instead: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

[Sylvester]

Thanks Leo, that is much better.

It looks great, but when i press the = (box) no tabs appear, and my mobile header logo is a little small.

I’m sorry i ask you alle these questions, but i sucks at CSS ^^.

Here is alle my CSS you have given me so far (from other topics too, and this one)

/* Mobile header */
.mobile-header-navigation .mobile-header-logo,
.mobile-header-navigation .mobile-header-logo img {
height: 40px;
padding-top:5px;
}

/* Navigation logo */
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 70px;
margin-left: 40px;
margin-top: 0px;
}

@media (min-width:768px) {
/* nav links effect */
.main-navigation .menu > .menu-item > a::after {
content: “”;
position: absolute;
right: 50;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

display: block;
width: 0;
height: 2px;

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 90%;
}

@media( max-width: 1000px ) {
#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;
}
}

[Leo]

Hmm I think the toggle isn’t working is due to a js error. The CSS shouldn’t do that.

Try #1 here: https://docs.generatepress.com/article/debugging-tips/

As for mobile header logo, try this CSS:

@media (max-width: 1000px) {
    .mobile-header-navigation .mobile-header-logo img {
        padding: 0px;
    }
}

[Sylvester]

You’re the man Leo

The CSS code for the mobile header worked great!

i found out that the bug is in the code:

@media( max-width: 1050px ) {
	#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;
	}
}

I think the solution is in this ticket; https://stackoverflow.com/questions/28067506/why-isnt-the-toggle-button-my-responsive-wordpress-nav-working

But i don’t know where to but the recommended CSS from the ticket in the above code that i use?

[Leo]

Sorry what was the bug? It’s making the mobile toggle not working?

[Sylvester]

Yes, when i put the code in it looks great, but the toogle doesn’t work in mobile/iPad state. It simply dosnt show the menues.

When I remove the code, the toggle works fine again.

I think there is a line missing or something. But I simply can’t see it.

[Tom]

It looks like your first Elementor section has a top shape separator applied to it, which is sitting on top of the mobile menu making it so you can’t click it.

If you remove that first shape separator from the top of the section, it should work.

[Author]

Posts