Better Responsive Logo without svg?

[tonari]

Hello,

i’m trying to have a better responsive logo, without the use of “width: ..%” because i can’t have a vector logo.
I’m almost good but i still have one issue.
When the menu is normal, i mean full, it’s ok, but when i scroll my page, i have a smaller menu, and here is my problem.

Here is the class for the normal menu: class=”kleo-main-header header-normal”
and for the small one: class=”kleo-main-header header-normal header-scrolled”

I have tried something like this:

COPY CODE

@media all and (max-width: 1441px) and (min-width: 1280px){
   #logo_img {
   display: block;
   margin-top: 4px;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 141px; /* Width of new image */
  height: 57px; /* Height of new image */
  padding-left: 141px; /* Equal to width of new image */
	background: url(https://www.yaffle.org/wp-content/uploads/2016/01/logoB2c3.png) no-repeat;
   }
}

That works, but i need to set my css changes only for the “normal sized” menu.

Thanks 🙂

[Laura]

Hello, use this class instead of #logo_img
.is-sticky #logo_img

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[tonari]

Hello Laura, thanks for your answer 🙂
I tried but that’s not working.
With the code from my first post i can change my logo for a smaller resolution, and for the normal menu, that’s ok, but i want to have another logo (or just hide what i change with the css i added) for the small sized menu.

[tonari]

Sorry, that’s fine!
I just have to use both classes one like this for my big menu #logo_img and one like this for the small one .is-sticky #logo_img

Thanks 🙂
Regards.

[Laura]

Glad it helped 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts