How to increase mobile logo size?

[Gauravk]

Any clue how we can increase mobile logo size? By some backend settings or code edits?

[CoffeeCake]

You can adjust the theme's CSS. By default, the logo is 100% of the height of --responsive-header--height.

Perhaps you want the --responsive-header--height to be taller?

[Gauravk]

Yes please, any clue how to increase responsive-header for mobile?

These are the code I found in global.css for responsive-header

/* BOTH */
@media screen and (max-width: 979px) {

	#elSiteTitle, #elLogo{
		height: var(--responsive-header--height);
	}

		#elLogo img {
			max-height: var(--responsive-logo--height);
		}

	#elMobileNav{
		background: rgb( var(--theme-main_nav) );

 

[CoffeeCake]

You simply need to override the value for --responsive-header--height. The defaults are set in core > global > framework > _vars.css. You can put something in your custom.css that overrides the default value (which references the percent you enter in the theme settings, typically 100%).

What have you tried in your custom.css?

[Gauravk]

Can anyone please help on how to add below line in custom.css?

  --header--height: 100px;

I tried this and didnt worked.

Thanks in advance

Edited April 20, 2021 by Gauravk

[CoffeeCake]

On 4/9/2021 at 2:20 PM, CoffeeCake said:

You simply need to override the value for --responsive-header--height.