after upgrading to 4.5 beta 8 issue in logo

[DoorMadeEasy]

after upgrading i notice issue in the logo size  in my website so i go  to the  themes setting and Logo and i try to change the  Logo Height but give me some messages

 

Quote

 The value must be smaller than 100.

 any idea ?

[Larry]

That is a percentage field so it only goes up to 100. It wants to know the height of the logo image relative to the header bar, in percent.

[bfarber]

You can adjust the height using pixels by editing the CSS variable instead if that works better for you.

[RocketStang]

On 7/15/2020 at 10:25 AM, bfarber said:

You can adjust the height using pixels by editing the CSS variable instead if that works better for you.

@bfarber Where can I find the CSS to change logo height?  I liked he pre-beta8 settings way better...

[Davyc]

Use the below in your custom.css file - you can change the height element to either pixels or percentage whichever suits you best and you can change the width too if necessary.

.sMainHead__logo {
    max-width: 230px;
    height: 150%;
}

If you're using a custom theme, then the above may be a different element.

🙂

 

[RocketStang]

@Davyc Tried it but it didn't change anything??

[Davyc]

Are you using a theme other than stock?

Can you provide a link to your site and then I can check to see what element needs to be changed?

[RocketStang]

It's default with color edits only...

https://7173mustangs.com/ipstest/

[Davyc]

OK add this to your custom.css file:

#elSiteTitle, #elLogo {
    margin-top: 10px;
    margin-bottom: 10px;
    height: 150px !important;
}

Change the height to whatever your logo height is, or a percentage thereof in pixels (don't use percentage sign %).

The margins can also be adjusted to suit - just gives the logo a little breathing room.

 

Edited July 18, 2020 by Davyc

[RocketStang]

That worked!  Wonder what changed? My default light theme works fine with the larger logo??

[Davyc]

Different themes may have different element names - finding the correct CSS to change will depend on what changes the theme developer has made; therefore, some CSS changes won't work globally for all themes. Finding the correct element is usually done using the browser console, make the changes in the console and see if the changes you expect actually happen 🙂

 

[RocketStang]

Yes, that is what is weird though...my light and dark theme are both default however, I created the dark theme around beta 8 so it is probably different than the beta 1 light theme.

Thanks for the help @Davyc

[bfarber]

You should be able to change the height by adding something like this to your custom.css

:root {
	--logo--height: 100px;
}

by default it's a percentage based on the AdminCP theme setting, but you can override it with a hardcoded pixel height.

[MrKeiKun]

On 7/20/2020 at 10:47 PM, bfarber said:

You should be able to change the height by adding something like this to your custom.css

:root {
	--logo--height: 100px;
}

by default it's a percentage based on the AdminCP theme setting, but you can override it with a hardcoded pixel height.

This made the logo bigger but it went pass through the whole navigation menu.