Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 1, 2021 at 9:31 am #1303364
    peta_moonstone

    Hi
    I am working on a new website, the client’s logo is quite detailed and needs to be large. They have requested that the logo sits in a circle half in the header and half in the first element, is there some quick CSS code for this? I have included a link in the private content to a website that has a similar set up for the logo in the header. Please note the website link is not the site I am building, just illustrates what I am after.
    I hope that all makes sense ;)
    Thanks in advance
    Peta

    June 1, 2021 at 10:11 am #1303369
    peta_moonstone

    Quick Update .. I found another thread with a similar request (sorry) and added in this to the Quick CSS panel and it seems to be working!! Is there a way to make the logo shrink a little when the user scrolls down?

    #top .logo {
    padding-top: 0px;
    width: 300px;
    margin: 10px auto;
    float: none;
    height: auto;
    }
    .logo, .logo a {
    overflow: visible;
    }
    .logo img {
    max-height: 200px !important;
    }

    June 2, 2021 at 10:42 am #1303545
    Rikard

    Hi Peta,

    Could you post a link to where we can see the actual results you are getting please?

    Best regards,
    Rikard

    June 4, 2021 at 1:16 am #1303903
    peta_moonstone

    Hi Rikard
    Sorry for taking so long to get back to you. The site is in maintenance mode, I will turn it to live for the next 24 hours – link is in the private content.
    If any of the CSS above is not necessary please let me know :)
    Thank you
    Peta

    June 7, 2021 at 7:14 am #1304351
    Ismael

    Hi,

    Thank you for the update.

    If you want to decrease the size of the logo on scroll, try to add this script in the functions.php file.

    
// a custom script
// resize the logo on scroll
 function ava_logo_resize_on_scroll(){
	?>
	<script>
		(function($) {
			$(window).on("scroll", function() {
				if($(this).scrollTop() < 50) { 
					$(".logo").removeClass("logo-small");
				} else {
					$(".logo").addClass("logo-small");
				}
			});
		})(jQuery);
	</script>
	<?php
}
add_action('wp_footer', 'ava_logo_resize_on_scroll');

    Then add this css code to specify the actual size of the logo on scroll.

    #top #header .logo.logo-small {
    width: 100px;
}

    Best regards,
    Ismael

    June 8, 2021 at 5:34 am #1304527
    peta_moonstone

    Perfect – thank you :)

    June 9, 2021 at 11:35 am #1304839
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 9, 2021 at 11:46 am #1304842
    peta_moonstone

    Thanks Rikard, I’m happy for this one to be closed.
    Have a great day :)
    Peta

    June 11, 2021 at 4:20 am #1305166
    Rikard

    Hi,

    Thanks for letting us know, I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Logo to hang down past header’ is closed to new replies.