Customizing SharePoint Online Public Web Site Navigation bar


How to modify SharePoint online public web site navigation to different color or customize the look?
SharePoint online navigation comes from the theme.css files from resources folder. 

To modify navigation for SharePoint online public web site and open theme.css using SharePoint designer

modify_sharepoint_online_navigation

The other way to modify theme.css file is that you can edit the page and click on style sheet

edit-sytlye-sheet-in-sharepont-online-site

 

To modify the navigation, you need to edit the following css

.MSC_PrimaryNavFrame  ( Frame color of Navigation)
{
    background: #FF0000;
    width: 100%;
    margin: 1px 0px 5px 0px;
    text-align: left;
}

.MSC_PrimaryNavLinkFrame-On {
    background: #E3FAE7;
    white-space: nowrap;
    padding: 5px 10px 5px 10px;
}

.MSC_PrimaryNavLink-On {
    color: #325884;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
}

.MSC_PrimaryNavLink-On:hover {
    color: #325884;
    font-size: 12px;
    font-weight: bold;
}

.MSC_PrimaryNavLink-On:visited {
    color: #325884;
    font-size: 12px;
    text-decoration: none;
    font-weight: bold;
}

 

By default this is what you get when you create public facing web site using SharePoint Online

current-navigation-in-sharepiont-online

 

Once you make the changes, select apply custom css code to my web site and past the new CSS files

custom-css-code-to-sharepoint-online-site

In this demo, I changed the navigation PrimaryNavLink-On to Red

image

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s