Is there a way to control the shrinking logo position? - Support

Tagged: custom.css, header, logo, Shrinking

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

Author

Posts
April 23, 2015 at 4:11 pm #433553

BlackThundarr
Participant

here’s the deal:

I’m building a site with a circular logo in the header. in order to adjust the scrolled version of the logo’s position to align properly over the bg img, i’ve added the following css:

.header-scrolled div .logo{
left: 120px;
}

the problem is that while scrolling the logo shrinks towards its top-left corner and then jumps over to its final position.
is there a way to alter this so it shrinks towards its top-center and lines up correctly whilst scrolling?

kind of a weird, pretty specific need. any help you can offer will be greatly appreciated. i’ve pasted a link to the build as Private Content below.

April 24, 2015 at 6:05 pm #434302
Elliott
Inactive Moderator
Hi BlackThundarr!

It sounds like your wanting something like this.
```
.logo img, .logo, .logo * {
  min-height: 230px;
  overflow: visible !important;
}
```
Best regards,
Elliott
April 28, 2015 at 10:38 pm #436428

BlackThundarr
Participant

well, that may be a solution that the client may like, but i think they’ll want to stick with the shrinking logo effect.

that being the case, what i’m looking for is to have the logo shrink on scroll aligned to its top-center vertex rather than its top-left, as it does currently. the goal is to keep it positioned in the center of the detail of the header background image. so any help there would be greatly appreciated.

thanks for the alternate idea, though!

– j

April 29, 2015 at 7:01 pm #436942
Yigit
Keymaster
Hi J!

It looks fine on my end if you remove following code
```
.header-scrolled div .logo {
  left: 120px;
}
```
Can you please post a screenshot and show the issue you are seeing?

Regards,
Yigit
April 30, 2015 at 4:11 pm #437546

BlackThundarr
Participant

ok, i’ve removed the suggested rule and have it set to how i originally had it. what i’m looking to resolve is the manner in which the logo shrinks, anchored to the left. what i’d like is for it to shrink based on its center. currently it snaps over into the correct position after it is scrolled all the way.

here are screenshots of what i’m talking about, you can also see the behavior by scrolling slowly on the site.

http://192.185.4.46/~meredith/CPhD-sg-01.png
http://192.185.4.46/~meredith/CPhD-sg-02.png
http://192.185.4.46/~meredith/CPhD-sg-03.png

May 4, 2015 at 4:44 am #438707
Ismael
Moderator
Hey!

Remove the css code then add this in the functions.php file:
```
add_action('wp_footer', 'ava_custom_script_mod');
function ava_custom_script_mod(){
?>
<script>
(function($){
	$(window).scroll(function(){
		var scrolled = $(window).scrollTop();
	
		if(scrolled >= 100) {
			$('div .logo').addClass('left-logo');			
		} else {
			$('div .logo').removeClass('left-logo');
		}
	});
})(jQuery);
</script>
<?php
}
```
Then add this in the Quick CSS field:
```
.logo {
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.logo.left-logo {
	left: 120px;
}
```
Cheers!
Ismael
Author

Posts

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

You must be logged in to reply to this topic.