Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 23, 2024 at 10:52 am #1467650
    manurimini

    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

    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

    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

    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

    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

    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 2 months, 4 weeks ago by manurimini.
    September 25, 2024 at 10:20 am #1467794
    manurimini

    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 2 months, 4 weeks ago by manurimini.
    September 25, 2024 at 1:06 pm #1467804
    Guenni007

    Edit : better solution see next post

    • This reply was modified 2 months, 3 weeks ago by Guenni007.
    September 25, 2024 at 1:31 pm #1467805
    Guenni007

    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

    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 2 months, 4 weeks ago by Guenni007.
    September 30, 2024 at 5:34 am #1468081
    Ismael

    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.