WordPress.org

Ready to get started?Download WordPress

Forums

Theme (or Plugin) with Style-able Sidebar Navigation (6 posts)

  1. questions4wp
    Member
    Posted 2 years ago #

    I'm having a surprisingly tough time finding information on the best way to make a website with sidebar navigation. I like the default menu bar in the TwentyTen and TwentyEleven themes, but they go across. The person I'm making a website for has a ton of pages (with no parent-child relationships), so using the default menu scheme makes a 2 or 3 line menu, which doesn't look very good.

    What I'd like is for the pages to be listed going down the sidebar, but I'd like to be able to style the CSS of them myself. You'd think that'd be easy! =) I tried using the Custom Menu widget available without a plugin/theme download, and it works, in that the pages of the site are listed vertically. However, I can't seem to find any information on editing the CSS of the custom menu widget. Anyone have any information?

    Alternatively, I tried using the Simple Sidebar Navigation plugin, and although I was able to set up a menu on the sidebar, I could not figure out how to style it.

    Any help you can offer would be much appreciated! Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    You just need to use basic CSS to style anything on the page -- including a sidebar navigation.
    See: http://codex.wordpress.org/CSS
    http://www.w3schools.com/css/
    There are many other resources available online...

    Firebug is a great tool for identifying the CSS code you need to change.

    If you post a link to your site, someone can likely give you more specific direction on getting started on the CSS.

  3. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    WordPress provides all of the CSS classes that you need for styling your navigation menu however you like.

    The three primary functions for outputting navigation/page lists, wp_nav_menu(), wp_page_menu(), and wp_list_pages(), all output their content as HTML lists. The horizontal, dropdown menu output by Twenty Eleven is all CSS-driven.

    Here are the CSS classes for:

    * Lists generated by wp_nav_menu()
    * Lists generated by wp_page_menu()
    * Lists generated by wp_list_pages()

    For your case, I would recommend using wp_list_pages().

  4. questions4wp
    Member
    Posted 2 years ago #

    Thanks Chip, I'm going to try messing around with that, would you recommend putting the wp_list_page() function in a widget in the sidebar or something different?

    WPyogi - I don't have a link I can provide unfortunately, but if you use the default theme (Twenty Eleven) and add a Custom Menu widget to the sidebar, the contents of that are what I'm trying to edit in CSS.

  5. Chip Bennett
    Theme Review Admin
    Posted 2 years ago #

    ...would you recommend putting the wp_list_page() function in a widget in the sidebar or something different?

    As this is a client project, I would just put the call to wp_list_pages() directly in the appropriate place in the template. No need to use Widgets, since it's not intended to be user-configurable.

  6. questions4wp
    Member
    Posted 2 years ago #

    Worked like a charm! Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.