How to change the color of SharePoint 2013 SuiteBar?

Question

I have a custom master page and referring a custom CSS file, which is successfully implemented. but the suitebar is still referring the corev15.css file and i have tried changing color of the suite bar from my css file, but nothing happens. I have referenced the CSS in my masterpage as well.

CSS I USED

.ms-verticalAlignMiddle{
color: #444 !important;
}
.ms-tableCell{
color: #444 !important;
}
#suitebarleft{
background-color: #444 !important;
}

Masterpage edits added this in the head

<SharePoint:CssRegistration Name="/sites/search/Style Library/intranet.css" After="corev15.css" runat="server"/>

and then this

<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
        <!--SPM:<SharePoint:CssRegistration Name="/sites/search/Style Library/intranet.css" After="corev15.css" runat="server"/>-->

I just want to change the color of the suitebar from blue to black.

When I inspect the page I have

Then when I strike out I can see the changes I made

Now how do I implement this.

Answer 1

In the CSS you posted, you do not have the proper capitalization.

You want:

#suiteBarLeft

instead of

#suitebarleft

Answer 2

You can try adding the CSS directly into the master page

Just before </head>

Add <style>#suiteBarLeft...</style>