Tagged: , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • May 8, 2017 at 8:04 pm #789798
    Hank

    I incorporated a custom function which allowed the team members description to hold a custom made button and div which were tied into a pop-up.
    The function code from the child theme functions.php is:

    //add pop-up window to team members
    function inline_popup_enabler(){
    ?>
    <script>
    (function($){
    $(window).load(function() {
    $(‘.inline_popup’).magnificPopup({
    type:’inline’,
    midClick: true
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘inline_popup_enabler’);

    the css used is:

    .inline_popup {
    padding: 10px;
    background-color: #00afb9;
    text-decoration: none !important;
    font-weight: bold;
    }
    .inline_popup:hover {
    transition: background-color 0.5s ease;
    background-color: #bf00bf;
    }
    .mfp-container .hidden {
    font-size: 18px;
    position: fixed;
    top: 15%;
    border-top: 20px solid #00afb9;
    border-bottom: 5px solid #00afb9;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    visibility: visible;
    width: 65%;
    margin: 0 auto !important;
    background: #FFFFFF;
    color: #181818;
    padding: 25px;
    }

    The site test link for the affected page is : http://test5.31stline.com/about-2/
    If you look at the home page, you will see the footer as it should be.

    Can someone please help me figure out why the footer is doing this?

    May 8, 2017 at 8:39 pm #789825
    Jordan Shannon

    Hey Hank,
    If you remove/comment out the script does the styling return to normal?

    Best regards,
    Jordan Shannon

    May 8, 2017 at 10:14 pm #789876
    Hank

    Hey Jordan,

    I removed it and the issue is still there. That would rule out the script then, huh. Not sure what is going on with my styles to make this happen. Inside the Team Member Description field I have added that button and the hidden content div for the pop-up. Not sure if that would be causing the issue. Once I remove the section with these team members the footer goes back to normal.

    May 8, 2017 at 10:38 pm #789884
    Jordan Shannon

    Hi,

    Add the following to quick css:

    #footer h3{
color:#fff!important;
}

#footer ul li a{
color:#fff!important;
}

    Let me know if this works

    Best regards,
    Jordan Shannon

    May 8, 2017 at 10:43 pm #789887
    Hank

    Thanks Jordan, that does override whatever is causing the issue, though I will have to add the hover again, but if you look at the home page, you will see the custom toolbar area i created is only showing as a 1px top border for the footer, rather than what it is supposed to be.

    May 8, 2017 at 10:50 pm #789889
    Hank

    Never-mind, I fixed it in the footer.php file. Thank you for your assistance.

    May 8, 2017 at 10:51 pm #789890
    Jordan Shannon

    Hi,

    To restore the hover state just add:

    #footer ul li a:hover{
color:#fff!important;
}

    To remove the border add:

    .container_wrap #footer{

	border:none!important;
}

    Best regards,
    Jordan Shannon

    May 15, 2017 at 11:11 pm #793594
    Hank

    Hi again, I noticed that the main logo has a href hover that extends past the logo into an area where that should not be clickable. It is overtaking other events at times. Can you offer some advice? Thank you!

    May 15, 2017 at 11:45 pm #793610
    Jordan Shannon

    Hi,

    Add the following to quick css:

    
.logo a{
height:68%!important;
}

    Let me know if this works.

    Best regards,
    Jordan Shannon

    May 16, 2017 at 1:07 am #793640
    Hank

    That fixed it. Thanks. Sorry to be such a bother but I am running into two final problems that I have tried to resolve without any luck.

    The About page, where the ‘team member’ bios are, the ‘read more’ button won’t scroll through the text if the screen size calls for it. I added a overflow action to it but it does not seem to be working. Can you offer some insight?

    Finally, my last concern is the menu. The logo is overlapping the ‘get property quote’ link on mobile. My styles are not changing it.

    Thanks again for all of your assistance.

    May 16, 2017 at 1:16 am #793643
    Jordan Shannon

    Hi,

    No problem at all. All I ask is that for these additional issues, you create new threads. It helps us keep this organized and also helps others who are searching for solutions.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘jQuery function for Team Member affecting page footer’ is closed to new replies.