RocketTheme - TOPIC: [Solved] Gantry floating menu?

Welcome Guest! Login

0 items Join Now

- Jeff S
- Sr. Rocketeer
- Posts: 136
- Thanks: 8
- MAD Media Production
SOLVED Gantry floating menu?

Posted 10 years 4 months ago
- Hi There,
  
  I am trying to make my fusion menu that currently is in module position rt-showcase under my main rt-header "sticky" to the top of the page once the menu reaches the top of the page - exactly like the Kunena menu does here.
  
  My site, ottawa.scionowners.ca is currently using Gantry v4.1.26 Gantry Framework Base Theme template and I am trying to set my menu to "stick" to the top of the page once the menu hits the top of the page. I have seen others (on the gantry framework) and for the life of me, I can't seem to get any of them to work correctly, if at all.
  
  This image is hidden for guests.
  Please log in or register to see it.
  
  What I don't seem to understand, is this menu "style" is used throughout RocketTheme's sites, but it is not a core feature of Gantry - how come? It would be nice to see this feature added to Gantry's core that allows you to make any module position sticky when it reaches a certain point on the page - ie, vertical or horizontal - if not for any module position, at the very least your menu module position.
  
  Any help would be greatly appreciated.
  
  Thanks,
  
  Jeff
- Last Edit: 10 years 4 months ago by Jeff S. Reason: double image attachment
- Jeff
  Maximum-Aperture.ca
#1164823
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Gantry floating menu?

Posted 10 years 4 months ago
- The menu here is bespoke and proprietry to RT site. Our more recent templates can do something similar called "scrolling header" but it's not identical in behaviour. To do what you're asking would require writing some JS code and that's beyond the scope of what we can offer in this support forum.
  
  If you wanted to just fix the menu at the top - I could help with that with CSS - but to make it change position dynamically would require JS as I said.
  
  Rest assured that we are building lots of nice new things into Gantry5, but we have no ETA for this as yet.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1164842
- Jeff S
- Sr. Rocketeer
- Posts: 136
- Thanks: 8
- MAD Media Production
Re: SOLVED Gantry floating menu?

Posted 10 years 4 months ago
- Hi MrT,
  
  Thanks for the reply. So, currently there is no template or option within gantry to utilize this functionality? So many sites now have a horizontal menu somewhere down the page that as soon as it hits the top it becomes sticky while the rest of the page scrolls underneath.
  
  I know that Osmosis incorporates a sticky side menu that activates as soon as the page hits a certain point, using either rokfixedsidebar.js and/or scrolling-header.js and Alerion has a side menu that goes sticky once it hits the top of the page using rt-floatingmodule.js and/or scrollspy-nav.js
  
  What I'd like to know, is how do I incorporate those features - whether it be javascript, or css and javascript to make my horizontal menu bar "sticky" once it hits the top of the page...
  
  I think this should definitely become a core feature of the gantry framework.
  
  Thanks again,
  
  Jeff
- Jeff
  Maximum-Aperture.ca
#1164911
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Gantry floating menu?

Posted 10 years 4 months ago
- Shibumi Design Studios wrote:
  So, currently there is no template or option within gantry to utilize this functionality?
  No there isn't.
  Shibumi Design Studios wrote:
  What I'd like to know, is how do I incorporate those features - whether it be javascript, or css and javascript to make my horizontal menu bar "sticky" once it hits the top of the page...
  This is considered as a customization request which falls way beyond the scope of this free support forum. You can always try to post your request in our The Marketplace forum and get (paid) support from someone that is willing to do this.
  Shibumi Design Studios wrote:
  I think this should definitely become a core feature of the gantry framework.
  It wouldn't be core framework - it would be roknavmenu and/or template - you can post this suggestions in the "requests" forum where it will be considered by the DEVS - that is where they look for ideas.
  
  Regards, Mark.
- Last Edit: 10 years 4 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1164934

Jeff S
Sr. Rocketeer
Posts: 136
Thanks: 8
MAD Media Production

Re: SOLVED Gantry floating menu?

Posted 10 years 4 months ago

Hi Mark,

Okay, thanks for that info.

So, that being said, is there any way to take the code that makes the vertical sticky menu in Alerion, add it to the default Gantry template and make it horizontal? Or... is there any template out there that has a configurable menu that would attach to the top once it hits the top of the page? Similar to the side menu bar in Alerion?

I want to achieve the same effect as the bespoke floating menu bar here in these forums.

It seems to use this format when you are at the top of the page:

<header id="rt-top-surround" class="animated scrollheader slideDown">
    <div id="rt-top">...</div>
    <div id="rt-header">...</div>
    <div id="rt-fullwidth">
        <div class="custom rt-kmenu-surround">...</div>
        <div class="clear"></div>
    </div>
</header>

with <header> changing to this when you start to scroll down:

<header id="rt-top-surround" class="animated scrollheader slideUp">

with this css code (pulled from Chrome Developer Tools):

/* rt-header-surround */
.kunena #rt-header-surround {
    height: 160px;
}
#rt-header-surround {
    height: 120px;
    background-color: #E5E5E5;
}

