Viewing 4 posts - 1 through 4 (of 4 total)
-
Posts
-
Hi guys,
Please take a look at my site (private content) and let me know how I can get rid of the odd styling change to the logo/header area between 768px and 989px wide. I would like the logo/header area to look the same (colours/margins etc) between 768px and 989px as it is under 768px wide. I can’t figure out what is causing that style change between 768px and 989px – any ideas please?
Thanks,
MattHey meanster99,
Please try this code in the General Styling > Quick CSS field: or in the WordPress > Customize > Additional CSS:@media only screen and (min-width: 768px) and (max-width:989px) { .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img { opacity: 1 !important; } #header { background-color: #fff !important; } .header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after { background-color: #999999 !important; } .responsive #top #wrap_all .av_header_transparency .sub_menu > ul > li > a { color: #999999 !important; } .responsive #top .slideshow_caption { left: 0; width: 100% !important; padding: 0; } .responsive #top #wrap_all .av-small-font-size-40 { font-size: 40px !important; } .responsive #top .av_header_transparency .logo img.alternate { display: none !important; } .av-burger-overlay-active #top #wrap_all .av-hamburger-inner,.av-burger-overlay-active #top #wrap_all span.av-hamburger-inner::after,.av-burger-overlay-active #top #wrap_all span.av-hamburger-inner::before { background-color: #ffffff !important; } .responsive #top #wrap_all #header { position: relative !important; width: 100%!important; float: none!important; height: auto!important; margin: 0 !important; opacity: 1!important; min-height: 0!important; } .responsive.html_header_top.html_logo_center .logo { left: 0%!important; -webkit-transform: translate(0%,0)!important; -ms-transform: translate(0%,0)!important; transform: translate(0%,0)!important; margin: 0!important; } .responsive.html_header_top #header_main .social_bookmarks ,.responsive.html_top_nav_header #top .social_bookmarks { width: auto!important; margin-top: -16px!important; } .responsive #header_main .container { height: auto !important } .responsive #top .header_bg { opacity: 1!important; filter: alpha(opacity=1) } .responsive.social_header .phone-info { text-align: center!important; float: none!important; clear: both!important; margin: 0!important; padding: 0!important; } .responsive.social_header .phone-info span { border: none!important; width: 100%!important; text-align: center!important; float: none!important; clear: both!important; margin: 0!important; padding: 0!important; } .responsive #header_meta .social_bookmarks li { border-style: solid!important; border-width: 1px!important; margin-bottom: -1px!important; margin-left: -1px!important; } .responsive #top #header_meta .social_bookmarks li:last-child { border-right-style: solid!important; border-right-width: 1px!important; } .responsive #header .sub_menu,.responsive #header_meta .sub_menu>ul { float: none!important; width: 100%!important; text-align: center!important; margin: 0 auto!important; position: static } .avia_transform .av_fullscreen .active-slide .avia-caption-content { font-size: 13px !important; } .responsive #header_meta .sub_menu>ul>li { float: none!important; display: inline-block!important; padding: 0 10px!important; } .responsive #header .social_bookmarks li { float: none!important; display: inline-block!important; } .responsive.bottom_nav_header #header_main .social_bookmarks { position: relative!important; top: 0!important; right: 0!important; margin: 10px auto!important; clear: both!important; } .responsive.bottom_nav_header.social_header .main_menu>div { height: auto!important; } .responsive .logo img { margin: 0!important; } .responsive.html_header_sidebar #top #header .social_bookmarks { display: none!important; } .responsive body.boxed#top,.responsive.html_boxed.html_header_sticky #top #header { max-width: 100%!important; } .responsive.html_header_transparency #top .avia-builder-el-0 .container,.responsive.html_header_transparency #top .avia-builder-el-0 .slideshow_inner_caption { padding-top: 0!important; } .responsive #top .av_phone_active_right .phone-info.with_nav span { border: none!important; } .responsive #top #wrap_all .container { width: 85%; max-width: 85%; margin: 0 auto; padding-left: 0; padding-right: 0; float: none; } .responsive #top .av_header_transparency #header_meta { border-bottom-color: rgb(225, 225, 225) !important; } .responsive.html_top_nav_header .av-logo-container { height: auto!important; } .responsive.html_top_nav_header .av-section-bottom-logo { border-bottom-style: solid!important; border-bottom-width: 1px!important; } .responsive #header_main_alternate { display: none!important; } .responsive #top #header .social_bookmarks { display: none!important; } .responsive #top #header .main_menu .social_bookmarks { display: block!important; position: relative!important; margin-top: -15px!important; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a,.responsive #top #wrap_all .av-logo-container { height: 80px!important; line-height: 80px!important; } .responsive #top #wrap_all .av-logo-container { padding: 0!important; } .responsive #top #header_main > .container .main_menu .av-main-nav > li > a { min-width: 0!important; padding: 0 0 0 20px!important; margin: 0!important; border-style: none!important; border-width: 0!important; } .responsive #top #header .av-main-nav > li > a,.responsive #top #header .av-main-nav > li > a:hover { background: transparent!important; color: inherit } .responsive.html_top_nav_header .av-logo-container .inner-container { overflow: visible!important; } .responsive.html_header_transparency #top .avia-builder-el-0 .container { padding-top: 0px!important; } .responsive.html_header_sidebar #header .avia-custom-sidebar-widget-area { display: none!important; } .responsive.html_header_sidebar #main { border: none!important; } .responsive #top .logo { position: static!important; display: table!important; height: 80px !important; float: none!important; padding: 0!important; border: none!important; width: 80%!important; } .responsive .logo a { display: table-cell!important; vertical-align: middle!important; } .responsive .logo img { height: auto !important; width: auto!important; max-width: 100%!important; display: block!important; max-height: 80px!important; } .responsive #top .av-logo-container .avia-menu { height: 100%!important; } .responsive #top .av-logo-container .avia-menu > li > a { line-height: 80px!important; } .responsive #top #main .av-logo-container .main_menu { display: block!important; } .responsive #top #main .av-logo-container .social_bookmarks { display: none!important; } .responsive #top #main .av-logo-container .main_menu .social_bookmarks { display: block!important; position: relative!important; } .responsive #top #main .av-logo-container .main_menu { display: block!important; } }Best regards,
MikeThanks Mike, I appreciate your time and effort. In the end I re-uploaded my logos the exact same size as the demo template I used, which fixed the majority of the styling problems immediately.
Viewing 4 posts - 1 through 4 (of 4 total)
- You must be logged in to reply to this topic.