[Resolved] Mobile header size & tablet view

Home Forums Support [Resolved] Mobile header size & tablet view

Home Forums Support Mobile header size & tablet view

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #539228
    Geoff

    Hello,

    I’ve searched the forums and am having trouble finding an answer to this question:

    — I would like to have the mobile version of the logo across the top, with the menu below. The logo is set under Customizing-Layout-Header, but it’s pushed to the left side, fairly small. Can I also control the size of the logo via. CSS?

    — I would also like to keep the desktop version of the header in the tablet view and include the hamburger menu. I assume it’s a matter of manipulating the CSS, but I can’t find the answer.

    Thanks so much — I’m a fan of Generate Press because it’s so user-friendly!

    Geoff

    #539290
    Leo
    Staff
    Customer Support

    Hi there,

    – Disabling the mobile header should give you that layout: https://docs.generatepress.com/article/mobile-header/

    – Not quite sure if I understand this one, can you explain a bit more?

    #540431
    Geoff

    Here is what I had in mind for the mobile and tablet menus.

    I’m wondering if the mobile icon can be manipulated via. CSS, centering it and making it larger.

    I was also wondering if the tablet version can display the desktop version of the banner, by changing the CSS.

    I tried finding the answer via. the forums and couldn’t locate it.

    Thanks!

    #540437
    Geoff

    In case the link for the menus wasn’t obvious, here it is:

    http://dev.tunbridgehillfarm.com/generatepress/

    #540534
    Tom
    Lead Developer
    Lead Developer

    What’s it look like if you turn the mobile header off? It should actually look just how you want by default.

    Let me know πŸ™‚

    #540811
    Geoff

    It doesn’t, because I still would like a simpler icon for the mobile view (desktop version is too small). This link shows the difference:

    http://dev.tunbridgehillfarm.com/generatepress/

    #541153
    Tom
    Lead Developer
    Lead Developer

    Got it. Give this CSS a try:

    #mobile-header .site-logo {
        margin-left: auto;
        margin-right: auto;
    }
    
    .mobile-header-logo #mobile-header .menu-toggle {
        width: 100%;
    }
    
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: auto;
    }
    #541448
    Geoff

    Thanks, Tom. That’s exactly what I wanted for the phone view. For the tablet view, is there a CSS command to keep the desktop header yet keep the mobile navigation? I appreciate the help! — Geoff

    #541540
    Tom
    Lead Developer
    Lead Developer

    You can initiate the mobile header for tablets like this:

    @media( max-width: 1024px ) {
    	.site-header,
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    
            .main-navigation:not(.slideout-navigation) .main-nav > ul {
                display: none;
            }
    
            #mobile-header .menu-toggle,
            #mobile-header .mobile-bar-items {
                display: block;
            }
    }

    Let me know if it does the trick or not πŸ™‚

    #541782
    Geoff

    There was no change — I feel like I’ve taken up enough of your time with this. The main goal was for the phone view to improve, which it has. Thank you!

    #542210
    Tom
    Lead Developer
    Lead Developer

    No worries! Let me know if you’d like to keep trying, I’m happy to help πŸ™‚

    #561467
    Jesse

    Thanks Tom! I’m using a slightly modified version of your code.

    @media( max-width: 1024px ) {
    	.site-header,
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    
        /* Added a background colour to the menu for when it is used with merge with site header */
        .main-navigation .main-nav {
            background-color: #FFF;
        }
    
        /* Using #mobile-header ul {} prevented my menu from opening */
        .main-navigation .main-nav>ul {
            display: none;
        }
    
        #mobile-header .menu-toggle,
        #mobile-header .mobile-bar-items {
            display: block;
        }
    }
    #561481
    Tom
    Lead Developer
    Lead Developer

    Awesome, updated the code above. Thanks! πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.