Mobile Logo
URL to the page in question:
http://
-
Hello,
My site is experiencing the same issue with the Logo at certain resolutions, where half the screen is taken up by the Logo. Please see: http://staging.thedoorways.org/ and view it in portrait and landscape view on a smart phone. Portrait view is fine…landscape is not. I tried to apply the same CSS fix that Bill mentioned above, but it did not resolve the issue.
Did you ever find a solution for this?
Thanks in advance,
David
Hi David,
Sorry for the trouble there. I split this off onto a separate topic since the other question was for the Elite theme and it looks like you’re using Grassroots here.
You can adjust the logo size for different sized screens. Here’s one way to go about that:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
@media only screen and (min-width: 1200px) {
nav#top-menu {
top: 45px;
position: relative;
}
}
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
#logo {
max-width: 300px;
}
nav#top-menu {
top: 25px;
position: relative;
}
}
@media only screen and (max-width: 1023px) {
#header #logo {
max-width: 200px;
}
.slicknav_menu {
top: 25px;
}
}
- Update your settings.
That will also help center the navigation bar vertically next to your logo. Let me know if you have any trouble or questions.
Thanks,
Bill
Thanks, Bill.
That did the trick for the logo.
Centering the navigation bar vertically causes the Hero Image on the home page (and other pages) to extend down further than desired.
What do I need to change to only fix the logo and not fix the navigation bar?
Thanks, as always, for your very prompt replies!
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
#logo {
max-width: 300px;
}
}
@media only screen and (max-width: 1023px) {
#header #logo {
max-width: 200px;
}
}
- The topic ‘Mobile Logo’ is closed to new replies.