Get Oxygen


Home Forums Code Sticky header with some nice transitions

This topic contains 3 replies, has 3 voices, and was last updated by  Jason Louth 5 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #21259


    Another nice effect with some cool transitions 😉

    1/ Create your header and enabled the Sticky option.

    2/ do NOT put 0 for the scroll distance. Just put 2 :

    3/ add your logo in the left row and your menu in the right row (not in the middle one).

    IMPORTANT : add a Height to your logo :

    And also a Height to the Header Row :

    Then for the CSS :

    .oxy-header.oxy-sticky-header-active { background-color:rgba(215, 45, 70, 0.9); }
    .oxy-header.oxy-sticky-header-active img { height:30px!important;}
    .oxy-header img { transition:0.5s ease all  }
    .oxy-header.oxy-sticky-header-active #_header_row-3-41 { height:50px }
    #_header_row-3-41 {transition:0.5s ease all}

    Replace "#_header_row-3-41" by your header row ID.




    Great tutorial! I'm having trouble changing the background color, when it becomes sticky. For example, my menu is gray, but when it goes stick I want the background to turn white with some transparency. Is this possible?


    Jason Louth

    I'm having difficulty with the full sized header (prior to shrinking). It's sized perfectly, but it's fully transparent. I've tried adding a background color with .75 opacity in many places, but it never appears. Can anyone let me know how to have the full sized header include a background color with opacity? Thanks!

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

You must be logged in to reply to this topic.

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2018
Designed with Oxygen.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram