Need to avoid overlapping the logo and the main menu at the top banner area

[hotspring]

Hello,

The logo is overlapping with the main nav at the top banner area. I would like to shrink the size of the logo when it starts overlapping.

thanks,

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Its working fine here so please check after clear cache or another machine.
Thanks

[hotspring]

I don’t think it’s working. I tested on different machine and different browsers. I still see the overlapping like the attached.

It only works when I scroll down (I set it to shrink the logo when the main nav gets sticky at the top)… but It’s still overlapping on top of the main nav, when you resize your browser window from wide-width to medium-width (you can try to veiw on iPad in Landscape view. make sure that you are all the way at the top of the page.)

So I like to shrink the logo when you resize your browser window from wide-width to medium-width without scrolling.

thanks,

[Mohammad – SUPPORT]

Hi,
Which browser are you using? What is your screen size?
Thanks

[hotspring]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

We will have to forward this one to the Developer. Let’s wait for his reply.
Thanks

-Rui

[Swift Ideas – Ed]

Hi there,

Best I can suggest for this is to reduce the menu item padding at this viewport size, you can do so with the following custom css:

@media only screen and (min-width: 768px) and (max-width: 991px) {
nav#main-navigation .menu > li, .header-4 #main-navigation .menu > li, .header-5 #main-navigation .menu > li, .header-7 #main-navigation .menu > li {
padding: 0 4px 20px;
}
}

Hope that helps.

– Ed

[hotspring]

thank you.

[Mohammad – SUPPORT]

Hi,
You most welcome. I’m glad that issue resolved. Thanks Ed. 🙂
With Best Regards
Mohammad