Customized SharePoint Online Navigation Sample and Source code

How to change the look and feel of default SharePoint online navigation?
Here are the steps I went through to change the look of SharePoint online top navigation and  the end result after making the changes

1. I added two background images to site images folder.

2. I made changes to PrimaryNavFrame in theme.css files.  The background images are coming from url("../SiteImages/blue.jpg").
The end result in the navigation which you see above.  If you want different color, all you have to do is to change the background images and play around with the css files to make a unique top level navigation for SharePoint online site.

.MSC_PrimaryNavFrame
{
   
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    height:40px;
    text-transform:uppercase;
    font-size:13px;
    background:transparent url("../SiteImages/blue.jpg") repeat-x top left;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    width: 100%;
    margin: 1px 0px 5px 0px;
    text-align: left;
}

.rtl .MSC_PrimaryNavFrame
{
    text-align:right;
}

.MSC_PrimaryNavLink
{
    color:#ffffff;
    font-size:13px;
    text-decoration:none;
}
.MSC_PrimaryNavLink:hover
{
   
    background:transparent url("../SiteImages/black.jpg") repeat-x top left;
}
.MSC_PrimaryNavLink:visited
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
}
.MSC_PrimaryNavLinkFrame-On
{
    background: url(‘../SiteImages/black.jpg’);
    white-space: nowrap;
    padding: 5px 10px 5px 10px;
}
.MSC_PrimaryNavLink-On
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}
.MSC_PrimaryNavLink-On:hover
{
   
background:transparent url("../SiteImages/black.jpg") repeat-x top left;   
}
.MSC_PrimaryNavLink-On:visited
{
    color: #FFFFFF;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
}
.MSC_PrimaryNavLeftSpace
{
    width: 1px;
    white-space: nowrap;
    background: #FFFFFF;
    font-size: 1px;
}
.MSC_PrimaryNavRightSpace
{
    width: 1px;
    background: #FFFFFF;
    white-space: nowrap;
    font-size: 1px;
}
.MSC_PrimaryNavTopSpace
{
    height: 1px;
    background: #FFFFFF;
}
.MSC_PrimaryNavBottomSpace
{
    height: 1px;
    background: #FFFFFF;
}

Once you modify the changes, add your custom css files to your site

Reference Images