Close

Sticky Menu

jm2webdesigners
3 years ago
#9605 Quote
Avatar
  • 4
PM
How can we get the menu within Alfesco become "sticky" at the top rather than scrolling off of the page?
Stefan
3 years ago
#9610 Quote
Avatar
  • Moderator
  • 157
PM
jm2webdesigners wrote:
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!
Best Regards,

Stefan Hristov
Nop-Templates.com
mtwaynew
21 days ago
#14926 Quote
Avatar
  • 1
PM
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
Valentin
19 days ago
#14928 Quote
Avatar
  • Moderator
  • 98
PM
mtwaynew wrote:
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.
Best Regards,

Valentin Kirov
Nop-Templates.com