3

I have created a drupal menu and added a couple of links. Unfortunately, when displayed, these come with bullets. How can I remove these? I am using the Precise theme, but it does not seem to be added by this theme.

enter image description here

Improve this question

4 Answers 4

Reset to default
7

This could be default browser styles. It does't matter if they are added by the browser by default or by CSS, the solution is to remove them with CSS.

li {
  list-style: none;
}

You should create a sub_theme where you create and add your custom styles.

Improve this answer
3
  • It did not work. With FireBug, I noticed that Drupal explicitly creates li lists, and not links only. I may need to create a view of links...
    – Jérôme Verstrynge
    Commented Feb 11, 2012 at 17:24
  • Someone suggested .block-menu-menu-name ul.menu li { list-style: none; list-style-image: none; } on another question and it worked.
    – Jérôme Verstrynge
    Commented Feb 12, 2012 at 7:05
  • 1
    @JVerstry The most specific styling rule wins, most likely the reset has a more specific rule than I posted as example above, you could do something like body ul li or add a id on your page, maybe #page or similar.
    – googletorp
    Commented Feb 13, 2012 at 9:24
2

It can be a tough job to adjust the styling of Drupal 7 menu's. Their nested styling and classnames sometimes make it hard to override, so I came to the conclusion to completely not load the default Drupal styling for menu's in my custom themes. The results are clean pure HTML menu lists which need some custom resetting/styling off-course (primary tabs become a clean list as well!).

function YOURTHEME_css_alter(&$css) {
  // remove Drupal menu styling!
  unset($css['modules/system/system.menus.css']);
}
Improve this answer
1

I finally replaced my menu with a view where I set the display format to "Unformatted list."

Improve this answer
1

Do as @googletorp said, but add !important at the end.

li {list-style: none !important;}
Improve this answer
2
  • !important should be a last resort, specific styles are better.
    – googletorp
    Commented Feb 13, 2012 at 9:22
  • 1
    ^this. In my experience if you have to use !important then either you or the author of the CSS you're trying to over-ride has gone wrong somewhere.
    – Chapabu
    Commented Jun 14, 2012 at 8:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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