Navigation
Archive / Footer : links color with transition
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 29, 2016 at 4:23 am #1151408
    Romain65
    Participant

    Hi,

    This is my css/js for footer :

    .x-navbar, .x-colophon.bottom {
    background: rgba(0,0,0,0) !important;
    color: transparent !important;
    transition: 0.2s all linear;
}
.x-navbar.x-navbar-fixed-top,
.x-colophon.bottom.x-colophon-fixed {
    transition: 0.5s all linear;
    transition-delay: 0.5s;
    background: rgba(0,0,0,1) !important;
    color: white !important;
} 
    jQuery ( function($) {
	$(window).scroll( function() {
		if ( $(this).scrollTop() > 0 ) {
			$('.x-navbar').addClass( 'x-navbar-fixed-top' );
			$('.x-colophon.bottom').addClass('x-colophon-fixed');
		} else {
			$('.x-navbar').removeClass( 'x-navbar-fixed-top' );
			$('.x-colophon.bottom').removeClass('x-colophon-fixed');
		}
	} );
} );

    Footer appears when scroll down, but it doesn’t work with links. Why ?

    Thanks!

    August 29, 2016 at 4:26 am #1151415
    Romain65
    Participant
    This reply has been marked as private.
    August 29, 2016 at 4:32 am #1151418
    Christopher
    Moderator

    Hi there,

    I would like to check your site, but it’s under construction mode.

    Please provide us with login credentials.

    Thanks.

    August 29, 2016 at 4:34 am #1151421
    Romain65
    Participant

    sorry, it’s ok

    August 29, 2016 at 4:39 am #1151424
    Paul R
    Moderator

    Glad to know it’s ok now.

    Have a great day!

    August 29, 2016 at 4:45 am #1151432
    Romain65
    Participant

    No it doesn’t work, i say it’s ok : it’s no longer in maintenance mode ! Website is inline but I don’t have the solution yet.

    August 29, 2016 at 5:30 am #1151480
    Paul R
    Moderator

    Hi,

    Sorry for the misunderstanding.

    You need to target a element.

    You can add this under Custom > Edit Global CSS in the Customizer.

    
.x-navbar a, .x-colophon.bottom a {
     color: transparent !important;
    transition: 0.2s all linear;
}

.x-navbar.x-navbar-fixed-top a,
.x-colophon.bottom.x-colophon-fixed a {
    transition: 0.5s all linear;
    transition-delay: 0.5s;
    color: white !important;
}

    Hope that helps.

    August 29, 2016 at 5:38 am #1151491
    Romain65
    Participant

    ok thank you, I do that (only for the footer) :

    .x-navbar, .x-colophon.bottom a {
    background: rgba(0,0,0,0) !important;
    color: transparent !important;
    transition: 0.2s all linear;
}
.x-navbar.x-navbar-fixed-top,
.x-colophon.bottom.x-colophon-fixed a {
    transition: 0.5s all linear;
    transition-delay: 0.5s;
    background: rgba(0,0,0,1) !important;
    color: white !important;
}

    But now this is the phone number and transition effect that no longer works…

    August 29, 2016 at 5:50 am #1151497
    Christopher
    Moderator

    Hi there,

    Please update this part of code :

    <i class=”fa fa-phone” aria-hidden=”true”></i> +33 (0) 695 417 427</font size><font face=”” size=”3″>

    To :

    <span class="phone"><i class="fa fa-phone" aria-hidden="true"></i> +33 (0) 695 417 427</font size><font face="" size="3"></span>

    Add this CSS as well :

    .phone:hover{
  color: rgb(130,180,253);
}

span.phone {
    webkit-transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
    transition: color 0.3s ease,background-color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease,opacity 0.3s ease;
}

    Hope it helps.

    August 29, 2016 at 6:01 am #1151507
    Romain65
    Participant

    Thank you for your response, but no results for phone, and background footer has no transition effect…

    August 29, 2016 at 6:56 am #1151570
    Paul R
    Moderator

    Hi,

    Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

    – Link to your site
    – WordPress Admin username / password
    – FTP credentials

    Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

    August 29, 2016 at 10:28 am #1151915
    Romain65
    Participant
    This reply has been marked as private.
    August 29, 2016 at 12:34 pm #1152093
    Jade
    Moderator

    Hi there,

    The admin password provided seems to be incorrect. Kindly double check.

    August 29, 2016 at 12:53 pm #1152122
    Romain65
    Participant
    This reply has been marked as private.
    August 29, 2016 at 10:54 pm #1152760
    Lely
    Moderator

    Hi There,

    Upon checking, there’s a lot of mismatch HTML tags. Phone number is not link too. There’s special quotes that’s causing an error.
    I update the content from this:
    <p style="text-align: center;"><font face="varela round" size="3"><a href="mailto:[email protected]" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</a>        <i class="fa fa-phone" aria-hidden="true"></i> +33 (0) 695 417 427        <font face="" size="3"><a href="feed://www.supertramp-dafonseca.com/feed/" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-rss-square" aria-hidden="true"></i></a> <a href="https://www.facebook.com/supertramprdf/" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> <a href="https://twitter.com/supertramprdf" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> <a href="https://www.youtube.com/channel/UCJiJ-J4-NcgLxX3A9xtfFXg" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-youtube-square" aria-hidden="true"></i></a></font size><font face="varela round" size="3">        <a href="http://www.supertramp-dafonseca.com/mentions-legales_sarl-supertramp/" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-copyright" aria-hidden="true"></i> Supertramp</a></p></font size>
    To this:

    <p style="text-align: center;">
<a href="mailto:[email protected]" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-envelope" aria-hidden="true"></i> [email protected]</a> 
<a href="tel:+33" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-phone" aria-hidden="true"></i> +33 (0) 695 417 427 </a>
<a href="feed://www.supertramp-dafonseca.com/feed/" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-rss-square" aria-hidden="true"></i></a>
<a href="https://www.facebook.com/supertramprdf/" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href="https://twitter.com/supertramprdf" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href="https://www.youtube.com/channel/UCJiJ-J4-NcgLxX3A9xtfFXg" target="_blank" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-youtube-square" aria-hidden="true"></i></a>
<a href="http://www.supertramp-dafonseca.com/mentions-legales_sarl-supertramp/" onmouseover="this.style.color='rgba(130, 180, 253, 1)'" onmouseout="this.style.color='#ffffff'"><i class="fa fa-copyright" aria-hidden="true"></i> Supertramp</a></p>

    The phone number is now changing it’s color on hover. We just need to adjust the font size. Please add this custom CSS:

    .x-colophon-content a {
    font-size: 15px;
}

    Also note to update phone number link.

    Hope this helps.

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1151408 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>