Reduce The Size of Centered Logo when you scroll

  • Resolved MooK

    (@kubelyan)


    7 years, 6 months ago

    Hi,

    I use the centered logo layout [menu] [menu] [menu] [logo] [menu] [menu] [menu].
    Looks great when you initially open the site. But when you start scrolling down it stays the same size and look a little unpleasant.
    What can you suggest me to do in order to reduce the size of logo when you start to scroll up and down (make it fit to the navigation bar) ?

    Thanks

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

  • Hi,

    You can add this CSS code into “Customize > additional CSS” to reduce the site logo when the page is scrolled:

    .site-header.float-header .site-logo {
    height: 70px;
}

    feel free to adjust the value of the height.

    Thread Starter MooK

    (@kubelyan)

    Thank you very much. Looks amazing!!!!
    I have one more question regarding the menu, but on mobile devices.
    Is it possible to make mobile menu (just the menu, not the logo) sticky, when you scroll?

    thanks

    Hi, yes.. try this:

    @media only screen and (max-width: 767px){
  .site-header.float-header {
    position: fixed !important;
    top: 0 !important;
  }
  .site-header.float-header .site-logo {
    display: none;
  }
}
    Thread Starter MooK

    (@kubelyan)

    Work great!!!
    Thank you so much!!! ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Reduce The Size of Centered Logo when you scroll’ is closed to new replies.