By rogdawg on

I have been able to find quite a few examples of adding css classes to the list items (

  • ) within a menu but, I need to add a couple of css classes to the actual menu. The examples I have seen that deal with the list items override the theme_menu_item_link function. But there doesn't seem to be a similar function for the menu itself (something like theme_main_menu). At least, I haven't been able to find mention of one.

    Should I attempt to put some code in menu.inc, or in theme.inc?

    This seems like such a simple thing but, I have having a hard time getting my head around it. I thought it would be a similar situation to what I learned in this post http://drupal.org/node/1234850 but, it seems that menus are a different level object so, the handling of their rendering is very different.

    Any pointers or code examples would really be appreciated.

    Thanks very much.

    • ⋅ Categories: Drupal 7.x

    Comments

    grizzam’s picture

    grizzam commented

    Can't you just firebug it and see the parent div is for the whole menu/region and mess with it in the style.css? Or, you could just mess with it in the page.tpl.php/ where ever it's located and add a couple new divs around. It seems like you're making way more complicated than it should be.

    rogdawg’s picture

    rogdawg commented

    It does seem like I am making it more complicated than it should be.

    Here is my situation: I created a region called page_nav. This region will be a navigation bar that goes across the top of the page. On the navigation bar, I want the main navigation to be on the left side, and the search box (or login box, before the user logs in) on the right side. I am using the 960 grid system so, I want to assign the "grid_8" and "alpha" classes to the main menu, and the "grid_4" and "omega" classes to the search box.

    Both blocks are rendered, at the same time, with this statement:

    <?php print render('$page['page_nav']); ?>

    I was able to accomplish what I wanted with the search box by creating search-block-form.tpl.php and putting this code in it:

    <div class="grid_4 omega">
   <?php print $search_form; ?>
</div>

    but, I haven't been able to figure out how to "grab" the main menu and add the classes I need (or wrap it in a div that has the classes, like the search box). I know this should be easy. I am just not seeing it.

    Thanks for your response, and any further advice you can give.

    grizzam’s picture

    grizzam commented

    I see what you're doing and still it shouldn't be complicated. I did something similar to this in D6.

    1)I created a custom region called $top_nav and put it above the header.
    2)The CSS was a little tricky. I had a div for the actual top nav, multiple divs for the content inside of the nav/divs inside of those divs for additional content, then had had a second div around the whole nav so I could margin-left:auto; margin-right:auto it.

    All you should need is float:left for the menu and float:right for the search bar. Set them to position:relative. If for some reason that fails, you can just absolutely position them seeing as you're just using a fixed 960 system. No code should be necessary for that.

    rogdawg’s picture

    rogdawg commented

    Yes. I realized after posting my last response that all I really needed to do was to create two regions $nav and $searchlogin. Then, I can do something like this:

    <div id="navigation_bar" class="container_12">
   <div id="menu" class="grid_8 alpha">
      <?php print render($page['nav']); ?>
   </div>
   <div id="searchLogin" class="grid_4 omega">
      <?php print render($page['searchlogin']); ?>
   </div>
</div>

    This isn't really symantically correct but, it is easy, and it gets me down the road. I will also be able to get rid of the search-block-form.tpl.php file, since it will be hanlded in the page.tpl.php.

    Thanks very much for your responses, and for helping figure this out.