Docs

[davidferp]

Hello X-Team

In my site I want to have some animation done on the navigation bar when scrolling. I found some similar threads on this topic already in the forum but in my case the logo is located in a menu entry rather than in the normal logo location on the navbar and I assume the way to proceed might be slightly different.

So, that’s what I need on the navbar when scrolling

1) Reduce the height of the navbar background and menu.
2) Change the logo when scrolling.
3) Also, the transition between the default navbar style and the one after starting the scroll should be smooth.

I hope it can be done

Thanks a lot!

[davidferp]

This reply has been marked as private.

[Lely]

Hi There,

1.) I can see that you have achieve this partly. Add this CSS to move the link in the middle:

.x-navbar.x-navbar-minimalist .desktop .x-nav > li > a {
    padding-top: 23px;
    -moz-transition: padding 1s ease;
    -webkit-transition: padding 1s ease;
    -o-transition: padding 1s ease;
    transition: padding 1s ease;
}

2.) Add this custom CSS:

.x-navbar.x-navbar-minimalist .desktop .x-nav > li.logo-menu-item > a {
    background: url(http://2c1bl.wpstagecoach.com/wp-content/uploads/2016/09/tornPaperSection_stripe1_v4_tiny.png) no-repeat center center;
    -moz-transition: background 1s ease;
    -webkit-transition: background 1s ease;
    -o-transition: background 1s ease;
    transition: background 1s ease;

}

Update the image to your preferred logo when scrolling.

3.) Also update this:

.x-navbar-minimalist {
    background-color: #ffffff !important;
    height: 70px !important;
}

To this:

.x-navbar-minimalist {
    background-color: #ffffff !important;
    height: 70px !important;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

See this:http://screencast-o-matic.com/watch/cDQDFbjo1H

Hope this helps.

[davidferp]

Thanks a lot!, that’s awesome!

One more thing. I am now using the actual logo I want to display after scrolling and I can’t figure out the way to align it with the rest of the menu after scrolling (following the direction of the red arrow in the attached picture).

Any thoughts?

Thanks X-Team!

[Rupok]

Hi there,

You need to adjust the height, width and backround size. Let’s add this as well at the bottom of all otehr code s :

.x-navbar.x-navbar-minimalist .desktop .x-nav > li.logo-menu-item > a {
  background-size: 70px auto;
  height: 60px;
  width: 150px;
}

Or you can just adjust the height and width on previous code.

Cheers!

[davidferp]

Just perfect! You guys rock! X rocks!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts