Change height in drop-down menu - gk-top.is-intro

Hi there,
I need to change the height of gk-top .is-intro, so when I scroll down it fully disappears.

I am using this code, but then it is always disappeared.

Code: Select all

 #gk-top {   
   top: -160px !important;} 

I need it only when its active but I don't know what to edit.

Can you help?

Could You please post an url to your site?

http://axia.edu.gr

I also need the anchor links to work correctly.
How can I add a value to the script, so it points some pixels above the object that is pointed, when I click on the anchor link?

Can you please help me on how to make it work?

Just edited gk.scripts.js with this code and it works. Is it the correct way to do it?
Because I tend to edit everything in override.css.

Code: Select all

'scrollTop': $target.offset().top -50

I also noticed that the anchor modification works correctly only in chrome. In firefox it doesn't take effect at all.

Is your site offline or something? I cant see its content (only intro page).

Yes it is and I have sent you a pm with my credentials.
But I managed to solve both of my problems...

The only problem now is that besides that, the anchor scroll works great by adding an offset to menu-elements in gk.scripts.js file, this doesn;t work when I am using a tablet. The mobile menu doesn't call the animate scroll script. How can I make the script work in tablets menu too?

1. Could you post the fixes you have made?
2. I'll test your site on the iPad.

Ok now I get it
For the mobile view (with mobile menu) the scrolling script was not designed to work. It works exactly same way on our demo server.

I dont want it to scroll in mobile view. I just want to navigate to the right position.

I have edited smothscroll script to gk.scripts.js by adding (-100) in the code given below:

Code: Select all

    // onDOMLoadedContent event
    jQuery(document).ready(function () {
        // SmoothScroll jQUery substitue
        jQuery('a[href^="#"]').click(function (e) {
            e.preventDefault();
            var target = this.hash,
                $target = jQuery(target);

            if ($target.length) {
                jQuery('html, body').stop().animate({
                    'scrollTop': $target.offset().top - 100
                    //'scrollTop': $target.offset().top   ORIGINAL
                }, 1000, 'swing', function () {
                    window.location.hash = target -100;
                    //window.location.hash = target;  ORIGINAL
                });
            } else {
                window.location.hash = target;
                // window.location.hash = target;   ORIGINAL
            }
        });

I edited this, because the dropdown menu is bigger than the default one (cause of my logo), and I had to make it disappear when I am at the top of the page.
Everything works perfect, but I dont know how to add an offset to (-100) to mobile menu links, because they dont use the scripts.

What I see on mobile when I press the menu link: ("About" title is above the logo dropdown menu and I need to show it using an offset)

That might be just impossible... But perhaps if you will understand why - then you will know what to do do make it better.
If you use # in the link the browser scrolls to html element with id that is after #tag, so:
http://yoursite.com/#footer
will scrill the top of html: <did id="footer"> to the top of the browser.

On the creativity template we have used sticky top menu, so we needed to somehow compensate for the area that sticky menu with given height occupies - thats why every module has this big top padding - when the browser scrolls to put top of the module on the top browser edge - the padding compensates for the difference that top menu makes.

Now on desktop mode, java script is used to scroll so you was able to correct the point where the browser scrolls to.
With the mobile menu - there is a simple link with # that browser moves to, without any fancy javascript animation. Now, your header is quite big (like 3 times bigger than original one) due to very big logo. So there is no way to compensate that much of space with use of padding on the modules - it will look bad.

I would suggest to use vertical version of the logo, or just making it smaller on the tablet/mobile view.

You could also try to rewrite mobile menu support to use advanced java script scrolling, but that kind of changes is beyond of our support.

Hope this info helped you a little.

You helped me a lot. I will change the logo just for mobile view and I am ok.

Thanks!

No problem.
If You will have any other questions, feel free to post new forum threads.