How to adjust height of header

Hi rubieandersson!

Can you post the link to your website or tell us which type of header you are using? You can check it in Enfold theme options under Header tab

Best regards,
Yigit

Hey!

Please add following code to Quick CSS in Enfold theme options under Styling tab

.logo, .logo a, .logo img { max-width: 156px!important; }

#header_main .container, .header_color .main_menu ul:first-child > li > a {
height: 156px!important;
line-height: 156px!important;
}
.fixed_header #main {
padding-top: 156px;
}

Regards,
Yigit

Hi!

Some part of code is not being applied. Please try adding the code to Custom.css file inside Enfold/Css folder

Regards,
Yigit

Hey!

Do you mind creating a temporary admin login and posting it here privately so i can take a look?

Regards,
Yigit

Hi!

Fixed. > punctuation mark was turned into html and that caused the issue. I replaced it and removed the code you have added for your logo as the one i posted makes it display fullwidth and it seems to be working fine now

Regards,
Yigit

Hi!

I have adjusted a bit. If you would like to change its position, please find following code in Quick CSS and change the value

.header_color .main_menu ul:first-child > li > a {
line-height: 180px!important;
}

Cheers!
Yigit

Hi!

Please review your website :) You will find logo max-height: 100px in Quick CSS. You can decrease it to make it smaller or increase to make it bigger.

Best regards,
Yigit

Hey!

Please flush browser cache and refresh your page a few times. It works as you explained.

Best regards,
Yigit

Hey!

You earlier said and i quote “Also, right now the header bar shrinks while I move down the page. How can I make it static?“.
Customization you asked was beyond the scope of support we can provide but i wanted to finish what i started but it is getting more and more complicated..
To achieve what you would like, you need to make some changes on the code i posted earlier and go to wp-content\themes\enfold\js folder and open avia.js file and find

el_height       = $(elements).filter(':first').height(),
            isMobile        = 'ontouchstart' in document.documentElement,
            scroll_top		= $('#scroll-top-link'),
            set_height      = function()
            {
                var st = win.scrollTop(), newH = 0;

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

to

el_height       = 156,
            isMobile        = 'ontouchstart' in document.documentElement,
            scroll_top		= $('#scroll-top-link'),
            set_height      = function()
            {
                var st = win.scrollTop(), newH = 0;

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

Cheers!
Yigit

Hi!

You just need to change these line of codes:

if(st < el_height/2)

Replace with:

if(st < el_height/1.5)

And this line of code:

newH = el_height/2;

Replace it with:

newH = el_height/1.5;

You can see those lines inside the function avia_header_size() on line 1285. Remove browser cache and reload the page a few times to see the effect.

Cheers!
Ismael

Hey!

@kinkel thanks for sharing :)

Cheers!
Yigit