How to style your Drupal 7 Navigation Menu
You are here
Very often we are restricted to having the drupal main menu navigation blog rendered through blocks on the page. What if you have a need to add the main menu directly to your template and target it for CSS with specific classes or id's?
Ideally this should be very simple to do but with the lack of documentation, drupal newbies seem to always find themselves tearing out their hair over seemingly 'simple' tasks like this.
On every custom drupal theme I have created I have always found the need to disable the menu block and add the code for navigation menu directly to my template files. This has made it easier to change the HTML output and style the menu the way I would want to.
- First we need to get the code. You can find this code by navigating to yoursite/themes/bartik/templates/page.tpl.php
- <?php if ($main_menu): ?>
- <div id="main-menu" class="navigation">
- <?php print theme('links__system_main_menu', array(
- 'links' => $main_menu,
- 'attributes' => array(
- 'id' => 'main-menu-links',
- 'class' => array('links', 'clearfix'),
- 'heading' => array(
- 'text' => t('Main menu'),
- 'level' => 'h2',
- 'class' => array('element-invisible'),
- )); ?>
- </div> <!-- /#main-menu -->
- <?php endif; ?>
Here's a screenshot of the location of the code in page.tpl.php
2. Paste the code into your themes page.tpl.php. This can usually be found by navigating to
yoursite/sites/all/themes/yourdefaulttheme/. Paste the code in the region you want your navigation menu to appear. You can add wrapping <div>'s to help target the menu in your CSS.
3. Find your themename.info file. This is usually in the
yoursite/all/themes/yourdefaulttheme/ folder. Add the following to your .info file:
features = main_menu
4. Flush all caches and refresh your browser. The main menu links should now appear on your pages. Style the menu to your hearts content!