/* rt-top-surround class=animated scrollheader slideDown/slideUp */
#rt-top-surround.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    animation-name: slideDown;
}
#rt-top-surround.animated.slideUp {
    -webkit-animation-name: slideUp;
    -moz-animation-name: slideUp;
    animation-name: slideUp;
}
#rt-top-surround.animated {
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}
.kunena #rt-top-surround {
    border-bottom: 1px solid #ccc;
    box-shadow: none;
}
#rt-top-surround {
    background-color: #2b2f35;
    color: #F0F0F0;
    position: fixed;
    z-index: 1000;
    right: 0;
    left: 0;
    top: 0;
    box-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.animated.slideDown {
    -webkit-animation-name: slideDown;
    -moz-animation-name: slideDown;
    -o-animation-name: slideDown;
    animation-name: slideDown;
}

I'm sure there is more going on in the background, and I have seen this kind of setup for other sites as well... what else do I need to set this up on my site to have my menu in the showcase module position "sticky" when it hits the top?

Jeff
Maximum-Aperture.ca

#1165000

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Gantry floating menu?

Posted 10 years 4 months ago
- MrT wrote:
  This is considered as a customization request which falls way beyond the scope of this free support forum. You can always try to post your request in our The Marketplace forum and get (paid) support from someone that is willing to do this.
  
  It is not a straightforward way to do it with just html and CSS - you have to use JS too and it is more that we can offer in this support forum as it is a customisation.
  
  Regards, Mark.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1165005

Jeff S
Sr. Rocketeer
Posts: 136
Thanks: 8
MAD Media Production

Re: SOLVED Gantry floating menu?

Posted 10 years 3 months ago

So, after doing hours of research, and playing around and testing different methods, this is what I came up with:

This is using the div id #rt-showcase as the "floating" div - there were only a few other minor css modifications, like adding a width of 100% and a z-index of 99 to #rt-showcase

This jquery code (from  to ) gets added into your templates index.php just before the closing body tag - it makes use of joomlas /media/jui/js/jquery.min.js:

<head>
    .  
    .
    .
    <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
    <script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
    .
    .
    .
</head>
    .
    .
    .
    <div id="rt-showcase" style="position: relative; left: 0px; top: 0px; margin-left: 0px;">
        <div class="rt-showcase-pattern">
            <div class="rt-container">
                <div class="rt-grid-12 rt-alpha rt-omega">
                    <div class="rt-block menu-block">
                        <div class="clear"></div>
                        <ul class="gf-menu l1 ">
                            <li class="item101 active last">...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    .
    .
    .
    <?php /** Begin Popup **/
        echo $gantry->displayModules('login','login','login');
        /** End Popup **/ ?>

    <!-- inserted floating div code -->
    <script type="text/javascript">
    //avoid conflict with other script
    $j=jQuery.noConflict();
    $j(document).ready(function($) {

        //this is the floating content
        var $floatingDiv = $('#rt-showcase');
        var $mainContent = $('#rt-mainbody-surround');

        if($($mainContent).length > 0){
            var mainContentY = parseInt($($mainContent).offset().top) -40;
            var originalX = $floatingDiv.css('margin-left');

            $(window).scroll(function () {
                var scrollY = $(window).scrollTop();
                var isfixed = $floatingDiv.css('position') == 'fixed';

                if($floatingDiv.length > 0) {
                //$floatingDiv.html(" srollY : " + scrollY + ", mainContentY : " + mainContentY + ", isfixed : " + isfixed );
                //the above line is for testing purposes - it will overwrite any content in the div as soon as you scroll if uncommented

                    if ( scrollY > mainContentY && !isfixed ) {
                        $floatingDiv.stop().css({
                            position: 'fixed',
                            left: 0,
                            top: 0,
                            marginLeft: 'auto'
                        });

                    } else if ( scrollY < mainContentY && isfixed ) {
                        $floatingDiv.css({
                            position: 'relative',
                            left: 0,
                            top: 0,
                            marginLeft: originalX
                        });
                    }
                }
            });
        }
    });
    </script>
    <!-- end floating div code -->

</body>
</html>
<?php
$gantry->finalize();
?>

css changes:

#rt-showcase {
    height: 41px;
    position: relative;
    z-index: 99;
    width: 100%;
}

This image is hidden for guests.
Please log in or register to see it.

you can view it working at ottawa.scionowners.ca - built with the basic template included with Gantry. Still a few things that need to be worked on and finalized but it's been a site that is constantly evolving...

Last Edit: 10 years 3 months ago by Jeff S.
Jeff
Maximum-Aperture.ca

#1165587

- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
Re: SOLVED Gantry floating menu?

Posted 10 years 3 months ago
- Ok well I'm glad you found a solution and thanks for sharing it. I have to say though to me it's very "jumpy" and if you get anything in the drawer position (ie system messages) the jumping is even more pronounced - so I don't think it's a generic solution that can be applied to all sites - but if you're happy then that's good enough for me It' also does not seem to work very well at all viewport sizes (resize your browser window and you'll see what I mean).
  
  Regards, Mark.
- Last Edit: 10 years 3 months ago by MrT.
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
#1165604
- Jeff S
- Sr. Rocketeer
- Posts: 136
- Thanks: 8
- MAD Media Production
Re: SOLVED Gantry floating menu?

Posted 10 years 3 months ago
- Thanks Mark,
  
  Well, it is still a work in progress - I am always tweaking and re-working things - part of the problem of being somewhat of a perfectionist, I'm never satisfied!
- Jeff
  Maximum-Aperture.ca
#1165637

Time to create page: 0.093 seconds