CSS Styling Not Applying Sharepoint 2013

Question

I have a script I am trying to apply to the homepage of a SharePoint 2013 homepage. I have tried adding it in a CEWP and a script editor webpart with no luck. I have tried on 2010 sharepoint and it works perfectly. When I add the script to 2013 I receive no errors, the page simply does not do anything. I am trying to add a background color to the global navigation bar. See Script below :

DIV #s4-topheader2 {
    BORDER-TOP: 0px;
    BACKGROUND-IMAGE: none;
    BORDER-BOTTOM: #222 7px solid
}
.s4-toplinks {
    FONT-SIZE: 14px;
    FONT-FAMILY: "Helvetica Neue", Arial, Helvetica, sans-serif;
    BACKGROUND: #333
}
.s4-tn .menu LI A.static {
    BORDER-TOP: medium none;
    FONT-FAMILY: "Helvetica Neue", Arial, Helvetica, sans-serif;
    BORDER-RIGHT: medium none;
    BORDER-BOTTOM: medium none;
    COLOR: #ccc;
    PADDING-BOTTOM: 20px;
    PADDING-TOP: 20px;
    PADDING-LEFT: 20px;
    BORDER-LEFT: medium none;
    PADDING-RIGHT: 20px
}
.s4-tn .menu LI A.selected {
    BORDER-TOP: medium none;
    BORDER-RIGHT: medium none;
    BACKGROUND-IMAGE: none;
    BORDER-BOTTOM: medium none;
    MARGIN: 0px;
    BORDER-LEFT: medium none;
    BACKGROUND-COLOR: #222
}
.s4-tn .menu LI A.static:hover {
    TEXT-DECORATION: none;
    BACKGROUND: #444;
    COLOR: white
}
DIV #s4-searcharea {
    POSITION: relative;
    TOP: 17px
}

Ronak Patel Ronak Patel · Accepted Answer · 2016-06-13T12:06:23

Your CSS styles are working fine in SharePoint 2010 but not in SharePoint 2013 because the classes you used is for SharePoint 2010 & there are different classes for SharePoint 2013.

Go to your SharePoint 2013 Home Page and find the similar class names and apply your styles on those classes.

For example, for the top header bar, div ID in SharePoint 2013 is suiteBar ..

CSS Styling Not Applying Sharepoint 2013

1 Answers