Page suffix, logo switch

Hi
I'm still struggling to get the logo switch to work in Quark.
This is what I have:
Two logos added:
Logo Image: Logo with white text
Dark Logo Image: Logo with dark text - (which is what will show in the menu bar on white background)

When I scroll down on all pages, no matter what suffix is set on pages I get dark menu text on the white background and the logo from the field Dark Logo Image - all good so far

In the header is where it goes wrong:
Frontpage with added suffix "frontpage dark-bg" = I get white menu text and the logo I want to use on light background - logo with black text - not correct combination!
Second page: added suffix "dark-bg" = I get white menu text and the logo I want to use on light background - logo with black text - not correct combination!
Third page: no suffix = I get white menu text and the logo with dark text - not correct combination! (text is white due to the automatic adding of "dark-bg" suffix) So basically no change if I use "dark-bg" suffix or not.

If I remove the automatic add of "dark-bg" suffix I get:
Frontpage with added suffix "frontpage dark-bg" = I get white menu text and the logo I want to use on light background - logo with black text - not correct combination!
Second page: added suffix "dark-bg" = I get white menu text and the logo I want to use on light background - logo with black text - not correct combination!
Third page: no suffix = I get dark menu text and the logo with white text - not correct combination! So opposite problem from before.

The menu bar when I scroll down is correct in both scenarios - dark text in menu and "Dark Logo Image" - correct combination!

So whatever I do I seem to have problems getting the logo to match with the menu text color in the header.
I would like to be able to switch between light and dark header images and have appropriate menu text color and logo image. Dark text and logo on light images/background and white text and logo on dark images/background - straight forward really.

Hope someone can guide me to get this to work correctly - I like the Quark template for many reason, but this logo/menu text color mismatch really drives me nuts...just can get my head around it...

My website is under development, but happy to provide a login.

Hi

Please tell me the url to the exact page with an example of this issue.

I have sent a private message - thanks for looking into this!

I have sent a private message - thanks for looking into this!

I have sent two private messages but they seem to be stuck in the outbox - did you receive them?

I have opened the site so everyone can see the issue even though it's far from completed and has no real content.. http://nudomagazine.com

I have removed the automatic adding of the dark-bg suffix to avoid more confusion.

I have edited the gk.menu.js which now means that after scroll down and back up to the top of the page the logo change to the correct one - which it did not do before edit. Still when initially clicking any of the menus the logo and menu text color are opposite - light - dark - where they should be light - light or dark - dark depending whether the suffix dark-bg is used or not.

This is what I changed - line 171 and 173 I switched light_logo_img and dark_logo_img to what you see here:



Here examples:
The home page has dark-bg suffix
Here at the top of the page:


Scrolled down mid page - menu changed correctly


Scolled back up to the top - now the logo changed to the correct one and match the menu text


Menu Submission have no suffix - so used for light background
Initial entering the page - logo is wrong and menu text correct


After scrolling down and back up - logo changed and are now correct.


Anyone have ideas how to get the logo switch to work properly?

Thanks!

I have the same problem and need a solution too. Thanks in advance...

Hi

Indeed I'm not getting PM notifications. Please send me an access to joomla panel and ftp so I'll take a look at it. My mail is [email protected]

I have send details to your gmail.

Thanks!

Hi

Problem reported to programmers. I'll let You know as soon as they will reply.

Hi

Programmers have added this:

Code: Select all

if(image_logo_exists && page_nav.hasClass('gk-fixed')) {
            if(dark_logo_img && dark_bg_class) {
               logo_img.attr('src', light_logo_img);
            } else {
               logo_img.attr('src', dark_logo_img);
            }
         }


before:

Code: Select all

jQuery(window).scroll(menu_scroll);


to overwrite Your changes. Please check if it worked.

Hi,
Yes, the switch now works as it should - fantastic! Thanks a lot for the effort to get this fixed.

I copies the changes to one of my other Quark site and it now work as well. Great - I can now switch from Text logo to image logo on all my Quark sites.

Two files is changed:
default.php in layouts
gk.menu.js in js

So the changes are to remove the automatic add of suffix dark-bg so you can control when its added by adding it in the features tab in the template manager. You do that by adding // to line 108 in default.php in layouts
// $dark_bg = ($one_page_item || $category_page) && !$tag_style_page && !$item_id == $error_item_id ? ' dark-bg' : '';

In the gk.menu.js file the //Fixed menu section should look like this:

// Fixed menu
if(jQuery('#gkHeaderNav').hasClass('gk-fixed')) {
var header = jQuery('#gkHeader');
var page_nav = jQuery('#gkHeaderNav');
var prev_scroll_value = 0;
var logo_img = jQuery('#gkLogo').find('img').first();
var image_logo_exists = jQuery('#gkLogo').find('img').length;
var dark_logo_img = logo_img.attr('data-dark');
var light_logo_img = logo_img.attr('data-light');
var dark_bg_class = jQuery(document.body).hasClass('dark-bg');

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");
}
} else {
if(page_nav.hasClass('gk-fixed-nav')) {
page_nav.removeClass('gk-fixed-nav');
page_nav.css('top', 0);

// Logo switching
if(image_logo_exists) {
if(dark_logo_img && dark_bg_class) {
logo_img.attr('src', light_logo_img);
} else {
logo_img.attr('src', dark_logo_img);
}
}
}
}

prev_scroll_value = new_scroll_value;
}

if(image_logo_exists && page_nav.hasClass('gk-fixed')) {
if(dark_logo_img && dark_bg_class) {
logo_img.attr('src', light_logo_img);
} else {
logo_img.attr('src', dark_logo_img);
}
}
jQuery(window).scroll(menu_scroll);
}
});

Hi

Thank You for summing it up. I'm sure it will help someone who may have experienced such problem. Leaving this thread open in case of some new development or users looking for an advice.