Skip to content

#CSS Change the style of the View Selector in lists/libraries breadcrumb

As part of a site branding exercise the breadcrumbs that is displayed when a list or library is open on a view was causing issue. When hovering the current view name its font was bigger and the CSS was not obvious to target.

not good hover:

view_notgood2

(font is larger and little down arrow is moving to the left 2 pixels)

good hover: 

view_good2
Having spent a good hour on that single issue and Googled for solution, here is my finding for later reference.
[code language=”css”]
/* keep same font and position when hovering on view name */
.ms-ltviewselectormenuheader .ms-viewselector{
padding-bottom:0px;
padding-left:5px;
padding-right:3px;
padding-top:2px;
margin-right:0px;
}
.ms-ltviewselectormenuheader .ms-viewselectorhover A{
border:0px !important;
font-family: Verdana, Helvetica ;
color: #0060ad;
font-weight: normal;
background-color: transparent;
font-size: 9px;
text-decoration: underline !important;
background-image: none;
padding-bottom:0px;
padding-left:0px;
padding-right:3px;
padding-top:2px;
margin-right:0px;
}
/* down arrow to select view */
.ms-ltviewselectormenuheader .ms-viewselector-arrow{
margin:0px 5px 2px 0px !important;
}
[/code]
References:

Tags: