-
AuthorPosts
-
September 21, 2018 at 6:47 pm #1012868
Hi ya,
I had some modifications done with your friendly and competent support on the theme for my customers.
However, when I scroll down the page, the logo jumps as you can see when trying. Also the main menu color is black when all the way up, when scrolling down it changes to the right color: #574b41
How would I stop the logo from jumping and how would the menu have the color #574b41 for good?
Could you help please?
My styles.css :/* Theme Name: PLP Enfold Child Description: Enfold Child Version: 1.0 Author: Stefan B. Author URI: http://kriesi.at Template: enfold */ #top .av_header_glassy.av_header_transparency .social_bookmarks li, #top .av_header_glassy.av_header_transparency .social_bookmarks li a { border-color: rgba(255,255,255,0.25); color: #574b41; } #top .av_header_transparency #header_meta { background: #ffffff; box-shadow: none; border-bottom: 1px solid rgba(255,255,255,0.25); } #top .av_header_glassy.av_header_transparency .header_bg { background-color: #fff; opacity: 0.6; filter: alpha(opacity=60); } #top .fullsize .template-blog .post .entry-content-wrapper > *,#top .fullsize .template-blog .post .entry-content-wrapper { max-width: 1300px; } .header_color .header_bg { background-color: #e1f5f4; font-size: 18px !important; color: #574b41 !important; opacity: 0.5; filter: alpha(opacity=50); } /* CSS - Widget border */ span.news-thumb { display:none !important; } .hr.hr-short.hr-center.side-bar { margin: 0px !important; } .hr-short.side-bar .hr-inner { width: 90% !important; left: 15% !important; } #menu-item-search { display: none; } @media only screen and (min-width: 768px) { .av_secondary_right .sub_menu { padding-right: 160px; } } .av_phone_active_left .phone-info { position: absolute; right: 0; float: none; padding: 0; } .av_phone_active_left .phone-info #searchform #searchsubmit { font-size: 13px; width: 30px; line-height: 30px; } #top .av_minimal_header #s { padding: 9px 47px 9px 7px; } #top .isotope-item { padding-right: 5px; } .news-time { display: none; } .plp-phone .iconbox_icon:before { visibility: hidden !important; } .plp-phone .iconbox_icon { background: url(https://dev.plp-group.com/wp-content/uploads/2018/09/phone.png) !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; } .sidebar, .sidebar_right { min-height: calc(100vh - 250px)!important; }
and my quick .css:
/*iconbox start */ .plp-iconbox { position: relative; background-image: url('https://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox.png')!important; height: 181px; background-position: center; background-repeat: no-repeat; background-size: cover; font-size: 10px !important; } .main_color.iconbox_top .iconbox_content { background-color: transparent!important; box-shadow:none!important; } .clickme:hover { cursor: pointer; } .plp-iconbox:hover { background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_mo.png')!important; height: 181px; background-position: center; background-repeat: no-repeat; background-size: cover; } #after_full_slider_1 .iconbox_top .iconbox_icon { top: 15px; } #after_full_slider_1 .iconbox_top .iconbox_content { padding: 80px 20px 20px 20px; } .plp_noiconbox { position: relative; background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd-1.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; font-size: 10px !important; } .plp_noiconboxact { position: relative; background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd_act.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; font-size: 10px !important; } .plp_noiconbox:hover { background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd_mo-1.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; font-size: 10px !important; } #top.page-id-234 .iconbox_top .iconbox_icon { display: none; } .page-id-494 .iconbox_top .iconbox_icon, .page-id-234 .iconbox_top .iconbox_icon, .page-id-502 .iconbox_top .iconbox_icon, .page-id-510 .iconbox_top .iconbox_icon { display: none; } .clickme:hover { cursor: pointer; } .plp_noiconboxm { background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd_mo.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; } .plp_noiconboxv { background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd_mo.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; } .plp_noiconboxp { background-image: url('http://dev.plp-group.com/wp-content/uploads/2018/09/arrowbox_wd_mo.png')!important; height: 190px !important; width: 347px !important; background-position: center; background-repeat: no-repeat; background-size: cover; } h3.iconbox_content_title { font-size: 16px!important; } /*iconbox end */ #top #avia-menu > li > a:hover { background: transparent !important; text-decoration: underline; } #top #avia-menu > li > a:hover span.avia-menu-text { color: #574b41 !important; } .sidebar_tab .tab_titles { max-width: 250px; } .js_active .tab { font-size: 1em; } .sidebar_tab .tab_content { min-height: 100px !important; } /*accordion start*/ .aviaccordion-active-slide .aviaccordion-preview { width: 100% !important; } h3.aviaccordion-title { color: #584b42!important; background-color: #e1f5f4; } #top .aviaccordion-excerpt { color: #ffffff!important; margin-left: 120%!important; width: 300px!important; } #top .aviaccordion-title { color: #584b42!important; margin-top: 50%!important; } /*accordion end*/
I can’t spot the black…?!? …and yes I will combine them in styles.css, when I’m done editing.
Thanks for all the help!
Stefan- This topic was modified 6 years, 2 months ago by Rikard.
September 23, 2018 at 2:52 am #1013189Hey Stefan,
The reason your logo is jumping on scroll is because, you are using header transparency and you have two slightly different logos, one is in Enfold Theme Options > Header > Transparency Options > Transparency Logo
and the other is in Enfold Theme Options > Logo
Typically on scroll the header would shrink and use a different logo, but your header is not shrinking so the difference in logos is showing. Try using the same image for both logos.For your menu color, Please try this code in the General Styling > Quick CSS field:
#top #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text,#top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a { color: #574b41 !important; }
Best regards,
MikeSeptember 23, 2018 at 11:30 am #1013280Mike, you are top!!!
I was really trying hard and never would have found the solution! This was very tricky and you solved it!!! Also finally got the right css code!
Thank you so much!
Problem solved, ticket can be closed!September 23, 2018 at 1:11 pm #1013307 -
AuthorPosts
- The topic ‘Tricky styling with Enfold menu color and logo’ is closed to new replies.