Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #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.
    #1013189

    Hey 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,
    Mike

    #1013280

    Mike, 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!

    #1013307

    Hi,

    Great, I’m glad Mike could help you out, according to some he is a genius :D

    I’ll close the thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Tricky styling with Enfold menu color and logo’ is closed to new replies.