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
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
Copy and Paste this:
.site-header {display: none;}
.phonebutton {
display: inline;
}
8. Update CSS under Advanced Options > Custom CSS
Copy and Paste:
.phonebutton {display: none;}
That should be it.