ThemeShaper Forums » Thematic

[sticky] [closed]

Thematic Menus Demystified

(134 posts)
  • Started 12 years ago by helgatheviking
  • Latest reply from faeree
  • This topic is not a support question
  1. fwunder

    Just to add to the mix, I "borrowed" some Drupal mods and used this thread to create a pretty easy skin, which seems to work fairly well. I call the skin "4x4" (just cuz). If it helps, great! You can see it working @

    I did turn set autoArrows : true and dropShadows : true in thematic-dropdowns.js which is explained somewhere around here...

    /*** 4x4 SKIN ***/
    .sf-menu {
    	background-color: #BDD2FF;  /* main bar color without image */
    	background-image: url('./images/root.jpg');
    	background-position: bottom left;
    	background-repeat: repeat-x;
    	float: left;
    	width: 100%;
    	border-radius: 2px;
    	-webkit-border-radius: 2px;
    	margin-left: 1px;
    .sf-menu a {
    	border-right: 1px solid #FFFFFF;  /* divider  main bar */
    	padding:  .75em 1em;
    	border-left: 0px;
    	border-top: 0px;
    	border-bottom: 0px;
    .sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
    	color: #1133AA;
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {  /* all items when hovering */
    	background:		#CFDEFF;
    	outline:		0;
    .sf-menu ul a:hover {  /* link color when hovering */
       background:		#E4DFFF;
       color: #0B0FFF;
       border-bottom-color: #EEEEEE;
    .sf-menu ul a {
        background: #BDD2FF;
        border-top: 1px solid #EEEEEE;
    	border-right: none;
    /*** arrows **/
    .sf-menu a.sf-with-ul {
    	padding-right:  2.25em;
    	min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */
    .sf-sub-indicator {
    	position: absolute;
    	display: block;
    	right: .75em;
    	top: 1.05em; /* IE6 only */
    	width: 10px;
    	height: 10px;
    	text-indent:  -999em;
    	overflow: hidden;
    	background: url('./images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    	top: .8em;
    	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px -100px; /* arrow hovers for modern browsers*/
    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator {
    	background-position:  -10px 0;
    .sf-menu ul a > .sf-sub-indicator {
    	background-position:  0 0;
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    	background-position: -10px 0; /* arrow hovers for modern browsers*/
    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
    	background: url('./images/shadow.png') no-repeat bottom right;
    	padding: 0 8px 9px 0;
    .sf-shadow ul.sf-shadow-off {
    	background: transparent;

    You can grab the (background and arrows) images from my site. I think I found this stuff @

    P.S. Hope the Drupal thing doesn't offend anyone. ;)

    Posted 11 years ago #
  2. i like the arrows. perso, i think they should be on by default. restyling the menu is something i'd love to see happen for a future thematic release: maybe thematic5??

    Posted 11 years ago #
  3. Great idea for styling the arrows through a background image.

    I'm having trouble with the native CSS arrows, specifically the one pointing down. It seemingly only displays 4 pixels of the top of the arrow.

    Visual Example --->

    Any ideas on what could be causing this, or do you think a background image is the way forward?


    Posted 11 years ago #
  4. nimmolo

    Helga you are absolute awesomeness, I don't know who compensates you for solving everyone's problems but if there's a tequila fund i'm happy to add to it.

    In this case however I'm a bit too thick for the solution so far...

    I'm using a theme switcher plugin for mobile clients, to steer them to a special-but-very similar child theme of Thematic, just for mobiles. To this end I'm wanting to register a second menu (shorter, no-dropdowns) and place the short menu in the footer for the mobile theme either via CSS or preferably functions.php, while removing the main top menu.

    My theme structure is something like

    and in Childtheme-thematic's functions.php i'm trying to register the new menu while playing nice with all the default args set up by header-extensions.php

    Certainly I'm doing something doofus-like because while the following code does give me two options in the Admin -> Appearance -> Menus panel - one for Masthead Navigation and one for Mobile Navigation - neither of those menus shows up in #access of the Childtheme site. Before moving on to getting the Mobile Childtheme working I'd first like to get that menu showing up in the non-mobile theme, of course.

    Here's my Childtheme functions.php header section (not Mobile-Childtheme functions.php)

    function childtheme_override_init_navmenu() {
            if (function_exists( 'register_nav_menus' )) {
                		'primary-menu' => __( 'Masthead Navigation', 'thematic' ), 'mobile-menu' => __( 'Mobile Navigation', 'thematic')) );
    add_action('init', 'childtheme_override_init_navmenu');
    // Create #access
    // In the header div
    function childtheme_override_access() { ?>
    	    <div id="access">
    	    	<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div><!-- .skip-link -->
    	    	if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    	    		echo  wp_nav_menu(thematic_nav_menu_args());
        		} else {
        			echo  thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));
    		</div><!-- #access -->
    		<?php }

    *edit- sorry, I don't know how to wrap code...

    I should also mention that as you see by the #1 placement in #access, I've previously moved access to the top of the header with the following Viking-code:

    function remove_defaults() {

    I took out

    in the second to last line because it's being added by the custom menu code above.

    PS - Am I going to break anything by updating to Thematic 9.7.8? (or is it 9.8?)

    Posted 11 years ago #
  5. nimmolo

    Sorry for being so verbose. If I could edit it down I would.


    Actually, that worked for getting the designated "Primary navigation menu" in the Childtheme. I just had to go back to the appearance/menus page and re-save my menu choices.

    However, my function for adding the menu to the footer of the childtheme is not working yet. Here's the code.

    // mobile Footer menu!

    function mobile_childtheme_footer_access() { ?>

    <div id="access">

    <!-- no.skip-link, we're at the bottom of the page -->


    if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_mobile_menu_id', 'mobile-menu')))) {
    echo wp_nav_menu(thematic_nav_menu_args());
    } else {
    echo thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));


    </div><!-- #access -->

    <?php }


    Posted 11 years ago #
  6. nimmolo

    Update 2: it works fine, Helga's code from page 1 of this thread.

    I had not updated all the function and action names to the childtheme variants.

    If only there were a delete button for your own posts (unreplied at least)!

    Posted 11 years ago #
  7. nimmolo

    Thanks btw.

    Posted 11 years ago #
  8. nimmolo

    New question:

    How do I make a script load AFTER hoverintent, superfish, subfish, and thematic-dropdowns?

    I've found a script to center the Supersub dropdowns below their parent element.
    But it doesn't have any target class to modify currently because it's loading before superfish.

    incidentally I got it from

    <script type="text/javascript">
    	$(document).ready(function() {
    		$("ul.sf-menu li").mouseover(function() {
    			var the_width = $(this).find("a").width();
    			var child_width = $(this).find("ul").width();
    			var width = parseInt((child_width - the_width)/2);
    			$(this).find("ul").css('left', -width);

    I'm thinking of saving it in its own .js file and calling it through a modification of the header extensions....? does that sound right?

    Posted 11 years ago #
  9. nimmolo

    I've got the script loading after everyting using childtheme-override-head-scripts.
    Still, the script just doesn't modify the class properly.

    Posted 11 years ago #
  10. nimmolo, there is a tequila fund. it lives at my email address. ;) i'm partial to Herradura. but you should ask new questions in new threads so i'll have a better chance of actually seeing them. what are you trying to do here?

    Posted 11 years ago #
  11. markbuskbjerg

    Hi ... I guess your super help wasn't enough for a thematic noob as me..
    I'm trying to style menu in a child theme of Thematic.. I have made no alterations yet, so i knocked out the header with

    #header {
        clear: both;

    and pasted in your CSS...
    has something changed in the menu structure since you posted the code a year ago? I see no changes to my menu at all...

    i've also tried altering it in other ways, but nothing happens...
    I imported the style.css from the parent theme with

    @import url ('../whiteboardframework/style.css');

    could that be a problem?
    It is my first time with child themes so i'm quite puzzled! (more used to just tweak a theme straight ahead)

    Posted 11 years ago #
  12. @mark, please create a new topic for your question. in said topic, please explain what you are trying to achieve, what you are trying, and what results you are seeing versus what you are expecting.

    just from #header {clear:both;} i can't really figure out what you want to do.

    Posted 11 years ago #
  13. boerenooi

    Hi helgatheviking

    I'm having hard time getting this right. I need to put my menu into the start of my main container where the content is. How would I achieve this?


    Posted 11 years ago #
  14. faeree

    moved to own thread

    Posted 11 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.