Quark Dark Logo v Regular logo in classic menu

Am trying, with no success, to have two image logos - one on the header, as a white logo with a transparent bg, and another in colour on the menu bar.

I would imagine that the choice of two logo options in the template backend would allow me to do just that - but it's not working.

Could you help?

Thank you.

Hello,

Which version of the template are you using?

Could you provide an URL to your website where you have set the two logotypes in the back-end?

Hi there,

Am on Quark v.1.1.2. PMing you the URL

Thanks again

PM is stuck in outbox.

Here's a screenshot of the backend

Please try to remove the dark-bg suffix from the frontpage under the features section in the template settings.

Hi - removed "ItemID 640 - frontpage dark-bg", absolutely no change

Please change function menu_scroll in gk.menu.js to:

Code: Select all

function menu_scroll() {
         var new_scroll_value = jQuery(window).scrollTop() >= 0 ? jQuery(window).scrollTop() : 0;   
         var local_diff = new_scroll_value - prev_scroll_value;
         var current = parseInt(page_nav.css('top'));
         var h = header.outerHeight() < 150 ? 150 : header.outerHeight();
         
         if(new_scroll_value >= h) {
            if(
               !page_nav.hasClass('gk-fixed-nav')
            ) {
               page_nav.addClass('gk-fixed-nav');
               page_nav.css('top', '-150px');
               current = -150;
               
               // Logo switching
               if(image_logo_exists && dark_logo_img) {
                  logo_img.attr('src', dark_logo_img);
               }
            }
         
            if(new_scroll_value >= prev_scroll_value) {
               page_nav.css('top', (current - local_diff >= -150 ? current - local_diff : -150) + "px");
            } else {
               page_nav.css('top', (current - local_diff <= -45 ? current - local_diff : -45) + "px");
            }

            logo_img.attr('src', dark_logo_img);
         } else {
            if(page_nav.hasClass('gk-fixed-nav')) {
               page_nav.removeClass('gk-fixed-nav');
               page_nav.css('top', 0);
               logo_img.attr('src', light_logo_img);
            }
         }
         
         prev_scroll_value = new_scroll_value;
      }

And please reverse logo images in the template settings.

Hi,
I have the same problem: I tried the dziudek solution, it works well, but at first load of the page, the logo image is black and not white, as I would like.
Any suggestions?
Thanks
Url site (in development) http://www.test.lamiaolivetta.it/

I have the same problem with putting the logo in the header and the traditional menu, but riding the logo.png the same size in the classic menu and overflows.
Besides the logo should be a different color to make it look in menu.

The truth is I do not understand (sorry my ignorance), which should make the changes indicated dziudek.

I would appreciate a more didactic explanation.
Many thanks for your patience moderator.
[url]reingenieria.co/quark5[/url]

@giuse74 - did you solved your issue? For me your logos are looking properly.

@zite7 - please open the js/gk.menu.js file and then please find function menu_scroll - please select the whole function and remove it, then please paste in the same place the mentioned code. After this change please go to the template settings and please reverse the logotypes images under the settings.

Dziudek Thanks.
I managed to mount the logo indicated on header but the logo on menu riding a little fallen, upload require a bit.
I thank you for help again

http://www.reingenieria.co/quark5

Now I notice that when I call the site the header logo appears small, then the lower and scroll up again strikes the right size

@dziudek - Yes I solved
I removed "ItemID 640 - frontpage dark-bg", and it works well.

Thanks

@zite7 - the logo in the topbar will be smaller, because there is no more space for it. The only thing which I suggest to reduce the top margin by adding the following CSS code:

Code: Select all

.gk-fixed-nav #gkLogo {
margin-top: 48px;
}