Make navbar smaller on scroll

[Jeypolitan]

Hi there!

1. I would like my navbar to become a bit narrower than it is currently. I’ve checked everywhere in the Customizer, is there no way to make it narrower without a code?

2. I’d like my navbar to become smaller/narrower on scroll, but back to its original size when you scroll up to the top again. Similar to this navbar: http://www.gidsingezondheid.nl/

How can I achieve this with my website?

Many thanks!

[friech]

Hi There,

Thank you for writing in, but we cant view your site, the authentication you provided did not work. Please confirm.

In the meantime, please follow the suggestion provided here.

Cheers!

[Jeypolitan]

Hi there.

The code in the suggestion link you provided did not work.

Could you please try again with the amended login details in my secure note?
Thank you!

[jade]

Hi there,

Please try this:

@media(min-width: 980px){
    .x-navbar-fixed-top .x-brand img {
        width: 165px;
    }

    .x-navbar-fixed-top .ubermenu.ubermenu-main .ubermenu-item-level-0 {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .x-navbar-fixed-top .x-brand {
        margin-top: 12px;
    }    

}

---

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

[Jeypolitan]

Hi Jade,

Thank you for your help.
This code worked but the navbar transition from large to small is a bit jumpy.

Can you please help me achieve a smooth transition similar to this page:
https://www.bigwhitewall.com/v2/Home.aspx#.VjOpw2R4uGg

Thank you!

[thai]

Hi There,

Please also add this custom CSS:

.ubermenu.ubermenu-main .ubermenu-item-level-0,
.x-brand {
    transition: all 0.5s ease-in-out;
}

Let us know how it goes!

[Jeypolitan]

Hi Thai,

Thank you - that worked perfectly.

The subnav is not correctly attached to the main nav (see screenshot below) - it is a bit too high. How can I make them attach, so the subnav opens exactly below the main nav?

Is it also possible to fix this directly through UberMenu without the need of a CSS code?

Appreciate your help!

Many thanks

[Alaa]

Hi Jeypolitan,

I believe there is no option in UberMenu that can alter this behavior, you can use this CSS snippet to achieve that:

.ubermenu-item-has-children > a.ubermenu-target:first-child  {
    height: 70px;
}
.ubermenu-item-has-children {
    margin-bottom: 0!important;
}
.ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target>.ubermenu-sub-indicator {
    top: 35%;
}

Thanks.

[Jeypolitan]

Thank you but that code removed the previous function which made the navbar smaller upon scroll (and keeping the text centred - please see the comments above).

How can I make the submenu attach to the bottom of the main menu, with still keeping the current functions of making the navbar smaller upon scroll?

Thank you

[rad]

Hi there,

Are a bit contradicting, please note that sub-menu uses absolute positioning. Hence, if it gets smaller, there will be gaps between main and subs. This is possible with theme’s builtin menu, but not with Ubermenu since it’s all calculated by javascript. You’ll have to choose which behavior to retain and to remove.

Thanks!