Right Sidebar Menu Sticky - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
September 23, 2024 at 10:52 am #1467650

manurimini
Participant

Hello
When I set Logo And Main Menu > Right Sidebar, the option Sticky Sidebar Menu disappears.
Is there a way to set “Sticky if Sidebar is smaller then the screen size, scroll otherwise” also in the Right Sidebar Menu?
Best wishes
Manu

September 24, 2024 at 5:19 am #1467706
Ismael
Moderator
Hey manurimini,

Thank you for the inquiry.

You can try this css code but it might break the layout of the content container:
```
.html_header_right #top #header {
    right: 0;
    position: fixed;
    -webkit-backface-visibility: hidden;
}
```
Best regards,
Ismael
September 24, 2024 at 2:03 pm #1467740

manurimini
Participant

Hey Ismael
The code works partially, because it does not have the “scroll otherwise” feature.
Best wishes
Manu

September 25, 2024 at 6:52 am #1467779

Ismael
Moderator

Hi,

Thank you for the update.

it does not have the “scroll otherwise” feature.

Unfortunately, this feature is unavailable when the right sidebar is enabled. You may need to switch back to the left sidebar if you require the sticky scroll behavior.

Best regards,
Ismael

September 25, 2024 at 7:50 am #1467785

Guenni007
Participant

What is this “scroll otherwise” – i did not hear it before – is it the post navigation arrows on single events?

September 25, 2024 at 10:18 am #1467793
manurimini
Participant
Hello Guenni
First of all, I would like to thank you for all the interventions you make on this forum that have helped me over the years to solve various issues.
When you use General Layout > Logo And Main Menu > Left Sidebar you have three choices in the tab Sticky Sidebar Menu (You can choose if you want a sticky sidebar that does not scroll with the content):
1 – Never Sticky
2 – Always Sticky
3 – Sticky if Sidebar is smaller then the screen size, scroll otherwise
You have this choices only if you use the Left Sidebar Menu
If you switch to Right Sidebar Menu the options tab Sticky Sidebar Menu is not available and as Ismael wrote with CSS unfortunately the feature “Sticky if Sidebar is smaller then the screen size scroll otherwise” when the right sidebar is enabled is impossible to set.
So, for now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.
```
#header_main {
  overflow: auto !important;
  max-height: calc(100vh - 40px); /* the -40px works for me but it depends on the lenght of your header */
}
```
Of course it would be nicer to have a function to make it scrollable as in the Left Sidebar Menu without the sidebar but my knowledge of php and js is very poor
Best wishes
Manu
- This reply was modified 1 month, 4 weeks ago by manurimini.
September 25, 2024 at 10:20 am #1467794
manurimini
Participant
Hello Ismael
For now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.
```
#header_main {
  overflow: auto !important;
  max-height: calc(100vh - 40px); /* the -40px works for me but it depends on the lenght of your header */
}
```
Of course it would be nicer to have a function to make it scrollable as in the Left Sidebar Menu without the sidebar but my knowledge of php and js is very poor
Best wishes
Manu
- This reply was modified 1 month, 4 weeks ago by manurimini.
September 25, 2024 at 1:06 pm #1467804
Guenni007
Participant
Edit : better solution see next post
- This reply was modified 1 month, 3 weeks ago by Guenni007.
September 25, 2024 at 1:31 pm #1467805
Guenni007
Participant
or – maybe a simpler idea – we use the left header sidebar ! – and just handle the #wrap_all as a flex container – and define the order in this way that the header goes to the right side
```
@media only screen and (min-width: 768px) {
  #wrap_all {
    display: flex !important;
    flex-flow: row nowrap;
  }

  #wrap_all #header {
    order: 2;
    flex: 0 1 27%;
    right: 0;
    left: auto;
  }

  #wrap_all #main {
    order: 1;
    flex: 0 1 73%;
    margin-left: 0 !important;
    border-left: none !important;
  }
  
  .responsive #top .header_bg {
    box-shadow: -5px 0px 5px -5px #666;
  }

  /*** because submenu is defined to a width of 208px ***/
  #top #avia-menu > li.dropdown_ul_available > ul.sub-menu {
    left: -207px
  }

  /*** have a bit more space from main menu-item to the fly-out submenu ***/
  .html_header_sidebar #header .av-main-nav>li {
    margin-left: 5px !important;
    padding-left: 13px;
  }
}

@media only screen and (min-width: 990px)  {
  #wrap_all #header {
    flex: 0 1 300px;
  }

  #wrap_all #main {
    flex: 0 1 calc(100% - 300px);
  }
}
```
see: https://enfold.webers-webdesign.de/
( the scroll away after some time does not belong to that settings here. – this is part of the inital Headersetting )

this is not styled to the end – becaue i want to go back to the original setting of header on top.
above all, you now have to extend the subnavigation to the left – but that shouldn’t be a problem using css.
September 25, 2024 at 2:13 pm #1467807
Guenni007
Participant
i remember there is a difference on the width in between 768 and 990 px of the header – then you had to adjust this here too ( 300px versus 27%)

PS: i changed the code above to fit with this knowledge.
- This reply was modified 1 month, 4 weeks ago by Guenni007.
September 30, 2024 at 5:34 am #1468081

Ismael
Moderator

Hey!

For now I’ve solved the issue by adding a scrollbar to the header to have the menu visible in every screen height.

Glad to know that you managed to find a working solution. You can also try @Guenni007 solution above. Please feel free to open another thread if you have more questions about the theme.

@Guenni007: Thank you for the suggestion.

Regards,
Ismael
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.