Home Forums Community Forum Changing Avada theme header height

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • fochie
    Participant
    Post count: 6

    Greetings … first time post …

    Searching this forum leads me to believe that the only way to change the Avada theme header height is via Custom CSS
    (which amazes me since this seems like a no brainer option that would be included in the theme admin interface </rant>)

    Problem I’m seeing –
    If I use Custom CSS to change the header height without the !important option the header height does not change.
    If I include the !important option for the header height it works but when I scroll down the page the header value stays the same and my sticky header height appears too big.

    I’ve been using Chrome Dev tools to trace the CSS actions.

    When I scroll the page down I see the custom CSS Header height with !important is still being used when the sticky header is displayed.

    If I don’t specify !important on the header height custom CSS I see that my custom header height briefly works as the page loads but then is over-ridden.

    Can anyone suggest how to alter the header height without that setting also being used when the sticky header is displayed ?

    Example Custom CSS I’ve been trying –

    .fusion-header {
    height:92px !important;
    }

    .fusion-header-sticky-height {
    height:65px;
    }

    /*
    .fusion-header-v1 {
    height:92px !important;
    }
    .fusion-header-wrapper {
    height: 92px;
    }
    */

    Any comments/suggestions/advice are most appreciated.
    Thanks !

    fochie
    Participant
    Post count: 6

    Solved this with assistance from the Themefusion support team (IMHO great official support so far)

    Issue was resolved by cropping my header logo a bit and tweaking several admin interface padding settings –
    Top and bottom padding of the header
    Logo top and bottom margins
    Main menu height

    Support team also provided a custom CSS workaround (which I tried first and it worked) in the event the above tweaks didn’t do the job. Ended up modifying things as described above and disabling the custom CSS.

    Here’s the custom CSS workaround in case anyone’s interested –

    header.fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header {
    height: 160px!important;
    }

    mimber
    Participant
    Post count: 2

    Is there also a way to control the padding of the space between the header content 1/2 and the top of the logo? The above CSS code only changes the spaces between the bottom of the logo and the main menu (in header 4).

    mimber
    Participant
    Post count: 2

    Solved the problem by looking in another part of this forum. Use negative numbers in the top/bottom Logo margin values.

    benbland
    Participant
    Post count: 1

    Maybe obvious but I found one more setting on top of those above that helped with what I thought was an oversized header. I reduced the ‘Page Content Padding’ in the ‘Layout’ section (of Avada > Theme Options) to bring the main content higher up.

    JASutherland
    Participant
    Post count: 1

    This was also the fix that worked best for me.

    lindalou
    Participant
    Post count: 1

    Would you mind directing me to where you found the fix, I’ve been playing around with these codes for over an hour and haven’t been able to find it, and I’m no newbie, been at this since 96′ LOL…
    Thank you for your kind reply…

    Michael
    Keymaster
    Post count: 575

    Hi @lindalou

    You have active support and our support team does not provide support via the community forum. If you need assistance please create a support ticket using the link below and our support team will gladly assist you.

    Click Here To Get Avada Support

    Thank you kindly

    Steve
    Participant
    Post count: 23

    @lindalou I suspect that a lot of the structure has changed since 2018 which is probably why you are running into some problems. Using the custom header builder (not available in 2018) should solve most of your problems (unless you have a complex mega menu). You can reach out to support as Michael has suggested or take a look at their videos on the custom header builder.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.