Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 28, 2013 at 10:44 pm #25513
    rene53

    Hi,

    How can I change logo size, height and opacity from the non-fixed header, I mean the values the header gets when scrolling.

    Thanks in advance,

    René

    July 1, 2013 at 9:51 am #127220
    Nick

    Hi,

    A non-fixed header is the type of header that this page has, so when you scroll, the header disappears. The fixed header shrinks but stays on top of the page when you scroll down.

    Your question is about a non-fixed header (like the header on this page you are reading now) though I think you are asking about the fixed header.

    The fixed header shrinks by 50% including the logo by use of jQuery. I don’t think opacity is used. Logo size on the demo site ( kriesi.at/themes/enfold is 231w/116h and it shrinks down to 116w/58h automatically via jQuery. The code is located in /js/avia.js in the function that starts on line 809 called avia_header_size()

    Thanks,

    Nick

    July 1, 2013 at 6:31 pm #127221
    rene53

    Hi Nick,

    Of course, you’re right, I meant the fixed header. I found the function, changed line 814 to “newH = el_height*0.8;” and the header responds fantastic now!

    What I meant with opacity: while scrolling the page moves behind the header, but the page was still vagely visible. But again you are right, it had nothing to do with opacity. Setting the background from #header_main in layout.css to #fff solved that issue.

    Thanks a lot for your response!

    René

    July 2, 2013 at 2:18 pm #127222
    Nick

    Hi,

    You need to add the css below to custom.css or quick css, just change the color to whichever you want. This is currently transparent:

    #header {
    
background-color: #FFF;
    
}

    Thanks,

    Nick

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘How to change height and opacity non-fixed header’ is closed to new replies.