[Resolved] Menu tablet, landscape mode

[Henrik]

Hi,

Struggling with menu, tablet landscape mode.

Used this https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width and it makes the menu go under the logo.

I can’t seem to wrap the code to logo-left, menu right… the site is at antenneforening.dk

I have another little thing… in the footer I have boxes… Can’t seem to make it look proper on different formats. I want the margin/padding to be “symmetric”… (hope you understand)

[Leo]

Hi there,

The mobile header looks good to me? Here is what I see on iPhone: https://s30.postimg.org/kgiqd4vxt/IMG_5787.png

Are you seeing something different?

[Henrik]

Yes, sorry for not explaining to good.. My challenge is on tablet, and only in landscape mode.
In portrait mode I get the mobile menu as you posted, very good.

The trouble is in landscape mode. I’ve tried to go around it with the css in the link above.
Does it make sense?

[Leo]

Hmm you could try to make the mobile kick in earlier by setting it to like 1320px.

Let me know if this helps.

[Henrik]

See, the mobile kicks in very fine, its the format of it I’m trying to adjust.

Just for now, I’ve set the kick to 1500px, just so you can see what happens.

I get the logo in one line at top, and the menu under. I’m trying to achieve the same menu as in the picture you posted, with logo on the left, and menu on the right. I’m sure it is in css I shall adjust, but not sure how…

[Tom]

Unfortunately that’s just the menu running out of space.

You can reduce the width of your logo at certain breakpoints to make more room.

For example:

@media (max-width: 1600px) {
    .site-logo img {
        max-width: 200px;
    }
}

[Henrik]

It makes sense, but not making it work..

This is my @media

@media (max-width: 768px) {
    .nav-float-right .main-navigation {
        float: right;
    }
    .nav-float-right .site-logo {
        float: left;
    }

.mobile-header-navigation .mobile-header-logo img {
        padding: 0;
    }
}

@media (max-width: 1000px) {
    .site-logo img {
        max-width: 200px;
    }
}
@media (max-width: 1000px) {
	.main-navigation .menu-toggle {
		display: block;
	}
	
	.main-navigation ul {
		display: none;
	}
	
	.main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.main-navigation .main-nav .sf-menu > li {
		float: none;
		clear: both;
		display: block !important;
		text-align: left !important;
	}
	
	.main-navigation .sub-menu.toggled-on,
	.main-navigation .children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.main-navigation .dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.main-navigation .sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}
	
	.main-navigation .menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.main-navigation .mobile-bar-items {
		display: block;
	}
	
	.main-navigation .menu li.search-item {
		display: none !important;
	}
	
	.main-navigation .sf-menu > li.menu-item-float-right {
		float: none !important;
		display: inline-block;
	}
	
	[class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

Still logo on one line, menu below (tablet landscape mode)

(thank you for a awsome support)

[Tom]

Did you try adjusting the width of the logo? 200px was just an example.

[Henrik]

Hi Tom,

Yes, I think I’ve tried so many things I don’t know what is up and what is down.

http://antenneforening.dk/testing/

First picture is landscape mode, and where I’m struggling
Second picture is in picture mode.

[Tom]

Ah, instead of the CSS to initiate the mobile menu at your desired width, you want to initiate the mobile header.

Try this: https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

[Henrik]

Definately getting closer… now I get both menu’s, look at the link above.
Thank you for your patience.

[Tom]

Try adding this as well:

.mobile-header-navigation .menu {
    display: none;
}

[Henrik]

Tom, you’re a genious.
Thank you! Your support is outstanding!

[Tom]

Glad I could help! 🙂

[Author]

Posts