How can I effect the display of the menu links in the menu block placed in the footer region?

Currently they show up as a vertical list. I would like them to appear as a horizontal row from left to right.

I have been testing several themes lately. Some themes do this and others do not. I havn't been able to figure out what document contains the code to define this behavior, "layout.css", "style.css", "template.php" or some other. As you can tell I am a noob. I would love to effect the change from the frontend using sweaver or something if that is possible but I understand that may not be. I will attach pics of what I am looking for and what I currently have. The one I want shows up naturally the way I like in Bartik, the one I have is showing up as pictured in AT Commerce. What do I need to change? What causes the menu links to show from left to right in some themes and top to bottom in this theme? Not sure if this has any bearing, but I am using the Commerce Kickstart installation package and I create menus with a link under "structure" (admin/structure/menu/add).

I would be happy with any and all assistance on this issue. Thank you SO much in advance...

CommentFileSizeAuthor
What I have.png15.99 KBbharata
What I want.png6.62 KBbharata

Comments

stan turyn’s picture

stan turyn commented

bharata,

Judging by the extreme 'noobness' of your question (no offence intended, you point it out yourself) it would be way simpler to help you if you posted the link to your site because what you are trying to achieve is easy but I suspect you'd need a very specific answer, while giving you a generic one now is likely to confuse you.

Nevertheless here is a generic one - assign 'float: left' property to the list items in your menu ( <li> ), so your CSS will look something like:

.some-class ul li {
    float: left;
    margin-right: 2em;
}

This custom CSS should ideally go into 'styles.custom.css' file but make sure this file is enabled in your theme's .info file first - there ought to be a line like this one to enable it:
stylesheets[all][] = css/styles.custom.css

Jeff Burnz’s picture

Jeff Burnz commented

Stan is correct, good advice, the actual CSS selector is going to be (for the footer).

.region-footer ul.menu li {
    float: left;
    margin-right: 2em;
}

Actually I don't know why its not like this by default in AT Commerce, I think it should be, for footer region menu. Hmmm, maybe we change this to a feature request?

bharata’s picture

bharata commented

Stan and Jeff, thank you both so much for you help!! Your advice worked perfectly!! Where can I look to learn of the various CSS selectors used in this theme and what specific visual things they relate to?

Thanks again for your help!! You are both very much appreciated!

bharata’s picture

bharata commented
Status: Active » Closed (works as designed)