[Resolved] Mobile header size & tablet view

[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

[Leo]

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?

[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!

[Geoff]

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

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

[Tom]

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 🙂

[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/

[Tom]

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;
}

[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

[Tom]

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 🙂

[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!

[Tom]

No worries! Let me know if you’d like to keep trying, I’m happy to help 🙂

[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;
    }
}

[Tom]

Awesome, updated the code above. Thanks! 🙂

[Author]

Posts