The place to discuss all things related to the Exponent Content Management System

Any responsive / bootstrap vertical navigation available?

edited January 2014 in Modules
We have a site that it is responsive and we have the content are divided in LEFT and MIDDLE content column.

When there are sub-pages, we have a navigation (children and siblings, used the Exp Default view) on the LEFT column. Since there is no accordion type of effect or other space saving method, the viewer can't understand that below the navigation the content is actually opening properly. It is just not visible without scrolling in tiny screens.

Any solution available for this?


  • Actually the fix is already in v2.2.3 (or at least the patches) in the shipped/example bootstraptheme. Take a look at the 'index.php' theme template, in particular we've reversed the sequence/order of the #content & #sidebar sections and also added a 'pull-left' & 'pull-right' class to each (you also might note the 'well' class on the sidebar to make it stand out).

    Then in the less/bootstraptheme.less stylesheet...we've added styling for #content and #sidebar to make the whole thing work.

    These two styling 'tricks' makes the columns appear correctly on a large display, and since the #content comes before the #sidebar, it will be at the top of a small display.
  • I'll have a look. This sounds interesting for other content purposes as well.
    But if the navigation goes below the content in this case, it won't be desired effect either if you meant that with the post.
    Or did you mean that there is some solution that the vertical navigation takes a form like the "flydown" does when in mobile view?
  • I must apologize, I read your post too quickly and made several assumptions. Thanks for clarifying my error.

    At present we do NOT have a responsive vertical menu. You MIGHT try to create a new 'mobile' theme variation by creating a single column theme template with a menu at the top/bottom. You can look at the /themes/simpletheme/mobile/index.php file as an example. In that example we use the show_Top_Nav view at the bottom of the page.
Sign In or Register to comment.