Initiate 'Open Menu' when clicking logo text

Hi,

When clicking on the logo text, it currently links to the sites homepage.

Instead, I would like it to 'Open the Menu' when clicking on it.

I'm struggling to find the file/code that I can edit to make this possible?

Would it be possible for one of you chaps to point me in the right direction?

GK_Writer_Logo_Text.png

Regards,
Ross

Could you please post an url to your site?

Yes, exactly what I'm trying to figure out as well.
The link seems to be coded / triggered with <span> tags probably connected to javascript (probably gk.menu.js), so it's hard to figure out what code is needed to open and close the menu slider. I would like the site name to open and close the menu system.

I think the coding is in the layouts folder, default.php, this part:

Code: Select all

            <?php if($logo_text != '') : ?>
            <a href="<?php echo JURI::root(); ?>" class="inverse<?php if($logo_two_lines == '1') echo ' two-lines'; ?>" id="gk-logo-text" ><span style="margin-left: -<?php echo $logo_indent; ?>px;"><?php echo str_replace('[br]', '<br />', $this->API->get('logo_text', '')); ?></span></a>
            <?php endif; ?>
            
            <span id="gk-menu-button"><span><?php echo JText::_('TPL_GK_LANG_OPEN_MENU'); ?></span></span>

Please help us.

Kind regards,
Marc

Could you please post an url to your site?

Ok, assuming you know what you are doing, as this is very strange idea (later about that)...
Please edit: /templates/gk_writer/js/gk.menu.js and just at the beginning

Code: Select all

jQuery(document).ready(function() {   
   jQuery('#gk-menu-button').sidr({
      name: 'aside-menu',
      onOpen: function() {
         jQuery('#gk-bg').addClass('menu-open');
         jQuery('#gk-menu-button').addClass('menu-clicked');


replace second line:

Code: Select all

   jQuery('#gk-menu-button').sidr({


with:

Code: Select all

   jQuery('#gk-menu-button, a#gk-logo').sidr({


and it should work right like you requested.

Now why I think this is a strange idea... Basing on default ux behave of most well designed pages logo always (99% of a time) links to homepage. So users usually click the logo not to open menu but to see the homepage. This way you are creating completely different experience, where user expect to have something different.
Perhaps you would consider to modify "menu bars" to display menu text above instead of the original idea? There is a thread on this forum dedicated to Writer template describing how to do it. Just use search.

Ooooh thank you so much !!!

I used the following code to do what I wanted to do and replaced with:

Code: Select all

 jQuery('#gk-menu-button, a#gk-logo-text').sidr({

instead of :

Code: Select all

 jQuery('#gk-menu-button, a#gk-logo').sidr({

It's the Logo Text that I wanted to use as a button to open and close the menu, and not the little logo on the top-left ;=)

Thank you again, such solutions are priceless !

I have one more issue that others may have also, it happens when I turn my phone landscape and scroll a little bit down.

The "Logo Text" appears in Landscape mode of my smartphone (HTC One) and it appears below the "3 dots" for the regular menu button.

In template.css I tried the following:

Code: Select all

a#gk-logo-text span {
   background-color:#c00 !important;
   z-index:999999;}

To see if I can hide the 3 dots with a white background color on the Logo Text, then I tried to add a high z-index to the Logo Text hoping it would end above the dots, but as these are not 'divs' I'm not surprised the z-index idea didn't work.

See screenshots, can you come with a solution that the "3 dots" dissapear when the Logo Text is visible in Landscape mode, or that the Logo Text has a higher z-index so that a white background color can be applied to hide the "3 dots" ??

Thanks in advance,
Marc

Actually you would need to create some @media-queries in css and target landscape specific. Then simply using display:none in css would allow you to hide the original menu.