Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #1408323

    Hello – I want to create a similar page layout and left side menu as seen here:

    I’ve been using Enfold for many years but I haven’t figured out how to recreate something similar to the above. Any tips would be appreciated. Thanks!


    Update – I have the left sidebar navigation menu in place but I still need advice on creating behavior like a frameset. I’d like the left sidebar navigation to be persistent while the content on the right changes based on the menu item selected in the left sidebar. Is creating multiple pages with the same left sidebar the only option? Such as this technique:

    • This reply was modified 9 months, 1 week ago by ihf-eramstad.
    • This reply was modified 9 months, 1 week ago by ihf-eramstad.

    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,


    Thanks for the above. I have the sidebar enabled as discussed in this old thread:

    I see the titles of subpages appearing as links in my left sidebar.

    – How do I style the titles of the subpage titles – I’d like to style the text, add hover effects, etc. I inspected the demo site ( for clues – I assume I have to use CSS since I haven’t found any styling options.
    – I assume I use widgets to add additional content to the sidebar? It looks like the demo site uses text widgets for the additional sidebar content.



    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,


    Thanks, Mike. I switched to using HTML in sidebar widgets and I’m styling those individually.

    I want to hide the sidebar at a specific breakpoint (mobile breakpoint) for just this page so that mobile-only elements will replace the content of the sidebar. What’s the best method for doing this just for this page?


    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,


    Thanks! One more question – is there a way to keep the left sidebar fixed so it doesn’t scroll with the page?


    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,


    Sorry – I’d like the content in the sidebar to be sticky, so that it’s fixed in place as the page content scrolls on the right, like an old school frameset behavior.
    Page info in private.


    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() { ?>
    (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() });
            $'float', 'right');
          if ($(this).scrollTop() < 1 && position) {
            $sticky.css({ 'position': 'static', 'top': '0px', 'width': '' });
            $'float', 'left');
    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,


    Got it – thanks!


    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,

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Page navigation design advice’ is closed to new replies.