9 AM - 9 PM

<style>.mobile_nav::after { content:'MENU'; vertical-align:top; line-height:1.1em; color: #000000; }span.mobile_menu_bar:before { color: #36BFF2 !important; } span.mobile_menu_bar:after{ color: #000000 !important; }.et_mobile_menu .menu-item-has-children > a { background-color: transparent; } #main-header .et_mobile_menu li ul.sub-menu.hide { display: none !important; visibility: hidden !important; transition: .7s ease-in-out; } #main-header .et_mobile_menu li ul.sub-menu.visible { display: block !important; visibility: visible !important; }.et_mobile_menu .menu-item-has-children > a:after { font-family: "ETmodules"; font-size: 15px; font-weight: 800; content: "3"; color: position: absolute; right:37px; } /* Font Awesome */ .fa { margin: 6px ; } @media only screen and (max-width: 980px){ #mobile_menu { display: block !important; min-height: 100vh; height: 100%; top: 0; right: 0; position: fixed; z-index: 9998; overflow: scroll; border-top: none; padding-top: 80px !important; } .et_mobile_menu li a { color: #ffffff !important; width: 46%; float: left; text-align: center; background-color: #e8e8e8 !important; padding: 15% 4%; margin: 1%; font-size: 1.1em; } .mobile_nav.closed #mobile_menu { background: rgba(51,51,51,0.95) !important; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; background: rgba(51,51,51,0.9) !important; } .mobile_nav.opened #mobile_menu { background: rgba(51,51,51,0.95) !important; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-overflow-scrolling: touch; -webkit-transition: -webkit-transform 0.4s 0s; -moz-transition: -moz-transform 0.4s 0s; transition: transform 0.4s 0s; } #main-header .container.clearfix.et_menu_container { width: 100%; } .mobile_nav.opened .mobile_menu_bar:before { content: "4d"; color: #fff; } } @media only screen and (max-width: 980px) { .et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; } #et-top-navigation { padding-right: 5px; } } @media only screen and (min-width: 481px) { #mobile_menu { width: 370px; margin-left: calc(100% - 370px); } } @media only screen and (max-width: 480px) { #mobile_menu { width: 320px; margin-left: calc(100% - 320px); } } @media only screen and (max-width: 340px) { #mobile_menu { width: 100%; margin-left: 0; } } </style>

Add Facebook Like Button to your Mobile Site

A great way to interact with social media is via a mobile site. In a previous post I showed you how to embed your twitter timeline (HERE) and for this post lets look at adding a Facebook like box.  Now since this is for mobile the width is going to be 300.

Go to https://developers.facebook.com/docs/plugins/like-button and follow the 3 easy steps.

For best mobile results, use width 300, layout standard, action type Like, Button size small and un-check show friends faces.

When you get the code, it will be in two parts. One for the header of the page you are placing it and the other in a text module for placement.

One plugin I use to get code into the header section is Addfunc Header and Footer Code. This plugin works great because it gives you the option to easily add code on any individual page/post.