Sticky or Floating box in SharePoint 2013 site’s Sidebar

Summary : How to edit a SharePoint 2013 Master Page in SharePoint Designer 2013, Add Sticky or Floating box in SharePoint 2013 site’s Sidebar,How to add Sticky links in SharePoint 2013 site’s Master Page

Often we see Floating Widgets (Navigation or Follow us boxes) that moves as the page scrolls.These widgets are called Sticky or Floating boxes that can represent Important Navigation Links or sometimes messages for end users.

Implementing this in SharePoint 2013 is easier.All we need is a Custom Css and a some changes in site’s master page to insert the sticky box. The resulting box will look like below -

Sticky sidebar SharePoint 2013

The above Contact us Widget remains in the bottom left position even when the page is scrolled.You can replace this with menu items or file links etc.

Lets look at the detailed steps below -

1. Firstly, to modify a SharePoint 2013 master page you can either use the new Design Manager or the conventional SharePoint Designer 2013. Although I am very found of Design Manager, for this example, I will use SharePoint Designer 2013 to modify an existing master page of SharePoint 2013.

2. So, lets open the site in SharePoint 2013 Designer and then select “Master Pages” in the left Nav.

Master Page in SharePoint Designer 2013

Next open the seattle.html for editing (if possible make a copy of it and then open the copy).

SharePoint 2013 seattle.html

4. Before we go any further, lets just prepare our CSS file first.Open a notepad and add the following CSS

<style type=”text/css”>
#container {
min-height:100%;
position:relative;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background-color:#CCCCCC;
}
#footer p {
margin:1000;
padding:10px;
}
</style>

See the File here

Save the file with .css extension and upload it site’s master page gallery.You can also upload it anywhere in the site or in 15 hive.

5. To upload your CSS in Master Page gallery, follow the steps below.

Open sites Master Page gallery from site settings and add a new “Design File”.

SharePoint 2013 Design File

Next upload the CSS file and give it a name.
Sticky or Floating Sidebar CSS

Publish it as a Major Version.
CSS Publish Major Version

Finally, Copy the CSS file’s absolute url for adding it in master page.

6. ok so now we have the CSS ready lets make Changes to our master page.

In your seattle.html file, make the following Changes -

a) Add CSS reference in your master page.Look for “<!–SPM:<SharePoint:CssRegistration Name=”Themable/corev15.css” runat=”server” />–>” and then add your reference below it.

Add CSS Reference SharePoint 2013 master page

b) Next, add a Container div object for the body.

add :  <div id=”container”>
Add Container SharePoint 2013 master page

c) Finally, add footer and close the Container div before the </body> tag.

add :

<div id=”footer”>
<!– Footer start –>
<p style=”background-color:#66CCFF;”><strong>Need help? <a href=”#”>Contact us</a></strong></p>
<!– Footer end –>
</div>
</div>

footer in sharepoint 2013 master page

7. Next Save the html of master page and see the results in browser.

Sticky Sidebar in SharePoint 2013

Also see: How to add footer Message in SharePoint 2013 Master page


Related Posts

Disclaimer: The contents of this site are provided “AS IS”. Information and views expressed including URL(s) and other Internet website references, may change without notice. You bear the risk of using it. SharePoint, MOSS, SharePoint 2010, SharePoint 2013 and Microsoft are trademarks of the Microsoft Corporation.Learning SharePoint only provides Tips,Tricks and Tutorials for using Microsoft SharePoint, Microsoft Office and related Softwares.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.