Archived topic
Mobile Logo Placement
5 replies · Started by Allen on December 9, 2021
How can i get the logo on mobile version to a larger size and further down so it isn't cut off.
https://americanmajorityproject.com/
i used this code from a other GP site that I manage (but someone else did the work) but it isn't working:
/* ## GENERATEPRESS TWEAKS & OVERRIDES ## */
/* --------------------------------------------- */
/* ### GeneratePress header #### */
/* --------------------------------------------- */
/* Logo width */
.site-logo {
max-width:240px;
}
@media(min-width:769px) {
.site-logo img {
margin-top: 12px;
}
}
/* Stick header logo positioning tweaks */
.main-navigation:not(.sticky-logo) img {
margin-left: 10px; margin-top: 2px;
}
.site-logo.sticky-logo {
margin-top: 18px;
}
.site-logo.sticky-logo img {
height: auto;
}
/* GeneratePress header fix for phablets & small tablets
Change the 960px value in two places to where you have nav/logo overlap */
@media(min-width:768px) AND (max-width:960px) {
.inside-header {
display: flex;
flex-flow: row wrap;
justify-content: center;
padding: 0 0 0 0;
}
#site-navigation {
min-width: 768px;
padding: 0px;
text-align: center;
}
#site-navigation ul li {
display: inline-block;
float: block;
}
}
@media screen and (max-width: 640px){
img.is-logo-image {
height:100px;
margin: 10px 10px 10px 10px;
padding:auto;
}
}
Hi there,
Can you try deactivate the mobile header at customizer > layout > header > Mobile Header?
Let me know if this helps :)
the logo is SUPER small... no good...
This is what your site header look like on mobile when mobile header is deactivated:
https://www.screencast.com/t/MJfv40v0
1. It's like that because of the CSS you added, so try change this CSS:
@media screen and (max-width: 640px){
img.is-logo-image {
height:100px;
margin: 10px 10px 10px 10px;
padding:auto;
}
}to
@media screen and (max-width: 640px){
img.is-logo-image {
margin: 10px 10px 10px 10px;
padding:auto;
}
}2. Add this CSS (feel free to adjust the value 100px):
@media (max-width: 768px) {
.site-header .header-image {
width: 100px;
}
}3. Remove the padding right for header on mobile at Customizing > Layout > Header > Header Padding (Click the mobile icon).
PERFECT - Thank you
No problem :)
