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

Question

question

luiscolon0 asked Apr 8, '22 RaytheonXie-MSFT answered Apr 26, '22

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

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:

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:

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:

|---

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

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

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-dev office-sharepoint-server-development office-sharepoint-server-itpro

1.png (2.1 MiB)

5.png (438.3 KiB)

2.png (2.8 MiB)

3.png (668.3 KiB)

4.png (2.1 MiB)

6.png (275.7 KiB)

stickynavbarcss.txt (373 B)

stickynavbarjs.txt (533 B)

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 1 · 2022-04-26T08:08:20.647Z

RaytheonXie-MSFT answered Apr 26, '22

Hi @luiscolon0 ,
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!

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 2 · 2022-04-11T08:06:40.117Z

RaytheonXie-MSFT answered Apr 11, '22 luiscolon0 edited Apr 11, '22

Hi @luiscolon0 ,
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.

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Answer 3 · 2022-04-18T10:52:34.37Z

luiscolon0 answered Apr 18, '22 RaytheonXie-MSFT commented Apr 19, '22

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.

· 1

5 |1600 characters needed characters left characters exceeded

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

RaytheonXie-MSFT · Apr 19 at 01:16 AM

Hi @luiscolon0 ,
Glad that you found the solution to this problem. Thanks for your sharing.

0 ·

question