Logo CSS override

scott74

Trying to not put a max height on the logo so I can have it bigger without stretching the container out but seems the theme  is overriding my important CSS

Explanation

https://www.loom.com/share/f2b5d60c58ae444c98aeedcb6d62df7d

Home page

https://staging2.campbellsecuritygroup.com/?preview_id=51&preview_nonce=2cdf4287ae&preview=true

Appreciate any help.

Pablo

Hello,

What you have problem with is specifity of CSS, you can make your CSS rule better by adding more detailed target of your CSS code.

More informations about specifity here, in the mozilla docs - I suggest looking there, in my humble opinion, the mozilla docs are really well-written.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

But, about the problem, I've added the 'html body' before your CSS code and it will work, it's all because of the specifity

html body #Top_bar .logo img{
  max-height:unset !important;
}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

scott74

ahhh... Thank you very much. Was driving me nuts.