Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • July 12, 2017 at 5:49 pm #820147
    midudek1

    Dear Support,
    I would like to create a header like in the link nr 1.

    I thought that in case when the logo is too big, it will go out from the header area and overlay everything that is below it … unfortunately that is not the case … the logo is automatically adjusted to the header size … so it is not possible to create a “triangle”.

    After scrolling down I would like the logo to fade out and have very simple header like in the link nr 2.

    How can I achieve such header? Please do not tell me that it is impossible … I already bought your theme. I was not able to test such functionality because Kriesi does not provide a testing environment. Could you please help me?

    I am looking forward for your reply.

    Best regards,
    MD

    July 13, 2017 at 6:38 am #820351
    Rikard

    Hey midudek1,

    There is nothing like that in the theme so you will need custom code, we can help you out with small changes but we cannot provide complete custom solutions unfortunately, you would have to hire a freelancer for that. Please post a link to where you are attempting this if you should need any further help.

    Best regards,
    Rikard

    July 13, 2017 at 9:37 pm #820794
    midudek1

    Actually I managed to find the solution on this forum … and it is possible … and the solution was posted by you … ;-)

    https://kriesi.at/support/topic/how-to-make-logo-overlap-the-header/

    Can you please help me with one more thing … instead of having the resizing logo animation I would like to have the fade in and fade out … how can I achieve this?

    Thank you for your help,
    MD

    July 14, 2017 at 2:39 pm #821173
    Victoria

    Hi MD,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    July 16, 2017 at 9:51 pm #822183
    midudek1

    Dear Support,
    I would like to fade out the logo from the header when the page is scrolled down. The CSS code below USED TO work, but after DISABLING Enfold -> Header -> Header behavior tab -> Shrinking Header the logo appears all the time.

    
.logo
{
    overflow: visible;
    margin-left: -70px;
}

.logo a
{
    overflow: visible;
}
	
.logo img
{
    max-height: 200px !important;
}

/* logo fade in and out */
.header-scrolled .logo img
{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

    When NOT scrolled it should look like in the link nr 1 … and when scrolled the logo should disappear … like in the link nr 2.

    Thank you for your help,
    MD

    • This reply was modified 7 years, 5 months ago by midudek1.
    July 16, 2017 at 10:29 pm #822194
    Mike

    Hi,
    Try this code:

    
.header-scrolled .logo img {display: none !important;}

    Best regards,
    Mike

    July 17, 2017 at 10:10 am #822463
    midudek1

    Thank for the prompt reply!

    Mike unfortunately your code does not work.

    I have noticed that the code for ‘.header-scrolled’ stopped working when I have DISABLED the ‘Shrinking Header’ in the header behavior configuration.

    Can you help me please?

    MD

    July 17, 2017 at 10:11 am #822465
    midudek1

    + your code will remove the logo without any animation … and I would like to have the fade out of the logo then the user scrolls down and fade in when the user scrolls up to the top.

    • This reply was modified 7 years, 5 months ago by midudek1.
    July 17, 2017 at 7:50 pm #822872
    Basilis

    Hi,

    The transition is been added with some JS ( so it is compatible with all browsers ).
    If you do need to enchance it so much, please cnsider to hire a developer to help you with that code.

    Thank you very much

    Best regards,
    Basilis

    July 17, 2017 at 9:32 pm #822934
    midudek1

    I do not understand you guys, why you are so reluctant of helping me … ;/ when I was buying the theme the support was in the price.

    The code pasted by me is working when the ‘Shrinking Header’ is ENABLED … it stops working when I disable it. I am using the same computer, system and browser so your answers are any of help … so my question is how the ‘Shrinking Header’ affects the behavior?

    Thank you for your help.

    MD

    July 17, 2017 at 10:06 pm #822960
    midudek1

    I will try to implement the code from here

    https://kriesi.at/support/topic/hide-logomenu-header-on-scroll-down/

    July 20, 2017 at 1:49 am #824286
    Ismael

    Hi,

    Please remove the previous modifications then add the following script in functions.php file.

    add_action('wp_footer', 'ava_scroll_hide_logo');
function ava_scroll_hide_logo(){
?>
<script>
(function($){
		var hide_logo = function() {
			var header = $('#header').height(),
			    scroll = $(window).scrollTop();
				if(scroll >= header) {
					$('.logo').css('display', 'none');
				} else {
					$('.logo').css('display', 'block');
				}
		}

		$(window).scroll(function() {
			hide_logo();
		});
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    August 13, 2017 at 7:00 pm #838292
    midudek1

    Dear Ismael,
    It worked! Thank you very much for your help! I really appreciate it!

    You can close the topic.

    Best regards,
    MD

    August 13, 2017 at 7:15 pm #838296
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Header configuration’ is closed to new replies.