Archived topic
Mobile header size & tablet view
12 replies · Started by Geoff on April 2, 2018
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
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?
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!
In case the link for the menus wasn't obvious, here it is:
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 :)
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:
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;
}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
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 :)
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!
No worries! Let me know if you'd like to keep trying, I'm happy to help :)
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;
}
}Awesome, updated the code above. Thanks! :)
