How can I edit a footer menu in theme like Bartik, currently its displaying the menu in vertical format and I want it in horizontal format. Any idea how I can go about editing this. e.g.
current: Menu 1 Menu 2 Menu 3

Desired: Menu 1| Menu 2| Menu 3


You can do this using CSS

Firstly you will want to create your own theme using bartik as a base.

  1. Copy /themes/bartik to /sites/all/themes/YOUR_THEME
  2. Rename bartik.info to YOUR_THEME.info
  3. Edit YOUR_THEME.info, Make Changes, name = YOUR_THEME, description = YOUR_DESCRIPTION
  4. Edit template.php replace all instances of 'bartik' with 'YOUR_THEME'
  5. Goto /admin/appearance
  6. Find YOUR_THEME Enable and set default.

Why do we do this? Never hack the core or contributed modules and themes, If you do, updates will be a nightmare.

Now you will need to find the "id" of the menu element. In Chrome right click on the menu and 'Inspect Element' you may need to click up and down in the code window to find the relavant container. Example: id='block-system-user-menu' for the user menu block.

Modify /sites/all/themes/YOUR_THEME/css/style.css I will use 'block-system-user-menu' as an example.

Add this code (depending on your id).

#block-system-user-menu li,
#block-system-user-menu ul.menu li a {
#block-system-user-menu ul.menu li a {
  border-right:1px #fff solid;
#block-system-user-menu ul.menu li.last a {

That's it done!

You could also use the superfish module at http://drupal.org/project/superfish This will allow you to have a horizontal menu from any of your menus with some default styling or the ability to style it yourself in the same way as outlined above if you prefer. It is also an easy and clean way to get drop-down menus on your site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.