Header Logo Overlapping Tabs

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;
}}

The last code worked great I just need to fine tune the social media icons in mobile view. Currently you will notice at 1087 width till about 751 width the social media icons overlap the mobile menu container. I would like to have the social media icons show up in between the menu container and the main logo then disappear before they over lap the logo. Do you have a solution for this? Once again your help is greatly appreciated!

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 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;
}}

Andy,

That code was for my old code if I revert back to the code you provided it overlaps the main image with the tabs. I have provided all the code listed below that is currently in my quick css

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;
}}

The code that you included for reply #503406 was not relevant as that code was removed in a prior post which corrected my overlapping header issue. All of my current css code is listed in my reply #503671 which does not include the following code that needs to be replaced

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

Andy,

There is no overlapping currently you gave me the code that does not correspond with my current code. If you look what you wrote

I can see this code in your source code:

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

which is preventing social icons to appear. Use this code instead:

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

Cheers!
Andy

You will notice that the above code is not found in my current code

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 value your alls time however I have explained this 3 times in past posts. Can you please review the code and help me correct the problem of the social media icons disappearing around 770 pixels. So once again please view my code and you will notice that what you wrote above does not include that code in my most recent code. Thank you for your time and make it a great day!