3.2.0 logo sizing

[solidus]

In previous versions I did this to resize the logo, but it no longer works in 3.2.0.
I see this in peafowl.css

        .top-bar-logo, .top-bar-logo img {
            height: 40px;

I've modified height but no change. How can I fix this.
Site: http://gfxf.net (logo is way too small as you can see)

Thanks.

 

[Rodolfo]

Use the css file from app/theme/Peafowl/custom_hooks

 

[BMWracing]

What do you mean with custom hooks Rodolfo?

I modified the lib\Peafowl\peafowl css file and was able to change the size just fine 🙂

I changed these:

.top-bar-logo, .top-bar-logo img {
height: 45px;
}
@media (min-width: 992px) {
.top-bar-logo {
margin-top: -10px;
}
.top-bar-logo, .top-bar-logo img {
height: 45px;

Works fine.. see both my sites below.

 

[Rodolfo]

There is a file in the folder app/theme/Peafowl/custom_hooks that is called "style.css". In that file you should put your custom CSS if you want to work in the default theme and not fork anything.

 

[BMWracing]

Thnx Rodolfo, so should I copy the lib\peafowl\peafowl css file to this folder with my modified changes and replace the original? Will it then automaticaly use my css?

 

[Rodolfo]

Nope. Your CSS changes must be in custom_hooks/style.css. All of them. Is not just copy peafowl.css to that place, that won't work.

 

[Muqadas.Wattoo]

Ok I tried this code and used custom_hooks/style.css. On desktop logo position is perfect but on mobile (iphone) it's on the below picture. I mean margin from top isn't fine. If I change the margin and set it for mobile then in desktop it's too high on the header. Check on hostselfie.com

 

[ChainKiller]

You need to edit the @media part too:

@media (min-width: 992px) {
        .top-bar-logo {
            margin-top: -10px;
        }
        .top-bar-logo, .top-bar-logo img {
            height: 20px;
        }
    }

This is for screens smaller than 992px.

 

[Muqadas.Wattoo]

Currently I use this:

.top-bar-logo, .top-bar-logo img {
height: 42px;
}
@media (min-width: 992px) {
.top-bar-logo {
margin-top: -20px;
}
.top-bar-logo, .top-bar-logo img {
height: 42px;

Can you tell me where to change?

 

[ChainKiller]

I checked your style.css and i get this:

.top-bar-logo,.top-bar-logo img{height:42px;}@media (min-width: 992px) {.top-bar-logo{margin-top:-20px;}.top-bar-logo,.top-bar-logo img{height:42px;

Check your style.css and if it's the same as the above you need to close the curly brackets {}.

 

[Muqadas.Wattoo]

Already put brackets and nothing changed.

 

[ChainKiller]

My bad "@media (min-width: 992px" is for screens bigger than 992px.
Just add margin-top: -10px; to .top-bar-logo,.top-bar-logo img in style.css

 

[Muqadas.Wattoo]

This is awesome now. Thanks alot mate.