Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #820147

    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

    #820351

    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

    #820794

    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/ (Purchase code hidden if logged out) -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

    #821173

    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

    #822183

    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 4 months, 1 week ago by  midudek1.
    #822194

    Hi,
    Try this code:

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

    Best regards,
    Mike

    #822463

    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

    #822465

    + 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 4 months, 1 week ago by  midudek1.
    #822872

    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

    #822934

    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

    #822960

    I will try to implement the code from here

    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) -down/

    #824286

    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

    #838292

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

    You can close the topic.

    Best regards,
    MD

    #838296

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

    Best regards,
    Mike

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

The topic ‘Header configuration’ is closed to new replies.