Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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

    #123407

    Hi,

    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

    #123408

    Thanks, Nick,

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

    Regards, Tom

    #123409

    Hi,

    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 http://www.goo.gl

    Thanks,

    Nick

    #123410

    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 – http://grab.by/nk52

    Screen 2 – small browser window – http://grab.by/nk5a

    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

    #123411

    Hi,

    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;
    }}

    Thanks,

    Nick

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.