Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #24405

    Hey, I would like to change the hight of the HEADER

    - the INITIAL HEIGHT (when the page loads) and

    – the SMALLER HEIGHT after scrolling down.

    Can I assign any fixed values e.g. in pixels or percent?

    If this also will effect the size of the logo, it would be perfect.

    Thanks, Tom



    You can assign the initial height, The smaller height is based on a percent of the initial height.

    Please open up /js/avia.js and find line 776 that looks like

    el_height       = $(elements).filter(':first').height(),

    and change it to something like this, but using the height of the header you want (big). Don’t forget the comma at the end,

    el_height       = 120,




    Thanks, Nick,

    fine, that works – but when I set it to 150 then HEADER unfortunately overlaps the following CONTENT.

    Regards, Tom



    Do you have a url where this is taking place because I am not seeing this on my local. You can mask the url with




    Hey Nick,

    here are 2 screenshots because I´m on localhost – see the word “Home” below the Logo. If I resize browser window to a smaller size it´s ok…

    Screen 1 – large browser window –

    Screen 2 – small browser window –

    In screen 2 you see another problem. The navigation overlaps the logo. As in your current online demo I would like to switch to mobile view at a larger browser size. Where must I modify the code – in CSS (media queries) or in JS-file. What are your settings in online demo?

    Thanks and greetings, Tom



    Since I can’t see your code to give you the correct css for your situation, I will guess. Please add this to your /css/custom.css or to Quick CSS located in Enfold > Theme Options – Layout (textarea at the bottom) . If it doesn’t fit change 247px to a lower or higher number.

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

    Switching to mobile navigation at larger screen size will annoy tablet owners. I think a better solution would be to lower the menu , however to change the screen size that triggers the mobile menu please open up /js/avia.js and find line 1099 which looks like

    switchWidth: 768,

    Change that number above (768) to 790

    and also please add this css but change 767 to whatever number you put above minus one. so if instead of 768 you put 777 then put 776 below.

    @media only screen and (max-width: 767px){
    .responsive .main_menu {
    position: static;



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

The topic ‘Header Height Control // Fixed Header + Social Icons + additional Navigation’ is closed to new replies.