Clover - Code Tweaks

This page will be updated over time with small tweaks/customizations that you can make with the Clover theme.

Homepage

Parallax background image in Front Page 1

First make sure that you have a background image set for Front Page 1.
Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.

Increase height of the background image in Front Page 1

First make sure that you have a background image set for Front Page 1.
Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box. You can increase the 100px value to whatever height you'd like. Leave the second value (0) in place.

Vertical image carousel

Go to Appearance > Widgets. Open the widget area where your 17th Ave - Post Carousel widget is located (likely Front Page 1). Set the image size to featured-long.
Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.
If you'd like the slider to display a specific height, i.e. 700px, you can replace height: 100% with height: 700px (or your desired value).

Increase the height of the Footer CTA area

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.
You can change the 700px values to whatever height you'd like (note: both values should be the same).

Add a fourth Featured Page widget

By default, the Flexible Widgets in Clover will arrange the Featured Page widgets into two or three columns, depending on how many widgets you have inside any given widget area. If you'd like to include four Featured Page widgets instead (in four columns), here's what to do:

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box. (Note: If your Featured Page widgets are not inside Front Page 2, you'll need to replace clover-front-page-2 [all six instances in the code] with the widget area you'd like to modify. Example: clover-front-page-5)
Next, go to Appearance > Widgets and add an additional Genesis Featured Page Advanced widget to your preferred Front Page widget area. Configure the widget to match the others, and then you're all set!

Navigation

Change position of the split navigation after logo size has been changed

If you've uploaded a custom logo image and changed the display size, your split navigation menus may display vertically "off-center" relative to your logo. You can adjust the position of the menus with a code snippet:

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.
You can change the -100px margin value to whatever you need. Just keep increasing (or decreasing) the margin value until the navigation is positioned where you'd like.

Center the split navigation menu

By default, the split navigation menu display aligned to the edges of the header area. If you'd like the navigation to instead center around the header/logo area, that's possible with a simple code tweak.

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.

Center the top navigation menu

By default, the top navigation menu is left aligned. Here's how to center it. Note: Recommend removing the social icons and search icon when the top navigation is centered.

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.

Header

Modify logo size and position on mobile

If you changed your logo size on desktop, you may want to adjust the size on mobile as well.

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.
Inside the Customizer, you can click the phone icon to view the mobile version of your site. Then adjust the 180px and 60px values to whatever size looks best with your particular logo. Click Publish to save.
Note: If you need to adjust the vertical placement of your logo, there is a margin value included that you can adjust. To move the logo up, use a negative value (i.e. -5px) and to move the logo down, use a positive value (i.e. 5px).

Footer

Move footer subscription widget to the center

By default, the 3-column footer displays 2 menus on the left and a subscription widget on the right. If you'd like the subscription widget to display between the two menus instead, here's what to do:

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.
Go to Appearance > Widgets. Open Footer 2 and move the Navigation Menu widget into Footer 3 (right footer column).
Open Footer 3 and move the Genesis eNews widget into Footer 2 (middle footer column).

3 equal footer columns

By default, the 3-column footer displays in a 25% / 25% / 50% format. This code tweak will modify each column to be equal width (33%).

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.

Center the footer navigation menus

By default, the footer navigation menus will display left aligned. This code tweak will center the widget title and links in the navigation menu widgets in the footer.

Click here and copy the code.
Go to Appearance > Customize > Additional CSS and paste the code in the box.

Replace footer social icons with a navigation menu

By default, the bottom left footer in the Clover theme displays your social media icons. If you'd prefer to display a navigation menu there instead, we'll show you how in this tutorial.

Go to Appearance > Menus > Create a New Menu.
Add your desired navigation links to the menu. No more than 3 are recommended for this particular menu location. Click Save Menu.
Go to Appearance > Widgets. Open the Footer Social Icons widget area and remove any widgets that are inside that area.
Drag a Navigation Menu widget into the Footer Social Icons widget area. Select the menu you created in steps 1-2.
Lastly, click here and copy the code. Go to Appearance > Customize > Additional CSS.
Paste the code in the box. Click Publish to save.