Logo size on mobile

I have tried to write my own code and tested some of the solutions posted here, but I didn´t find a solution. My Website is www.feuerwehr-frichlkofen.de and the password is "WebFF23". Can anyone help me with this?

52 minutes ago, Felix-FfFrichlkofen said:

I have tried to write my own code and tested some of the solutions posted here, but I didn´t find a solution. My Website is www.feuerwehr-frichlkofen.de and the password is "WebFF23". Can anyone help me with this?

Hi, what do you want to do exactly? Increase the logo size on the mobile menu? To how big? or something else?

On 10/29/2023 at 1:50 PM, melody495 said:

Hi, what do you want to do exactly? Increase the logo size on the mobile menu? To how big? or something else?

Yes, I want to make the mobile logo bigger. I do not know how big yet. I need to try what the ideal size is.
Edit: Sorry for the late Reply

Hi, you can try the below. Put it in Custom CSS.

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
}

Let me know how it goes.

On 11/11/2023 at 9:24 PM, melody495 said:

Hi, you can try the below. Put it in Custom CSS.

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
}

Let me know how it goes.

This works pretty good. The only issue im having is that the logo is not centred when made bigger. Do you have a solution for that?

On 12/3/2023 at 3:48 AM, Felix-FfFrichlkofen said:

This works pretty good. The only issue im having is that the logo is not centred when made bigger. Do you have a solution for that?

Try this

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
	margin: 0 auto !important;
}
.header .header-title--use-mobile-logo .header-mobile-logo {
	text-align: center !important;
}

To enlarge the mobile header logo, add the following code in Home > Design > Custom CSS:

.Mobile-bar-branding-logo {
    width: 250px !important;
}
 

On 12/4/2023 at 4:05 AM, tuanphan said:

Try this

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
	margin: 0 auto !important;
}
.header .header-title--use-mobile-logo .header-mobile-logo {
	text-align: center !important;
}

 

Sadly doesnt work. You probably misunderstood me: It is not centred on the y axis, it is centred on the x axis.

On 12/6/2023 at 5:08 PM, jansonbrock said:

To enlarge the mobile header logo, add the following code in Home > Design > Custom CSS:

.Mobile-bar-branding-logo {
    width: 250px !important;
}
 

This doesn`t work for me.

28 minutes ago, Felix-FfFrichlkofen said:

Sadly doesnt work. You probably misunderstood me: It is not centred on the y axis, it is centred on the x axis.

Can't check until I'm back at the desk, but it's probably currently centered from left to right of screen, but are you looking to center from left of screen to left of the burger menu?

On 12/3/2023 at 7:05 PM, tuanphan said:

Try this

.header .header-title--use-mobile-logo .header-mobile-logo img {
	max-height: 50px; /* change number to increase/reduce logo size */
	margin: 0 auto !important;
}
.header .header-title--use-mobile-logo .header-mobile-logo {
	text-align: center !important;
}

 

I've tried using some of these, and they didn't work. Can you take a look at mine and see what I should do? Much obliged! galvanpsychology.com

On 12/14/2023 at 5:58 AM, jen900 said:

I've tried using some of these, and they didn't work. Can you take a look at mine and see what I should do? Much obliged! galvanpsychology.com

Your mobile logo needs this code

img.Mobile-bar-branding-logo {
    width: 150px !important;
}

On 12/15/2023 at 3:24 AM, tuanphan said:

Your mobile logo needs this code

img.Mobile-bar-branding-logo {
    width: 150px !important;
}

 

thank you so much! sorry to bother you, i went through your links on custom css injection and i just don't understand exactly how to do it. do i just copy and paste it in the 16th line with the green { ? thanks again! 

On 1/9/2024 at 1:57 PM, jen900 said:

thank you so much! sorry to bother you, i went through your links on custom css injection and i just don't understand exactly how to do it. do i just copy and paste it in the 16th line with the green { ? thanks again! 

Under Line 16 or top of your CSS box

17 hours ago, tuanphan said:

Under Line 16 or top of your CSS box

thank you so much for all your help!! you're great

Hi @tuanphan - this worked well for me, except I need the logo to be the original color for the mobile menu only. Is there a way to fix this? I'm working on this page: https://studiofour10.com/delaney-burgess-realtor

Thanks!

On 3/9/2024 at 4:45 AM, KelseyLenz said:

Hi @tuanphan - this worked well for me, except I need the logo to be the original color for the mobile menu only. Is there a way to fix this? I'm working on this page: https://studiofour10.com/delaney-burgess-realtor

Thanks!

Change this your code

/* for mobile */
   .header-display-mobile img {
                content: url(https://static1.squarespace.com/static/5df1ccc904403d5b9e6b2245/t/65eb82b10327a4620f1aa377/1709933233851/Studio+Four10+Logo+%28Dark%29.png) !important;
            }

to this

/* for mobile */
body:not(.header--menu-open) .header-display-mobile img {
                content: url(https://static1.squarespace.com/static/5df1ccc904403d5b9e6b2245/t/65eb82b10327a4620f1aa377/1709933233851/Studio+Four10+Logo+%28Dark%29.png) !important;
            }