[Resolved] Mobile Logo Placement

[Allen]

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;
}
}

[Ying]

Hi there,

Can you try deactivate the mobile header at customizer > layout > header > Mobile Header?

Let me know if this helps 🙂

[Allen]

the logo is SUPER small… no good…

[Ying]

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).

[Allen]

PERFECT – Thank you

[Ying]

No problem 🙂

[Author]

Posts