2 different logo sizes

loonmei

I would like to use 2 different logo sizes - 1 big on the top (Center), and another smaller (main menu when scrolling down), how can I configure that?

Thanks.

teitbite

loonmei Hi. First of all please tell me which logo You wish to replace? Because I can see You are already using one image for top center menu and a different one for the smaller left to menu. Is this issue resolved already?

loonmei

Thanks for you reply,

Actually I want to add a bigger logo at the top center and when scroll down there was a smaller logo at the left main menu bar. In the mobile version, the hand phone will display the small logo too.

I failed to do that so i placed the logo image at the module Banner Top and the mobile version didn't show the small logo. How to display the logo in hand phone?

aman204

loonmei I failed to do that so i placed the logo image at the module Banner Top and the mobile version didn't show the small logo. How to display the logo in hand phone?

Try add this to override.css file (don't forget to enable override from Template Options -> Advanced tab): :

@media only screen and (max-device-width: 640px) {#gkBannerTop{display:block !important;}}

Kindly ensure to clear your browser cache if changes dont reflect

loonmei

thanks aman204
It's works.
But can I place the logo same line with the menu bar. ie Left is logo and right is menu so that when scroll down still can show the logo.

teitbite

loonmei Hi. On mobile on the left from hamburger menu item. You have a mobile position called "social" Yoou may try to place logo there. And use this code to show it on mobile only:

@media only screen and (min-device-width: 640px) {#gkSocial{display:none !important;}}

loonmei

Thanks@teitbite#63678
yes, it was place same line with hamburger menu item. When i scroll down, the logo was disappear, can I make the logo display as the hamburger menu item?

aman204

loonmei When i scroll down, the logo was disappear, can I make the logo display as the hamburger menu item?

Try change the above CSS from :

@media only screen and (min-device-width: 640px) {#gkSocial{display:none !important;}}

@media only screen and (min-device-width: 640px) {#gkSocial{display:block !important;}}

loonmei

Thanks aman204

How to place it at the center?

aman204

loonmei How to place it at the center?

To be more precise and avoid confusion/ambiguity in addressing your query, Kindly provide screenshot marked with annotations showing where you wish to show it in responsive mobile mode

loonmei

teitbite

loonmei Hi. I still cannot see the small logo on mobile portrait. Have You published the image in social module position already?

For the bigger screens here is a code to center it:

media="(max-width: 840px)"
#gkBannerTop {
    margin: 15px auto;
}
}

loonmei

Thanks teitbite

aman204

loonmei Kindly let us know if all queries to relative topic have been resolved so as to mark the thread as resolved or need further assistance on the same 🙂