Mobile Header and Fixed Footer CTA

Home / Design General / Mobile Header and Fixed Footer CTA

Mobile Header - HTML

1. Create a Custom Hook

Dynamik > Custom > Hook Boxes

Name: responsive header
From Drop-Down Choose: genesis_after_header

2. Paste HTML:  
Change info in pink

<div class="responsiveheader">

<a href="homepage_url"><img src="http://mobile_header.jpg" alt="Business Name"/></a>

</div>

Tap Buttons - HTML

1. Create a Custom Hook

Dynamik > Custom > Hook Boxes

Name: fixed_footer_cta
From Drop-Down Choose: genesis_after_footer

2. Paste HTML:  
Change info in pink

<div class="fixed_footer_cta">
<a href="tel:555-555-5555"><div id="call" class="responsivecta"><img class="icon" src="phone-cta.png * " alt="call"/><p>Give us a Call<br></p></div></a>

<a href="sms:555-555-5555"><div id="text" class="responsivecta"><img class="icon" src="mobile-phone-cta.png * " alt="text"/><p>Send us a Text<br></p></div></a>
</div>

*  upload these images (mobile-phone-cta.png and phone-cta.png):

These can also be found in Design > BigWestTemp > zzz sample new client > business name > headers

Responsive Header - CSS

Add this to Main CSS (Dynamik > Custom > CSS):

.responsiveheader {
display: none;
}

.fixed_footer_cta {
display: none;
}

Paste this into Dynamik > Design > Responsive > Tablet Portrait Cascading @media query (4th)

#header {
display:none;
}

/* displays mobile header */
.responsiveheader {
display: inline !important;
max-width: 100%;
}

/* displays tap buttons */
.fixed_footer_cta {
display: inline !important;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
}

/* creates button effect */
.responsivecta {
padding: 10px 0;
color: #fff;
text-align: center;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
-webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .4), inset -2px -2px 2px rgba(0, 0, 0, .4);
}

/* tap-to-call background color*/
#call {
background: #;
float: left;
width: 50%;
}

/* change Give Us a Call font */
#call p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}

/* tap-to-text background color */
#text {
background: #;
float: left;
width: 50%;
}

/* change Send Us a Text font */
#text p {
color: #ffffff !important;
font-size: 20px;
font-weight: 400;
text-shadow: 1px 1px 1px #333;
}

/* phone & mobile phone icons */
.icon {
float: left;
padding-left: 10px;
width: 20px;
margin-top: -3px;
}

/* adds margin to footer so you can access all info with the buttons */
.footer {
margin: 0 0 50px 0 !important;
}

*** Because there are different versions of our sites out there, you might need to tweak some of these parameters.