Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #789798

    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(){
    $(window).load(function() {
    midClick: true
    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 :
    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?


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

    Best regards,
    Jordan Shannon


    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.



    Add the following to quick css:

    #footer h3{
    #footer ul li a{

    Let me know if this works

    Best regards,
    Jordan Shannon


    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.


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



    To restore the hover state just add:

    #footer ul li a:hover{

    To remove the border add:

    .container_wrap #footer{

    Best regards,
    Jordan Shannon


    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!



    Add the following to quick css:

    .logo a{

    Let me know if this works.

    Best regards,
    Jordan Shannon


    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.



    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

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘jQuery function for Team Member affecting page footer’ is closed to new replies.