Page navigation design advice

Hi,
Thank you for your patience and the link to your example page, each left side menu item opens a new page with the same layout, this is the same as our demo page that you linked to, and this would be my recommendation also. I can’t think of a different solution for the same behavior.

Best regards,
Mike

Hi,
All of the colors for the sidebar menu are set in the Enfold Theme Options ▸ General Styling ▸ Main Content here is a screenshot to show you.

But note that these colors affect multiple element on your site.
If you want to add more content to your sidebar you would add more widgets.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1024px) { 
#top.archive .container main.av-content-small.units {
  width: 100%!important; 
}
#top.archive #main .sidebar {
  display: none !important;
}
#top.archive .container main.content {
 border-right-style: none !important; 
 border-right-width: 0px !important; 
}
}

change 1024px with your break point, change archive with your page ID

Best regards,
Mike

Hi,
I’m not sure what you mean, in our demo the sidebar items stay at the top of the sidebar when you scroll, do you mean that yours are fixed and stay visible as you scroll?
This sounds like you have a added script or plugin doing this, please link to your page so we can see.

Best regards,
Mike

Hi,
For that you will need to add a plugin or a script, and you will need to add more content to your test page.
I see you are not using a child theme so I recommend the WPcode plugin for your customizations, this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets.
Add this code as a new snippet for the Code Type PHP Snippet

function sticky_sidebar_script() { ?>
  <script>
(function ($) {
    $(window).scroll(function (e) {
      var $sticky = $('.inner_sidebar');
      var position = ($sticky.css('position') == 'fixed');
      if ($(this).scrollTop() > 1 && !position) {
        $sticky.css({ 'position': 'fixed', 'top': '170px', 'width': $sticky.innerWidth() });
        $sticky.next().css('float', 'right');
        $sticky.addClass('fixed_element_style');
      }
      if ($(this).scrollTop() < 1 && position) {
        $sticky.css({ 'position': 'static', 'top': '0px', 'width': '' });
        $sticky.next().css('float', 'left');
        $sticky.removeClass('fixed_element_style');
      }
    });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'sticky_sidebar_script');

I added it to this test page so you can it it working, you can adjust the position 170px in the code to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike