ThemeShaper Forums » Thematic


Can the dropdown menu be horizontal?

(5 posts)
  • Started 12 years ago by ableparris
  • Latest reply from diana
  • This topic is not resolved


  1. Has anyone tried having the dropdown menu horizontal?

    Any advice would be appreciated as a client, not I, is considering this an option.


    Posted 12 years ago #
  2. Hi Able,

    did a quick and dirty test:

    Add the following code to your functions.php:

    function child_add_menuclass($ulclass) {
      return preg_replace('/<ul>/', '<ul class="sf-menu sf-vertical">', $ulclass, 1);
    add_filter('wp_page_menu', 'child_add_menuclass');

    Then add the following lines to your style.css:

    /*** adding sf-vertical in addition to sf-menu creates a vertical menu ***/
    .sf-vertical, .sf-vertical li {
    	width:	10em;
    /* this lacks ul at the start of the selector, so the styles from the main CSS file override it where needed */
    .sf-vertical li:hover ul,
    .sf-vertical li.sfHover ul {
    	left:	10em; /* match ul width */
    	top:	0;
    /*** alter arrow directions ***/
    .sf-vertical .sf-sub-indicator { background-position: -10px 0; } /* IE6 gets solid image only */
    .sf-vertical a > .sf-sub-indicator { background-position: 0 0; } /* use translucent arrow for modern browsers*/
    /* hover arrow direction for modern browsers*/
    .sf-vertical a:focus > .sf-sub-indicator,
    .sf-vertical a:hover > .sf-sub-indicator,
    .sf-vertical a:active > .sf-sub-indicator,
    .sf-vertical li:hover > a > .sf-sub-indicator,
    .sf-vertical li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px 0; /* arrow hovers for modern browsers*/

    This is the code used for the Superfish examples .. need to be adjusted 'cause the examples are working with a fine line between the menu points.



    Posted 12 years ago #
  3. Thanks again, Chris!

    Posted 12 years ago #
  4. diana

    Great solution. This works like a charm, except (you guessed it) IE7 and previous. There it sets at the top of the sidebar, rather than between primary and secondary widgets, and aligned with the top of the container.

    Any ideas how to fix this other than creating a lte IE 7 CSS?

    Here's the relevant line in my functions.php:

    // removes main menu
    function remove_access() {
    add_action('init', 'remove_access');
    // adds main menu to sidebar
    add_action('thematic_betweenmainasides', 'thematic_access');
    // converts menu to vertical
    function child_add_menuclass($ulclass) {
      return preg_replace('/<ul>/', '<ul class="sf-menu sf-vertical">', $ulclass, 1);
    add_filter('wp_page_menu', 'child_add_menuclass');

    Issues lives at

    Posted 11 years ago #
  5. diana

    OK, I figure out how to fix this issue with CSS positioning, but another thing's come up with the same set up.

    The menu and the second sidebar do not show up on newly created pages while they remain on existing pages. Since I'm using multiple templates, I've made sure that the new page is using the same template as the existing pages where all the info shows up to make sure there's not something wrong in the template. I've also cleared cache on the existing pages that work to eliminate that same possibility. It doesn't matter where on the site, whether it has a parent or not.

    Try going to Maps > Magazine Pages at the link above to see what I mean.

    What could be causing this issue?

    I've made some edits to the default template as follows:

    <?php get_header() ?>
    	<div id="container">
    		<div id="content">
    <?php get_sidebar('page-top') ?>
    <?php the_post() ?>
    			<div id="post-<?php the_ID(); ?>" class="<?php thematic_post_class() ?>">
    				<div class="entry-content">
    <?php the_content() ?>
    <?php edit_post_link(__('Edit', 'thematic'),'<span class="edit-link">','</span>') ?>
    			</div><!-- .post -->
    <?php if ( get_post_custom_values('comments') ) comments_template('', true) // Add a key+value of "comments" to enable comments on this page ?>
    <?php get_sidebar('page-bottom') ?>
    		</div><!-- #content -->
    	</div><!-- #container -->
    <?php thematic_sidebar() ?>
    <?php get_footer() ?>

    I added <?php single_post_title(); ?> to the primary sidebar.

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.