SharePoint 2013 with custom CSS, support for creation of Sticky NavBar in the MasterPage

Luis David Colón Vegas 121 Reputation points
2022-04-08T15:25:53.303+00:00

Hello community, i hope you all are very well.

Please, I would like to request a help with this:
My manager is requesting me to make the SharePoint navbar "sticky" to persist when you scroll down the page. This page has a custom css and i don't have too much skills to understand all the codes but i can somehow try.
Current view for the menu is this:
191442-1.png

Following https://www.w3schools.com/howto/howto_js_navbar_sticky.asp i have created a .js file and .css file (but i added to the core css to avoid using another file), i see the css is applying when i check with Chrome developer mode and also see in the sources the .js being called. I added in the masterpage the code to call the .js file above <div id="s4-workspace">, the CSS is already being call from an acsx file if i am right that's why i edited the core css file adding the sticky css so the JS can add or remove the class when user scrolls the page.
JS script call in the master page HTML:
191359-5.png

The problem is, when i force to apply in the id=NavBar or class=aed-navegation i see the bar becomes sticky but with some problems so i need the JS to be applied but is not working...
If i apply the css directly without being call with JS, this happens:
191340-2.png
|---
191418-3.png

Adding TOP:177px instead of "0px" seems to fit better but the bar and sub terms are covered by the content:
191452-4.png

Here you can see, i have added the ID and class to the navigation section in the Master page HTML:
191397-6.png

Find attached CSS, JS scripts:
191393-stickynavbarcss.txt | 191401-stickynavbarjs.txt

I hope someone can help me with this,i really want to learn and complete this challenge.
Thanks in advance.
Best regards,
LC.

SharePoint Server
SharePoint Server
A family of Microsoft on-premises document management and storage systems.
2,273 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,766 questions
SharePoint Server Development
SharePoint Server Development
SharePoint Server: A family of Microsoft on-premises document management and storage systems.Development: The process of researching, productizing, and refining new or existing technologies.
1,591 questions
0 comments No comments
{count} votes

Accepted answer
  1. RaytheonXie_MSFT 32,636 Reputation points Microsoft Vendor
    2022-04-26T08:08:20.647+00:00

    Hi @Luis David Colón Vegas ,
    Great to know that it works now and thanks for sharing the update here.

    By the way, since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others.". and according to the scenario introduced here: Answering your own questions on Microsoft Q&A, I would make a brief summary of this thread:

    [SharePoint 2013 with custom CSS, support for creation of Sticky NavBar in the MasterPage]

    Issue Symptom:
    How to make the SharePoint navbar "sticky" to persist when you scroll down the page

    Current status:
    Reference to following page: https://sharepoint.stackexchange.com/questions/248895/sticky-custom-nav-for-sharepoint
    Work with following script
    JS:

     $(document).ready(function(){   
         loadStickyMenu();  
         });  
              
         function loadStickyMenu() {  
         var  mn = $(".aed-navegation");  
         mns = "sticky";  
         hdr = $('header').height();  
              
         $('#s4-workspace').scroll(function() {  
         if( $(this).scrollTop() > hdr ) {  
         mn.addClass(mns);  
         } else {  
         mn.removeClass(mns);  
         }  
         });  
    

    CSS:

     /* The sticky class is added to the navbar with JS when it reaches its scroll position */  
     .sticky {  
         z-index:9999;   
         position: fixed;  
         top: 0;  
         left: 0;  
         right: 0;  
         background: #fff;  
         box-shadow: 0 1px 10px rgba(0,0,0,0.1);  
         width: 100%;  
     }  
          
     /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */  
     .sticky + .content {  
       padding-top: 60px;  
     }  
    

    You could click the "Accept Answer" button for this summary to close this thread, and this can make it easier for other community member's to see the useful information when reading this thread. Thanks for your understanding!

    0 comments No comments

2 additional answers

Sort by: Most helpful
  1. RaytheonXie_MSFT 32,636 Reputation points Microsoft Vendor
    2022-04-11T08:06:40.117+00:00

    Hi @Luis David Colón Vegas ,
    With CSS you can set it's position to fixed like following

    #navBar{  
    position:fixed;  
    }  
    

    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


    0 comments No comments

  2. Luis David Colón Vegas 121 Reputation points
    2022-04-18T10:52:34.37+00:00

    Hello,

    I have solved the problem using method on this page https://sharepoint.stackexchange.com/questions/248895/sticky-custom-nav-for-sharepoint
    The scripts worked nicely.

    JS:

    $(document).ready(function(){ 
        loadStickyMenu();
        });
    
        function loadStickyMenu() {
        var  mn = $(".aed-navegation");
        mns = "sticky";
        hdr = $('header').height();
    
        $('#s4-workspace').scroll(function() {
        if( $(this).scrollTop() > hdr ) {
        mn.addClass(mns);
        } else {
        mn.removeClass(mns);
        }
        });
    

    CSS:

        /* The sticky class is added to the navbar with JS when it reaches its scroll position */
        .sticky {
            z-index:9999; 
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: #fff;
            box-shadow: 0 1px 10px rgba(0,0,0,0.1);
            width: 100%;
        }
    
        /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
        .sticky + .content {
          padding-top: 60px;
        }
    

    Both scripts referenced in the Masterpage HTML correctly.

    Thanks.