Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Menu tablet, landscape mode

Home Forums Support Menu tablet, landscape mode

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #338723
    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)

    GP Premium 1.3.1
    #338736
    Leo
    Staff
    Customer Support

    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?

    #338742
    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?

    #338745
    Leo
    Staff
    Customer Support

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

    Let me know if this helps.

    #338749
    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…

    #338847
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #338954
    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)

    #339201
    Tom
    Lead Developer
    Lead Developer

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

    #339230
    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.

    #339558
    Tom
    Lead Developer
    Lead Developer

    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

    #339626
    Henrik

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

    #339691
    Tom
    Lead Developer
    Lead Developer

    Try adding this as well:

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

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

    #339803
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.