Header Logo Disappearing

My header logo is disappearing on my site austindowntowncondos.com when the page reaches roughly 1024px so that the logo does not overlap the header tabs. I was wondering if there was a way to make the header logo width size responsive or would it be best practice to replace the logo with the mobile logo that I am using that is much smaller? Any help would be greatly appreciated and I would like to change this code via custom.css file not the quick css. I have included the code for my custom.css below

/* Have fun adding your style here :) - PS: At all times this file should contain a comment or a rule, otherwise opera might act buggy :( */
#avia-menu li a {
font-weight:normal !important;
}
/* General Custom CSS */
@media only screen and (min-width: 1024px) and  (max-width : 1140px) {
	#avia-menu li a {
font-size: 11px;
padding: 0 8px;
}
#header_main .responsive .container {
width: 95% !important;
}
}

@media only screen and (min-width: 768px) and  (max-width : 1024px)  {
    
.responsive .logo {
background: url('/wp-content/uploads/2015/04/Austin-Downtown-Condos-Bull-Logo-200x200.jpg') no-repeat left center;
position: relative;
float: left !important;
background-size: auto 63%;
top: 0;
left: -10px;
}
.responsive .logo img {
margin: 0 auto;
display: none;
}
#header_main.responsive .container {
    width: 90%; !important;
}
#avia-menu li a {
font-size: 11px;
padding: 0 8px;
}
}

/*
Desktop Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the desktop view of your site */

@media only screen and (width: 768px) {
  /* Add your Desktop Styles here */

}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
.responsive .logo {
background: url('/wp-content/uploads/2015/04/Austin-Downtown-Condos-Bull-Logo-200x200.jpg') no-repeat left center;
position: relative;
float: none !important;
background-size: auto 85%;
top: 0;
left: -10px;
}
.responsive .logo img {
margin: 0 auto;
display: none;
}
#header_main .responsive .container {
width: 95% !important;
}
#avia-menu li a {
font-size: 11px;
padding: 0 8px;
}

.responsive #top #header_meta .social_bookmarks li:last-child a{border-right:none !important ;}
}

• This topic was modified 9 years, 7 months ago by tdproperty.