SharePoint Online: Some CSS Tidbits

For this post, I just wanted to pass along some CSS tidbits I have been using lately on SharePoint Online sites. See below. I have also included a brief explanation in parenthesis next to each comment. Hope you find these helpful.

/* Hide Global Navigation */ (Hide the global, or top level, navigation bar)
#zz11_TopNavigationMenu {
display: none !important;
}
#zz12_TopNavigationMenu {
display: none !important;
}
/* Hide Page Title */ (Hide the page title next to the site logo)
#pageTitle {
display:none;
}
/* Header Banner */ (Use an image to act as the site header banner, and size it as needed)
#s4-titlerow {
background-image: url('/sites/sitename/PublishingImages/image.jpg') !important;
    width: 100% !important;
    height: 53px !important;
    background-repeat: repeat !important;
    }
/* Site Logo Size */ (Increase the size of the logo on the site)
.ms-siteicon-img {
max-width: 281px;
max-height: 60px;
}
/* Search Bar */ (Change the background color of the search bar on the site)
.ms-srch-sb {
background-color: white;
}
/* Web Part Headers */ (Change the background color of the web part headers, and the font size, color, and weight (bold) of the web part titles)
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {  
background-color: #BEBEBE;
font-size: 18px;        
font-weight: bold;      
color: #0072c6;        
padding: 5px 5px;    
}

Note: I recommend you use these styles in an external style sheet on your site and reference it in your master page.