Front Page Menu same as Sub-Pages

Hi there,

Is there a way to change how the front page menu displays?

We would like to accomplish one of two options:

1) show the menu as soon as the user starts scrolling sown the page (not after clearing the header section).

and / or

2) displaying the same menu that is on the subpages on the front page.

Basically we do not like how the user has to scroll all the way down past the "header" module for the menu to show.

1. You need to edit file:
templates/gk_events/js/gk.scripts.js
and find this section:

Code: Select all

   if(jQuery('#gkHeaderNav').length > 0 && !jQuery('#gkHeaderNav').hasClass('active')) {      
      jQuery(window).scroll(function() {
         var currentPosition = jQuery(window).scrollTop();

         if(
            currentPosition >= jQuery('#gkHeader').outerHeight() &&
            !jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').addClass('active');
         } else if(
            currentPosition < jQuery('#gkHeader').outerHeight() &&
            jQuery('#gkHeaderNav').hasClass('active')
         ) {
            jQuery('#gkHeaderNav').removeClass('active');
         }
      });
   }


what it does - it adds aditional class to menu element when user scrolls below header section. By changing this 2 lines:

Code: Select all

currentPosition >= jQuery('#gkHeader').outerHeight() &&


and

Code: Select all

currentPosition < jQuery('#gkHeader').outerHeight() &&


to detect number of pixel scrolled:

Code: Select all

currentPosition >= 100 &&


and

Code: Select all

currentPosition < 100 &&


you can achieve desired result.

2. If you would like to make menu behave like on other pages, please edit file:
templates/gk_events/layouts/default.php
find line:

Code: Select all

<div id="gkHeaderNav"<?php if(in_array('frontpage', $page_suffix_table) === FALSE) : ?> class="static"<?php endif; ?>>


and modify it to:

Code: Select all

<div id="gkHeaderNav" class="static">


I like the 1. solution but is possible to see the menu without scroll down?or if is possible to insert a "scroll down menu" and if is possible to see the logo from begining

I found it:

<div id="gkHeaderNav" class="static active"> its beautifull

Is there anything else I can help you with regarding this topic?

Is there a way to accomplish the following on all sub-pages:

- Stop the logo from starting above the menu and then moving to the standard logo position once you start scrolling down the page?

Ideally we would like the menu be static with the logo to the left of the menu and not have the logo move around once you start scrolling.

So when your browser is on tom the menu should be visible?

Hi there,

We would like the menu to display like this at all times:


and not like this when the page loads:

Could you please post an url to your site?

Could you please post an url to your site?

http://dev.shed-solutions.ca

From what I see your page looks exactly like on the screen.

From what I see your page looks exactly like on the screen.

EXACTLY!!! We DON'T want it to function like this. We Would like it to be like the first screenshot at all times!!

The problem is not on homepage but on sub pages?

The problem is not on homepage but on sub pages?

Correct

Please edit: /templates/gk_events/css/override.css and add at its end:

Code: Select all

#gkHeaderNav.static {
top: 0px;
height: 73px;
}
#gkHeaderNav.static #gkLogoSmall {
left: -15px;
margin-left: 0;
position: relative;
top: 0;
}
#gkHeaderNav.static #gkMainMenu {
right: 0;
float: right;
top: 0px;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}


Remember to enable "CSS override" in template settings - advanced section.

Okay, thank you for your help up to this point... most things are working correctly.

The only problem we are having now is that the menu is cut off on the right part of our screen and is not visible (please note we are using a macbook pro... a little smaller screen).



Is there anything we can do to make the entire menu visible?

Please edit: /templates/gk_events/css/override.css and add at its end:

Code: Select all

#gkHeaderNav.static {
top: 0px;
height: 73px;
}
#gkHeaderNav.static #gkLogoSmall {
left: -15px;
margin-left: 0;
position: relative;
top: 0;
}
#gkHeaderNav.static #gkMainMenu {
right: 0;
float: right;
top: 0px;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}


Remember to enable "CSS override" in template settings - advanced section.

Code: Select all

#gkHeaderNav.static {
top: 0px;
height: 73px;
}
#gkHeaderNav.static #gkLogoSmall {
left: -15px;
margin-left: 0;
position: relative;
top: 0;
}
#gkHeaderNav.static #gkMainMenu {
right: 0;
left: auto;
float: right;
top: 0px;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}


This has not resolved the issue. The menu is still being cut off on the right side of the page on smaller screens.

Code: Select all

#gkHeaderNav.static {
top: 0px;
height: 73px;
}
#gkHeaderNav.static #gkLogoSmall {
left: -15px;
margin-left: 0;
position: relative;
top: 0;
}
#gkHeaderNav.static #gkMainMenu {
right: 0;
left: auto;
float: right;
top: 0px;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}


Please clear your browser cache.

We have tried that...

It seems as though when you resize the browser window to anything smaller than the maximum the menu does not adjust within the browser and starts cutting off the info on right side of the menu.

Please clear your browser cache.

What Browser (type and version) do you use? What OS?

Mac OS X 10.9
Chrome Version 36.0.1985.125

What Browser (type and version) do you use? What OS?

Please try Chrome in incognito mode - it works like a charm - same os, same browser, bigger screen, but I have tested reducing screen size down even to mobile version.