Announcement

Collapse
No announcement yet.

Lefty skin

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Lefty skin

    Hi,
    I'm looking into using the Lefty skin for a website. But is it possible to have the sidebar including the menu stay fixed while scrolling content?

    Is there some documentation on this how to achieve this?

  • #2
    The problem is that the header (holds the logo) and the sidebar don´t share the same container and the content div is between them in the source. So, making header + sidebar being sticky together, staying in position, could get pretty tricky (imho - never tried actually) using just CSS.
    And no, that´s not documented.

    But if it´s just about the sidebar: There are plugins to make any element sticky when it reaches the top (could be achieved with just JS if you´re familiar with it). Don´t know if and how they account for mobiles though.
    If you own the StudioPress package, you could also look at their "Sixteen Nine" childtheme as menu is fixed (but sidebar scrolls and is on the right side).

    Comment


    • #3
      Hi,
      Thanks SiGa. I checked out the Sixteen Nine childtheme. It is quite nice. It is actually done by using a vertical header. So the menu is in the vertical header included as a header widget.


      Really a nice solution for vertical menu's. So I looked into getting Dynamik Website builder to work with a vertical header. I couldn't find any information about that. If anyone knows how to do that with Dynamik I would be very interested. Maybe a suggestion for new Dynamik functionality?

      In the mean time I looked into other options. To get a vertical sticky menu I also looked into several menu plugins but find them very 'heavy'.

      So I turned my eyes on Q2W3 Fixed widget. It looks compact and the developer seems responsive to support questions. The resulting Sticky Sidebar Menu widget is working and is kind of responsive as Dynamik 'automatically' goes to responsive menu's and the sidebar is shown below the content.

      One problem though. I found that sublevel menu items are allways open if I use a custom menu widget in my sidebar.

      Luckily I found some custom CSS with some javascript here:
      http://mysitemyway.com/docs/Collapsible_sidebar_menus

      So I adapted this to the following Custom CSS:
      Code:
      /* Collapsible Collapsible sidebar menu*/
      .menu .dropdown .sub-menu { display: none; }
      And this in Custom Javascript:
      Code:
      // Collapsible sidebar menu
      jQuery(document).ready(function(){
           jQuery('.menu .dropdown a').click(function(e){  
                if (jQuery(this).parent().children('.sub-menu:first').is(':visible')) {
                     jQuery(this).parent().children('.sub-menu:first').hide();
                } else {
                     jQuery(this).parent().children('.sub-menu:first').show();
                }
           });
      });
      Problem is I can collapse the top level of the menu and it opens at clicking it. But if I click on the submenu items the page's don't open?!? It was because of the line of code:
      e.preventDefault();

      I removed that and now I have a Sticky vertical menu.
      Last edited by aski; 03-13-2017, 11:33 AM.

      Comment

      Working...
      X