How can you style the main menu navigation to display horizontally?

Category: 

  • Question

mcam@mit.edu

I'd like to use the CSS injector module to style the main menu navigation shown on the following page: http://drupalcloud.mit.edu/help/frequently-asked-questions-working-casca...

I have tried to do this by trying variations on

#block-system-main-menu {display:inline;}

but I can't get it to work. Is there a way to reference the specific unordered list within that block more directly?

I'd also like to do some other styling on that menu, but first things first. :)

Thank you!

1/21/14

amrichar@mit.edu

You're referencing the block itself with your CSS and not the list inside the block. Instead, try:

#block-system-main-menu ul li {display:inline; float:left;} (I included the float property {float:left;} because I always have issues with things wrapping to the next line.)

With this, you're referencing all the unordered lists and the lists inside the #block-system-main-menu class.

Also, you might run into some difficulty depending on what region you've placed your block in. If you're trying to keep it in the sidebar, it will still wrap the text so it appears on multiple lines (I tried it back when I was first setting up my site and it drove me nuts). If you have any other questions, please email me directly.

Ashley

1/21/14

mcam@mit.edu

Thank you! That worked like a charm. Right now I have the menu in the Features block region, so I'm okay with the length. Thanks again!

1/21/14