GkTop module help

Capture_creativty_top.JPG

Hi there,

I am trying to work out where you can control the top or hiding position of the top module?

Or alternatively can I make the top module lower in height? I cant seem to work out how you control the height to either make it smaller or larger or this module in CSS.

In reference to my first question, I have attached a JPG. What I had done is put a bottom border on the top module of 35px, and because of this when the gkTop is hidden, it still shows some of the top module because the 'top' index position is controlled by some element not controlled by CSS. Can you please tell me where I adjust this from -100 to -120?

Thanks.

Hi

Im not sure if i understand but please try add this to CSS

Code: Select all

#gkTop.isIntro{top:120px !important;}

Is this what you are asking for?

Hi, thanks but that is not what I was looking for as what your suggestion does is make the gkTop in 120px.

In the templete.css there is a line below, but this does nothing. If you put an important on it, it will hide the menu which is no good. There is some core functionality somewhere where the gktop is being controlled/told to hide in the intro. I need to know where that is. Because I have basically increased the gktop size, so I need to increase the hidden or - top position of it. But it is not being done in the CSS files, it is somewhere else.

#gkTop.isIntro {
top: -200px;
}

Thanks,.

Be careful using negative values like "-200px;" - because they may looks good on desktop but not necessarily on mobile view, this template is responsive.
That's why I suggest to check on your smartphone and if case of problems use @meta, for example:

Code: Select all

@media all and (max-width: 720px)
 {
.......css code for mobile......
}

Probably you have read about it (CSS3).

I did not add that code, it is in the template but it has no function.

You are also not understanding what I am asking. There is some functional that is controlling that gkTop, and I need to know where or what CSS part is controlling it so I can adjust it. Please refer to my JPG from earlier as I circled the 'element' CSS that is being controlled by something.

Thanks.

Be careful using negative values like "-200px;" - because they may looks good on desktop but not necessarily on mobile view, this template is responsive.
That's why I suggest to check on your smartphone and if case of problems use @meta, for example:

Code: Select all

@media all and (max-width: 720px)
 {
.......css code for mobile......
}

Probably you have read about it (CSS3).

Hi

This style is attached to a layer directly. So it's done by javascript. All template javascripts can be found in /js/gk.scripts.js. The one You are looking for starts in line 169 and looks like this:

Code: Select all

   // menu movements
   if(jQuery('body').find('.gk-intro').length != 0) {
   
      var IS = jQuery('.gk-intro .gkIsWrapper-gk_creativity');
            
      jQuery(window).scroll(function() {
         
         var intro = jQuery('body').find('.gkIsWrapperFixed');
         var introh = intro.height();
         var pos = jQuery(window).scrollTop();
         
         if(pos >= 100) {
            jQuery('#gkTop').css('top', '0px');
         } else if(pos < 100) {
            jQuery('#gkTop').css('top', '-100px');
         }
         
         if(!Browser.ie8 && pos < introh && jQuery(window).height() > 1040) {
            jQuery(intro).find('.figcaption').css('top', Math.floor((1.0 * pos) / 8.0) + "px");
         }
         
         if(IS.length > 0) {
            if(pos > introh) {
               if(IS.css('display') != 'none') {
                  IS.css('display', 'none');
               }
            } else {
               if(IS.css('display') != 'block') {
                  IS.css('display', 'block');
               }
            }
         }
      });
   }