-
AuthorPosts
-
April 4, 2015 at 10:28 am #423414
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, 8 months ago by tdproperty.
April 5, 2015 at 6:53 am #423568Hi tdproperty!
Could you try to enter the full URL for the image in background: url?
Cheers!
RikardApril 6, 2015 at 8:10 am #423821Added the full url and this did not fix the problem here are the changes in the code
/* 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('http://austindowntowncondos.com/wp-content/uploads/2015/04/Austin-Downtown-Condos-Main-Logo-275.png') 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('http://austindowntowncondos.com/wp-content/uploads/2015/04/Austin-Downtown-Condos-Main-Logo-275.png') no-repeat left center; position: relative; float: none !important; background-size: auto 78%; 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 ;} }
April 7, 2015 at 3:50 am #424392Hey!
your logo is not disappearing for me. It looks fine for me and I can’t see any issue. Could you fix it?
If not, can you please provide us screenshots of the issue? you can use imgur.com or public dropbox folder.
Please clear browser cacheBy the way: you are using a very old version of the theme. Please upgrade to Enfold v3.1.3.
Cheers!
Andy -
AuthorPosts
- You must be logged in to reply to this topic.