I tried the edit that you mentioned however the social media icons still disappear around 770 pixles and the top content bar with the phone number adjusts to the center. This switch with the top bar text moving to the center and the icons disappearing should take place around 660pixles. Any help cleaning up this code would be greatly appreciated. Thanks

font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}
body { font-size: 16px; }

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen 
 and (min-width: 584px) 
 and (max-width: 1200px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
display: block;
}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
display: none;
}}

@media only screen
  and (min-width: 584px)
  and (max-width: 1200px) {
ul.noLightbox.social_bookmarks.icon_count_4 {
left: -60px;
display: block;
}}

I am very close the mobile media makes a switch at 780pxls that makes the social media icons disappear is there a way to set this to a lower number as the code you provided does not work below 780 pxls. Can you review the current coding that I have provided and let me know if the header looks good in addition to providing the code to make the social media icons appear past a number below 780pxls? Thanks for your help!

.ui-datepicker-title select { padding-right: 17%; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}

p { font-family: 'PT Sans' !important; }

.grid-entry-title.entry-title {
font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}

body {
  font-size: 16px;
}

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen and (min-width: 584px) and (max-width: 1200px) {
.container #advanced_menu_toggle, #advanced_menu_hide {
display: block;
}
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
display: none;
}}

@media only screen
  and (min-width: 584px)
  and (max-width: 1200px) {
ul.noLightbox.social_bookmarks.icon_count_4 {
left: -60px;
}}

I have tried multiple facebook plugin ins including enfolds and every one of them results in the same error message

Error: This Page has not been published.

I have the following quick cc code

.ui-datepicker-title select { padding-right: 17%; }

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}

p { font-family: 'PT Sans' !important; }

.grid-entry-title.entry-title {
font-size: 20px;
font-weight: bold;
text-align: center;
}

.content, .sidebar {
padding-top: 10px;
padding-bottom: 10px;}

body {
  font-size: 16px;
}

.phone-info span { font-size: 16px; }

.main_menu .menu ul { width: 235px; }

#top div .avia-gallery img { border-style: none; padding: 0; }

@media only screen and (max-width: 989px) {
.av-main-nav > li > a {
    padding: 0 7px;
    font-size: 12px;
}}

@media only screen and (max-width: 767px) {
.responsive #header .main_menu .social_bookmarks {
    display: block;
    position: absolute;
}}

Ismael,

The main logo still overlaps the tabs and the social media icons still are not showing up correctly. When I added this code it made the social media icons show up on the mobile side as well over the main logo. Any help would be greatly appreciated?

• This reply was modified 9 years, 3 months ago by tdproperty.

Still not working i just tried uploading a tiff file that was transparent from adobe photoshop and this would not load correctly. What file types are accepted for the enfold form for transparent forms.

I saved the image as png24 format and this did not solve the problem.

Ismal:

The solution you provided gives me the option to completely remove the logo which fixes one of my sites.

Where would I go to replace the logo with a new one only for the mobile side?

You will find that the logo on my mobile side is completely different from the regular web site .

AustinDowntownCondos.com

As well how do I apply padding to my new logo so that it is not so close to the header menu tabs?

Yigit,

When I add your code it messes up the header as I am using the collapsible menu square. Is there a section in the actual code to go in and remove /replace the mobile icon?

Yes everything is working now thank you!

Awesome that worked great thank you!

Thanking you richard I reached out to the company to see if they could help. If you know how to make these changes I am willing to pay you for your time.

I went to enfold, general settings, blog style, select grid layout and there was no area to define blog grid layout. I am currently on enfold version 2.3.1. Your help is greatly appreciated. Thanks