How To Make Catalyst Fixed Width Site Responsive

1. Catalyst > Core Options > Content > Check: Activate Responsive Design Options in Dynamik

2. Disable RCI Mobile Plugin if necessary

3. If there is a slider make sure it is Soliliquy NOT Nivo. And make sure the EZ Home Slider Plugin height is set to: auto

4. For the Header Image: Catalyst > Dynamik Options > Header > Set Header Background to Transparent

5. For Header Dimensions set height to: auto

6. Create 2 new Hooks in Catalyst > Advanced > Custom Hook Boxes

Screen Shot 2016-03-03 at 7.17.37 AM

You can copy and paste these codes and change urls and phone numbers:

<a href=”http://website.com/”><img src=”http://website.com/wp-content/themes/dynamik/css/images/header.jpg” width=”100%” /></a>

<a href=”tel:1-555-555-5555″><center><img class=”phonebutton” src=”http://website.com/wp-content/themes/dynamik/css/images/mobileheader.jpg”></center></a>

6. Under the Dynamik Options > Images you will need to copy and paste the path of the header image file to the hook. Then create a mobile header jpg and upload. Then copy and paste the path into the hook.

7. Update the last two Responsive options under Design Options > Responsive Tab

Screen Shot 2016-03-03 at 7.22.19 AM

Copy and Paste this:

.site-header {display: none;}
.phonebutton {
display: inline;
}

8. Update CSS under Advanced Options > Custom CSS

Screen Shot 2016-03-03 at 7.26.38 AM

Copy and Paste:

.phonebutton {display: none;}

 

That should be it.