Get Oxygen

Forums

Home Forums Code Sticky header with some nice transitions

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

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

    Mike
    Participant

    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.

    #21260

    Mike
    Participant
    #23392

    j4media
    Participant

    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?

    #48139

    Jason Louth
    Participant

    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.
Legal
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram