Archived topic
Mobile logo with regular menu
5 replies · Started by Jay on May 14, 2021
Hi GP team,
A question about the mobile logo. Is it possible to use the mobile logo while keeping the regular menu? I would like to achieve these three states:
1) For widths >1300px: Regular logo (wide version) with regular menu
2) For widths 1000px to 13000px: Mobile logo (narrow version) with regular menu
3) For widths <1000px: Mobile logo (narrow version) with mobile menu
Thanks for the help,
Jay
p.s. just wanted to say that GeneratePress, GenerateBlocks, and the support forum are fantastic. Please relay my thanks to Tom and the team!
Hi there,
do you have a site setup with the Mobile header logo in place - i can take a look to see what can be done.
Hi David. I've shared the link to the site. Thanks in advance for looking into it.
The main issue is the full logo and menu are quite wide, which is driving the decision to put 1300px as the breakpoint.
So my thought was to use the mobile logo below 1300px to get a bit more space for the regular menu on smaller screens.
One of my ideas was to create a responsive SVG but that didn't seem to work well with the customizer.
This feels a little bit hackish but you could do something like this:
@media(max-width: 1300px) and (min-width: 1024px) {
.site-logo {
max-width: 200px;
overflow: hidden;
}
}Which will effectively cut the logo in half or thereabouts.
Just need to make sure the meadia query sizes and max-width are correct.
That's genius. So simple and it works perfectly. Many thanks David!
Awesome - glad to be of help.
