- This topic has 12 replies, 4 voices, and was last updated 5 years, 11 months ago by Tom.
-
AuthorPosts
-
April 2, 2018 at 7:11 pm #539228Geoff
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
April 2, 2018 at 9:06 pm #539290LeoStaffCustomer SupportHi 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?
April 3, 2018 at 7:33 pm #540431GeoffHere 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!
April 3, 2018 at 7:46 pm #540437GeoffIn case the link for the menus wasn’t obvious, here it is:
April 3, 2018 at 10:38 pm #540534TomLead DeveloperLead DeveloperWhat’s it look like if you turn the mobile header off? It should actually look just how you want by default.
Let me know π
April 4, 2018 at 5:03 am #540811GeoffIt doesn’t, because I still would like a simpler icon for the mobile view (desktop version is too small). This link shows the difference:
April 4, 2018 at 9:54 am #541153TomLead DeveloperLead DeveloperGot 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; }
April 4, 2018 at 5:45 pm #541448GeoffThanks, 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
April 4, 2018 at 9:32 pm #541540TomLead DeveloperLead DeveloperYou 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 π
April 5, 2018 at 5:12 am #541782GeoffThere 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!
April 5, 2018 at 11:07 am #542210TomLead DeveloperLead DeveloperNo worries! Let me know if you’d like to keep trying, I’m happy to help π
April 26, 2018 at 8:42 pm #561467JesseThanks 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; } }
April 26, 2018 at 9:05 pm #561481TomLead DeveloperLead DeveloperAwesome, updated the code above. Thanks! π
-
AuthorPosts
- You must be logged in to reply to this topic.