Logo resizing when scrolling

Huski1

I have found other posts about resizing the logo for elicyon template which I have done - but on a large screen, if you scroll down and the menu bar moves to the top of the screen, the menu bar gets smaller, but the logo is still the same size. How can the logo resize to match the menu bar size?

Cheers

saguaros

Hi Huski1

You can override this CSS rule:

.affix .logo-image {
    height: 90px !important;
    line-height: 90px !important;
    width: 90px !important;
}

put into the file: [root]/templates/ja_elicyon/css/custom.css (Create this file if it doesn't exist).

Regards

Huski1

Thanks

Have tried that - it doesn't seem to over-ride. Have also uploaded a smaller image at 90px wide to see if that works. But no luck.

saguaros

Huski1 You can share the URL + super admin account so I can check.

Huski1

Haven't had the time to relook at this - and forgot to reply. You can see the website here https://www.ecomad.com.au/Ecomad2022/ and see how the logo is not working well once you start to scroll down.

Also if you check different screen sizes the website is pretty good, just doesn't look as good in the header and menu. Have a look on your phone in portrait. The logo is centred which is ok, but the menu 3 lines to expand drops down a line making the header too thick (black background).

Tried to do some custom.css to fix up but not having any luck.

Thanks

saguaros

You can try this custom css:

@media (min-width:992px) {
.affix .logo-control .logo-img {
    width: 90px;
}
.affix .logo-image {
    width: 160px;
}
}

Huski1

Thanks - that works great.