Menu - change height on scroll

374 Posts

eleanor posted this 05 July 2017

I have seen lots of lovely menus on sites where you start with one quite deep menu then as you scroll the menu changed to a thinner reduced menu taking up less room but retaining the links.

Can this be done in Themler?

Thank you

Hi I have seen lots of lovely menus on sites where you start with one quite deep menu then as you scroll the menu changed to a thinner reduced menu taking up less room but retaining the links. Can this be done in Themler? Thank you

Vote to pay developers attention to this features or issue.

3 Comments

Order By: Standard | Newest

Support Team posted this 06 July 2017

Hi,

You can enable the Sticky extension for the Menu control and in the options of the Sticky extension >> Shape options set the desired height value.

Sincerely,
Hella

Hi, You can enable the Sticky extension for the Menu control and in the options of the Sticky extension >> Shape options set the desired height value. Sincerely, Hella

53 Posts

Denis L. posted this 01 August 2017

Hi,

To go further on that question, if I put a section in the header containing a logo to the left and the hmenu to the right and activate the sticky for the entire section, is it possible to reduce the height of the menu as well as the size of the logo when you start to scroll down?

See an example of the researched result here: http://applead.rgenesis.com/demo/index-01.html
Note the transition easing too.

If it's feasible with Themler, can you please explain in detail how to achieve it?

Thanks in advance for the help! :)

Hi, To go further on that question, if I put a section in the header containing a logo to the left and the hmenu to the right and activate the sticky for the entire section, is it possible to reduce the height of the menu as well as the size of the logo when you start to scroll down? See an example of the researched result here: http://applead.rgenesis.com/demo/index-01.html Note the transition easing too. If it's feasible with Themler, can you please explain in detail how to achieve it? Thanks in advance for the help! :)

Support Team posted this 02 August 2017

Hi,

Such logo and menu changes can be achieved with the custom CSS code only. You need to specify new logo size and menu height for the .affix class that appears when the page is scrolled. And the smoothness also needs to be implemented with the code.

Sincerely,
Hella

Hi, Such logo and menu changes can be achieved with the custom CSS code only. You need to specify new logo size and menu height for the `.affix` class that appears when the page is scrolled. And the smoothness also needs to be implemented with the code. Sincerely, Hella