Menu Fix on Scroll with resizing

23 Posts

Kos posted this 26 October 2016

Hi,

here is what I'm trying to do:
I have menu on top
Menu height 100px
Menu items padding is 40px to make item in the middle and button itself full height on Menu.
so.. now I want to make Menu Fix On Scroll. I go to Extensions and select Fix On Scroll.
that works fine.
BUT... I'm also want to make Menu height smaller what Fix On Scroll activates.
I go to Extensions -> Fix on scroll options -> Shape Options and changing Height to 50px
But when trying to scroll, I can see that the Shape is changing the Height to 50px, BUT Menu Item Padding is still 40px and this is not changeable
So, other words - how can I setup menu with Fix on Scroll and it should change the shape to smaller when Fix on Scroll activated. Two attachments that explains what I'm mean. attachment 1 when Fix on scroll not Activated, Attachment 2 when scroll down. Shape changed to 50px but menu item padding is still 40px and does not make any difference on menu.

Can you pls advice how to make Wide Menu to be changed to small menu when fix on scroll?
P.S. I could do it with the custom additional css, but would like to know if it's possible within the Themler controls

Hi, here is what I'm trying to do: I have menu on top Menu height 100px Menu items padding is 40px to make item in the middle and button itself full height on Menu. so.. now I want to make Menu Fix On Scroll. I go to Extensions and select Fix On Scroll. that works fine. BUT... I'm also want to make Menu height smaller what Fix On Scroll activates. I go to Extensions -> Fix on scroll options -> Shape Options and changing Height to 50px But when trying to scroll, I can see that the Shape is changing the Height to 50px, BUT Menu Item Padding is still 40px and this is not changeable So, other words - how can I setup menu with Fix on Scroll and it should change the shape to smaller when Fix on Scroll activated. Two attachments that explains what I'm mean. attachment 1 when Fix on scroll not Activated, Attachment 2 when scroll down. Shape changed to 50px but menu item padding is still 40px and does not make any difference on menu. Can you pls advice how to make Wide Menu to be changed to small menu when fix on scroll? P.S. I could do it with the custom additional css, but would like to know if it's possible within the Themler controls

menu fix-on-scroll

fixonscroll-1.PNG

fixonscroll-2.PNG

Vote to pay developers attention to this features or issue.

5 Comments

Order By: Standard | Newest

Support Team posted this 27 October 2016

Hi,

The following article may be helpful:
http://answers.themler.com/articles/96208/change-header-height-on-scroll

Thank you,
Olivia

Hi, The following article may be helpful: http://answers.themler.com/articles/96208/change-header-height-on-scroll Thank you, Olivia

23 Posts

Kos posted this 27 October 2016

Thanks Olivia, this makes perfect sense for Header... but does not apply to my question.
how can I apply this to menu item?
initially Menu Item Padding top and bottom 40px, but when Fix on Scroll padding should be 0px
what class* i have to use?
on the screenshot attached I have indicated what element should be changed to 0px when Fix on Scroll activated.

Thanks Olivia, this makes perfect sense for Header... but does not apply to my question. how can I apply this to menu item? initially Menu Item Padding top and bottom 40px, but when Fix on Scroll padding should be 0px what class* i have to use? on the screenshot attached I have indicated what element should be changed to 0px when Fix on Scroll activated.

fixonscroll-3.PNG

Is Solution

Support Team posted this 28 October 2016

Hi,

The solution is the same. You just need a different classes. Something like:

.affix-top [class*="bd-hmenu"] [class*="bd-menuitem"].bd-toplevel-item > a
{
padding-top: 40px;
padding-bottom: 40px;
}

.affix [class*="bd-hmenu"] [class*="bd-menuitem"].bd-toplevel-item > a
{
padding-top: 20px!important;
padding-bottom: 20px!important;
}

Thank you,
Olivia

Hi, The solution is the same. You just need a different classes. Something like: <pre> .affix-top [class*="bd-hmenu"] [class*="bd-menuitem"].bd-toplevel-item > a { padding-top: 40px; padding-bottom: 40px; } .affix [class*="bd-hmenu"] [class*="bd-menuitem"].bd-toplevel-item > a { padding-top: 20px!important; padding-bottom: 20px!important; } </pre> Thank you, Olivia

23 Posts

Kos posted this 28 October 2016

Thanks Olivia!!! I was doing almost the same, but could not make proper punctuation.

Support Team posted this 30 October 2016

Hi,

You're welcome.
Please let us know if you need our further assistance.

Thank you,
Olivia

Hi, You're welcome. Please let us know if you need our further assistance. Thank you, Olivia

You must log in or register to leave comments