Tagged: 

Viewing 24 posts - 1 through 24 (of 24 total)
  • Author
    Posts
  • #210453

    Hey!

    Could someone please tell me how to adjust the height of the header?

    Thank you so much,
    Rubie

    #210480

    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

    #210854
    This reply has been marked as private.
    #210859

    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

    #210861
    This reply has been marked as private.
    #210864

    Hi!

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

    Regards,
    Yigit

    #210866

    Hey again,

    I tried but unfortunately it still looks the same… Please tell me if there’s anything else I can do.

    Thank you so much,
    Rubie

    #210867

    Hey!

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

    Regards,
    Yigit

    #210868
    This reply has been marked as private.
    #210873

    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

    #210883

    Thank you so much!! You are the best! The only problem now is that the there is so much space between the menu and the bottom of the header, is there a way to move the men text down?

    Best,
    Rubie

    #210889

    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

    #210900

    That looks great!! Can’t thank you enough!

    Is it possible to have it like it is right now, but to make the logo shrink slightly when scrolling down, but not as much as it did before? I completely understand if it’s too complicated, but that would make it perfect.

    Best Regards,
    Rubie

    #210902

    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

    #210916

    Hi!

    Sorry to have so many questions. I mean to not make it static, to have it as it is now when you’re up on the page but to change the size of the logo to smaller when you’re scrolling down.

    Thank you so much!
    Best Regards,
    Rubie

    #210918

    Hey!

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

    Best regards,
    Yigit

    #210920

    The logo gets smaller, but the header still the same size. So sorry to be so unclear, but what I was trying to achieve was that the header shrinks as well as the logo…

    Thank you so much!

    Rubie

    #210922

    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

    #210938

    So sorry to be so confusing! I have a client that changes his mind a lot. I truly appreciate all your help. Can’t thank you enough!

    I edited the avia.js css as you said but didn’t know what change to make to the code you posted earlier, so I don’t see any changes. But don’t want you to spend more time on it, so unless it’s some easy code you know on top of your head I will keep it static.

    Again thank you so, so much!!

    Best,
    Rubie

    #211018

    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

    #211337

    may you desired the same as me…
    here is my css solution:

    /* Header Modifikation */

    .logo img {
    padding: 18px 0 !important;
    height: 58px !important;
    }

    .fixed_header.social_header #main {
    padding-top: 88px !important;
    }

    #header_main {
    height: 59px !important;
    }

    ul#avia-menu.menu li a {
    height: 59px !important;
    line-height: 59px !important;
    color: #ffffff !important;
    }

    ul#avia-menu.menu ul.sub-menu li a {
    height: auto !important;
    line-height: 18px !important;
    }

    #211384

    Hey!


    @kinkel
    thanks for sharing :)

    Cheers!
    Yigit

    #255894

    What I want to do is for a couple of selected pages, to show the header and logo display only at the smaller size, even before scrolling. There are a couple of pages where I really want to maximise page space so that visitors don’t have to scroll.
    Is this easily done?
    Thanks
    Tim

    #255915

    I’m not sure that this should be here, so I’m creating a new ticket

Viewing 24 posts - 1 through 24 (of 24 total)
  • The topic ‘How to adjust height of header’ is closed to new replies.