Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #213316

    since the original topic got closed, I open a new Topic.
    Link Original Topic http://www.kriesi.at/support/topic/logo-format-shrink/#post-213110

    The following code works nice to change the Logo shrink:
    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 70px !important;
    }

    #top .header-scrolled .main_menu {
    margin-top: 15px;
    }

    I still have the following problem: When I scroll upwards the Logo shrinks, but the Header Menu scrolls a little bit to far to the top. At some point the Header Menu jumps down to the correct position.

    @Yigit: please answer, so I can send you the privat link to my dummy test website…

    Thank you

    #213323

    Hi BASISberlin!

    Please make sure to check “Set as private reply (Only you and moderators will see the content of this post)” above Submit button. Waiting to hear from you

    Cheers!
    Yigit

    #213333
    This reply has been marked as private.
    #213478
    This reply has been marked as private.
    #213678

    Hi!

    Try using this code instead:

    #top .header-scrolled .main_menu {
    margin-top: 12px;
    }

    Best regards,
    Josue

    #213736

    Hi Josue,

    sorry but that doesn’t help. Tried already different options. If I put top margin to 12, the jump gets smaller by 3px. If I set set it to 0px the jump is gone, but the position of the header menue is not correct (little to high)

    It seems that the header menue goes to the right position at a point to late in time (scroll upwards)

    Best,

    Tobi

    Menu Before Jump (Menu scroll up to far)
    MenuBeforeJump

    Menu After Jump (Menu position correct)
    Menu After Jump

    • This reply was modified 11 months ago by  BASISberlin.
    • This reply was modified 11 months ago by  BASISberlin.
    • This reply was modified 11 months ago by  BASISberlin.
    #213865

    Hey!

    Let’s start again. Switch to “Small Fixed Header” on Enfold > Header > Header Type. Use a logo with the actual dimension of 340×156px without the bottom padding. Upload it on Enfold > Theme Options > Logo, select the “Full size” before you click the “Use image as logo” button. Add this on Quick CSS to resize the header and show the full width and height of the logo:

    /*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
    #header_main .container, .main_menu ul:first-child > li a{ height:156px; line-height: 156px; }
    
    .logo, .logo a, .logo a img {
    max-width: 340px !important;
    }

    Please let us know if this is done then give us a link to the test page.

    Best regards,
    Ismael

    #214405

    it is done. the logo shrink works like in the original without any change in the shrink size…

    Best,

    Tobi

    #214406
    This reply has been marked as private.
    #214749

    Hi!

    I think the problem is you’re using a child theme. Please add this code on the child theme’s style.css:

    /*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
    #header_main .container, .main_menu ul:first-child > li a{ height:156px; line-height: 156px; }
    
    .logo, .logo a, .logo a img {
    max-width: 340px !important;
    }

    Regards,
    Ismael

    #214782

    code is added to stylesheet now.

    I additionally added the following to style.css in the child theme

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 70px !important;
    }

    #top .header-scrolled .main_menu {
    margin-top: 15px;
    }

    I still have the same behaviour like adding the code to quick css. Menu jumps down during scroll up…

    Best, T

    • This reply was modified 11 months ago by  BASISberlin.
    #214988
    This reply has been marked as private.
    #215204

    Hey!

    I don’t see the changes here: http://basisberlin.com/dummy/

    Please remove this line of codes:

    .header_scrolled, .logo, .logo a, .logo a img, #header_main .container {
    min-height: 70px !important;
    }
    
    #top .header-scrolled .main_menu {
    margin-top: 15px;
    }

    This css modification is enough to give you a larger header with a higher header size when you scroll the page:

    /*default header: main logo and main menu height. increase max value if you want to use a bigger logo*/
    #header_main .container, .main_menu ul:first-child > li a{ height:156px; line-height: 156px; }
    
    .logo, .logo a, .logo a img {
    max-width: 340px !important;
    }

    Cheers!
    Ismael

    #215234

    Dear Ismael,
    I deleted the code as requested. Now I get a large logo in the beginning which shrinks down to medium size. The Endsize is perfect, only the size in the beginning is still to big.

    Best, T

    #215712

    Hi!

    You just need to decrease the max-width value of Ismael’s code – i.e. replace

    
    max-width: 340px !important;
    

    with

    
    max-width: 200px !important;
    

    and the logo will be displayed smaller.

    Regards,
    Peter

    #215767

    Thanks Dude,
    I added the code in the style css.
    The shrink works now perfect. Only the Header (container?) is too big in the Beginning and the position of the Body (Slider) ist oo high…

    Best, Tobi

    #215770

    Hi!

    Please add following code to Quick CSS as well to increase the top padding of main content

    .fixed_header #main {
    padding-top: 156px;
    }

    Cheers!
    Yigit

    #215979

    Thanks Yigit,
    Code is added. Padding is now fine. End position of the shrink is super, but at the start of shrink the Header is still to high and Menu is not at the correct position. Shrink start to late.

    Just to make sure that I explained myself correct. This is what I try to get: Shrink and everything like in original ENFOLD. In the original the Logo size (and Header size) shrinks from 88px to 44px. The thing I would like to change is, that the Logo (and Header) shrinks from 88px to only about 70px. If the Logo gets smaller, it doesn’t look good anymore….

    Sorry, that it takes so long….
    All the Best,

    Tobi

    #215981

    Hi Tobi!

    Can you try cut&paste all custom CSS code that we have provided you in this topic out of Quick CSS ( basically undo – sorry ) and go to wp-content\themes\enfold\js folder and open Avia.js file and find

    if(st < el_height/2)
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = el_height/2;

    and change it to

    if(st < el_height/1.25)
                    {
                        newH = el_height - st;
                        header.removeClass('header-scrolled');
                    }
                    else
                    {
                        newH = el_height/1.25;

    Initial size of header will be 88px and will be resized to around 70px when scrolled down. You can adjust 1.25 value to adjust it as needed. It was not so clear to me until your last post. I believe that will do exactly what you are asking for

    Best regards,
    Yigit

    #216087

    Dear Yigit,

    thank you for your help. This almost solved it. The code you sent was not completly correct but the following is close enough.

    if(st < el_height/3)
    {
    newH = el_height – st;
    header.removeClass(‘header-scrolled’);
    }
    else
    {
    newH = el_height/1.5;
    header.addClass(‘header-scrolled’);
    }

    Thanks a lot, please mark it solved. Since this not something that can be done in a childtheme it would be nice to have an option to do that update save in a future release….

    Best, Tobi

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

The topic ‘Change Logo Shrink’ is closed to new replies.