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