Docs

[sargentaiden]

I’d like to get my navbar to shrink, like this site does: http://venturekamloops.com/, when you scroll down. My site: https://performancehoops.ca

I’ve seen some websites use this, but I don’t know how to achieve it on Theme X.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top .x-brand.img img {
    width: 13%;
    display: inline-block;
    transition: all 0.3s linear;
}
a.x-brand.img {
    width: 30%;
    display: inline-block;
    float: left;
}
.x-navbar.x-navbar-fixed-top li a {
    height: 19px !IMPORTANT;
    padding-top: 12px !important;
    transition: all 0.3s linear;
}
.x-navbar.x-navbar-fixed-top .x-navbar-inner {
    height: 15px !important;
    transition: all 0.3s linear;
    min-height: 10px !important;
}
a.x-brand.img img {
    transition: all 0.3s linear;
}
}

Hope that helps.

[sargentaiden]

It’s not bad, but I’d like the font to shrink a bit too; however, if you hover a link in the navbar after scrolling down and the shrinking occurs, the sublinks that pop-up are all shrunken together… I do not want that to happen.

[Nabeel A]

Hi again,

Please add the following code in your Customizer as well:

.x-navbar-fixed-top .desktop .x-nav > li > a > span {
    font-size: 11px !important;
}
@media screen and (min-width: 979px) {
.x-navbar.x-navbar-fixed-top .sub-menu li a {
    height: auto !important;
    padding-top: 0.5em !important;
}
}

Let us know how this goes!

[sargentaiden]

It worked! Thank you 🙂 🙂

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts