Kwoon CSS Tweaks

Here we will be covering small CSS tweaks for Kwoon. All CSS customizations are to be added to the themes built-in custom CSS area (Appearance > Customize > Style Settings > Custom CSS)

Hiding The Page Title Search Bar

.light-wrapper.page-title .searchform {
    display: none;

Replace the background of the page title area

To replace the background colour of this area within an image (which will stretch to cover the area neatly) use the following in your custom CSS area

.light-wrapper.page-title { 
  background: url(URL TO YOUR IMAGE HERE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

To replace just the background colour, use this instead.

.light-wrapper.page-title { 
  background: pink;

Depending on the background you may want to make the title light, instead of dark - for visibility, so use this

.light-wrapper .page-title h1.pull-left { 
  color: #fefefe;

Display The Upper Header Bar on mobiles/tablets

To display the information such as phone number and social icons, add this to your custom css area

@media only screen and (max-width : 768px) {
    .navbar .top-bar {
        display: block;
    .navbar .top-bar .social.pull-right {
        float: none !important;
        text-align: center;

Remove The ZigZag Below Titles

To remove the zigzag from below the section titles, simply use this in your custom css area

.main-title.text-center:after {
    visibility: hidden;