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.

    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?

    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?

      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

        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.

          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;}}

          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?

            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;}}

            to

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

              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 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 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 🙂

                7 days later
                Write a Reply...
                You need to Login to view replies.