Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #306024

    I am adding a sticky footer navigation to one of our pages to make it easier to cycle through our list of sponsored teams. I added the code below to the page, but the sticky footer either displays beneath the Enfold theme footer or scrolls down so half of it is hidden behind the Enfold footer. Any tips on how to correct this? Sorry for the lack of page content. I just started the page and wanted to get the footer working.

    <style>
    	/* Sticky Footer Styles */
    	.sticky-footer {
    		position: fixed;
    		bottom: 10px;
    		z-index: 999;
    		width:100%;
    		background: #ffffff;
    		border-top: 1px solid #999999;
    		border-bottom: 1px solid #999999;
    		padding:5px 10px;
    		max-width:1002px;
    	}
    	
    	.sticky-footer p {
    		color: #000000;
    		text-align:center;
    	}
    </style>
    <div class="empireFeatureSpot">
    	<div style="background-color:#0018D9; height:500px;">
    	<img src="/wp-content/uploads/teamPageMainImage.jpg" /><br />
    	<p class="teamPageHeaderText">THE FAMILY</p>
        </div>
        <div style="background-color:red; height:80px;">&nbsp;</div>
        <div class="sticky-footer">
                <div class="wrapper">
                    <p>Some text here, and some more and some more and a bit more.</p>
                </div><!-- end .wrapper -->
        </div><!-- end .sticky-footer -->
    </div>
    #306098

    Hi LSpicer!

    Thank you for using Enfold.

    Do you mind if we take a look at the actual page? Where did you add the html code?

    Cheers!
    Ismael

    #306389

    Unfortunately the website is still being built and is on our internal test server. Because of that, only people within the building/company are able to see the website, but I did include screenshots below. I added the code directly to the Teams page. The style section is only there until everything is working. Then it will be moved to the custom.css file.

    In the first screenshot, the sticky footer appears below the website’s footer container class div. In the second image the website footer is covering the sticky footer, and it is the same in the third image. Is there a way I can tell the sticky footer to stay within the page’s content area and always be at the bottom of the browser’s visible area but not scroll past or cover the website’s footer?

    Here is a mockup of how we would like the sticky footer to behave: https://www.dropbox.com/s/1l4izgu1wibpyya/teams%20page.jpg

    https://www.dropbox.com/s/or33xjbhgtopyj3/capture1.png

    https://www.dropbox.com/s/cad7ixlm7hpjbvs/capture2.png

    https://www.dropbox.com/s/j35gsaamoig7ccc/capture3.png

    #306420

    Hi!

    Without being able to inspect the site live there isn’t anyway for us to really debug the page unfortunately. In general we don’t support custom scripts/styles/html since it isn’t our code but when we are able to take a look easily we will dig through a bit to see if we can help.

    If you can get the example only we will try and see if we can assist here.

    Regards,
    Devin

    #306445

    Thank you for the reply. I will work with our IT department to see if it’s possible to grant you access to the page.

    If that doesn’t work, do you know of a WordPress plugin that works well with Enfold that could provide the end result we’re looking for? I don’t mind altering styles if necessary.

    #306607

    Hey!

    I’m sorry but I thought this is supposed to be a sticky footer navigation? What’s up with the image with the “The Family” text? Please let us know once the site is live. We would like to check it.

    Cheers!
    Ismael

    #307519

    The text above is what is all of the code currently on the page. “The Family” is text that describes the content we are using for the page. It is a page showing the teams we sponsor. The sticky footer code starts is just the section below:

    <div style="background-color:red; height:80px;">&nbsp;</div>
        <div class="sticky-footer">
                <div class="wrapper">
                    <p>Some text here, and some more and some more and a bit more.</p>
                </div><!-- end .wrapper -->
        </div><!-- end .sticky-footer -->

    As well as the style section that makes it into a sticky footer:

    <style>
    	/* Sticky Footer Styles */
    	.sticky-footer {
    		position: fixed;
    		bottom: 10px;
    		z-index: 999;
    		width:100%;
    		background: #ffffff;
    		border-top: 1px solid #999999;
    		border-bottom: 1px solid #999999;
    		padding:5px 10px;
    		max-width:1002px;
    	}
    	
    	.sticky-footer p {
    		color: #000000;
    		text-align:center;
    	}
    </style>

    The rest of the code is just the content that I added so far and can be disregarded. To me it just seems like the sticky footer is jumping outside of the content area of the page, and we would like it to only stay within the content area. We’re planning on going live within the next month, and I will let you know when that happens.

    #307679

    Hey!

    Alright. Please add this on Quick CSS or custom.css:

    /* Sticky Footer Styles */
    	.sticky-footer {
    	position: fixed;
    	bottom: 10px;
    	z-index: 999;	
    	background: transparent;
    	padding:5px 10px;		
    	width:100%
    	}
    	
    	.sticky-footer .wrapper {
    	margin: 0 auto;	
    	width:100%;	
    	max-width:1002px;
    	background: #ffffff;
    	border-top: 1px solid #999999;
    	border-bottom: 1px solid #999999;
    	}
    	
    	.sticky-footer p {
    	color: #000000;
    	text-align:center;
    	}
    /*

    Edit functions.php, add this code:

    function sticky_footer() { ?>
    
    <div class="sticky-footer">
            <div class="wrapper">
                <p>Some text here, and some more and some more and a bit more.</p>
            </div><!-- end .wrapper -->
    </div><!-- end .sticky-footer -->
    
    </script>
    <?php }
    
    add_action('wp_head', 'sticky_footer');

    Regards,
    Ismael

    #308980

    Thank you for the help and sorry for the delayed reply.

    That function and CSS fixed the issue with the Enfold footer text being on top of the sticky footer. However, the sticky footer remains at the bottom of the page within the footer and it now displays on every page of the website. Is there a way to call the function only on the team page and have it stay within the page’s content area?

    New screenshot: https://www.dropbox.com/s/9a8vx99lp4ul56r/Capture08252014.PNG?dl=0

    #310181

    Hi!

    Try using this function instead:

    function sticky_footer() { 
    if(is_page(32))
    ?>
    <div class="sticky-footer">
            <div class="wrapper">
                <p>Some text here, and some more and some more and a bit more.</p>
            </div><!-- end .wrapper -->
    </div><!-- end .sticky-footer -->
    
    </script>
    <?php } }
    
    add_action('wp_head', 'sticky_footer');
    

    Change 32 by the ID of the team page.

    Cheers!
    Josue

    #311096

    I found what I believe is the page ID, 3158, by hovering over the “move to trash” link, but the footer still appears on every page and outside of the main content area. Below is the code I used.

    function sticky_footer() { 
    if(is_page(3158))
    ?>
    <div class="sticky-footer">
    	<div class="wrapper">
    		<p>Some text here, and some more and some more and a bit more.</p>
    	</div><!-- end .wrapper -->
    </div><!-- end .sticky-footer -->
    
    </script>
    <?php } 
    
    add_action('wp_head', 'sticky_footer');
    #311110

    Hi!

    Make sure to flush any caching functionality/plugin you may have activated. Can you post a link to your website?

    Regards,
    Josue

    #312458

    I tested the site in the latest versions of Firefox, Chrome, and IE11 on Friday and today, Tuesday, but the floating footer appears on all pages even after clearing the cache in Chrome. Unfortunately the website is on a test server that can only be accessed from within the building. We plan on going live soon. I will definitely post a link once it is available. Thank you for continuing to help.

    #312502

    Let us know when you go live so we can help you with this issue.

    Regards,
    Josue

    #316769

    I resolved the issue. I wanted a sticky footer, but I should’ve been looking at a scrollToFixed div. The navigation now stays at the bottom of the browser window and stops when it encounters a defined class. Thank you again for helping me despite not being able to see the website.

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

The topic ‘Custom sticky footer navigation isn't displaying properly’ is closed to new replies.