Desktop logo VS mobile logo

[Plush]

Hi there,

My client wants the logo for desktop to be super large so I changed “header height” in the theme options to 300. On desktop this works perfectly. However, this made the mobile version have a huge black top and also broke the side menu option I had activated.

 

What I need is this:

Desktop version with very large logo on the top – no side menu just normal menu

Mobile version with smaller logo (as it is now) with side menu activated (as it is now)

 

So currently, the mobile looks great, exactly how they want it, but on desktop I had to put the logo back to 88px to make that work, so if you could send me a trick to only make the desktop menu now have a large logo, this would be great.

 

[Laura]

Hello, please try by adding this to style.css of child theme

COPY CODE

strong.logo {
    height: 150px;
}
strong.logo img {
    max-height: 100% !important;
}
@media (max-width: 991px) {
img#logo_img {
    height: 80px !important;
}
}

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 🙂

[Plush]

Ok that worked, sort of 🙂
Only the desktop logo needs to be like 300px.
So when I changed that i got this (see attached) so it goes over the menu bar text and even the page text.
Any idea what to do with that?

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, please change it so its like that and i fix it 🙂

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 🙂

[Plush]

This reply has been set as private.

[Laura]

Hello, try by adding this

COPY CODE

.menus-wrap {
    margin-top: 5%;
}

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 🙂

[Plush]

Perfect! That worked, thanks!

[Laura]

Happy to help! If you didn’t already, please rate us 5 stars at themeforest, that would help a lot 🙂

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