Sticky Menu

How can we get the menu within Alfesco become "sticky" at the top rather than scrolling off of the page?

Hi jm2webdesigners,

You can make the header menu sticky bu adding the following:

In your Themes/Alfresco/Content/Scripts/Alfresco.js add the following within the document ready event:

   

 $(".header-menu").wrap('<div id="headerMenuParent"></div>');

    stickyNav(".header-menu", "#headerMenuParent");
    
    $(window).on("scroll", function () {
        stickyNav(".header-menu", "#headerMenuParent");
    });

Open your Themes/Alfresco/Content/css/styles.css and add the following at the end of the file:

@media all and (min-width: 981px) {

    .header-menu.stick, .master-home-page .header-menu.stick {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        margin: 0;
        box-shadow: 0 2px 3px rgba(0,0,0,.2);
        text-align: center;
        padding: 0;
        width: 100%;
    }

        .header-menu.stick > ul {
            display: inline-block;
        }


        .header-menu.stick .mega-menu, .header-menu.stick .top-menu, .master-home-page .header-menu.stick .mega-menu, .master-home-page .header-menu.stick .top-menu {
            width: 980px;
        }
}


Hope that helps!

My clients and I have purchased both the Venture and Emporium themes, and would like to make these menus sticky as well.  I tried the code insertions above but they had no effect.

Can you help us?

Thank you!

Wayne

Hello Wayne,

the method described here is concerning a different theme and since most of the themes have different layout it cannot work in your case.

We saw that you submitted a ticket and we just replied to it, let us communicate there.