0

hi I want to customize sharepoint top navigation bar to become transparent but i donot know how to use them in master page in sharepoint 2013 I want some thing like this http://codepen.io/Webspicer/pen/QwvRzM

0

Since you could not access the top nav bar directly from master page, you could see the selector of that navbar by using inspect element feature of your browser.

Then assuming you have already include all dependencies for bootstrap, in your javascript code you could add something like:

$(function() {
    // Add default styling to the top navbar
    $("#suiteBar").addClass('navbar');
    $("#suiteBar").addClass('navbar-inverse');
    $("#suiteBar").addClass('navbar-fixed-top');
    $("#suiteBar").addClass('opaque-navbar');

    // Check the scroll distance
    $('#s4-workspace').scroll(function() {
        if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
        {
            $('#suiteBar').addClass('opaque');
        } else {
            $('#suiteBar').removeClass('opaque');
        } 
    });
});
  • you mean i should put above code directly in seatle.master? – maria1368 Nov 28 '16 at 14:58
  • Sorry but have you tried to do customization on master page before? I you have not do that, I recommend you to read the following reference about creating a master page in SharePoint 2013: blog.navantis.com/creating-a-new-master-page-in-sharepoint-2013. If you have done customization on SharePoint 2013 masterpage before, then you could add those code on seattle.html (assuming you have already included all bootstrap dependencies), and save the page (it will automatically update the seattle.master). – AWJ Nov 29 '16 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.