Change Logo Shrink

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

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

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

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