Convert Header Menu to Footer Menu Links

[robertallen]

Hi all,

I’m having a hard time trying to turn my header menu (done in WordPress/PHP) to footer links. My goal is to make all the footer sub menu items display without any drop down.

This is the code I have so far:
`#footer-menu, #footer-menu .sub-menu {
border: 0 none;
margin-left: 0;
}

footer-menu > .menu-item {

display: inline;

}

footer-menu .sub-menu {

position: inherit;
display: inline;

}

footer-menu a {

color: #fff;
border-bottom: 0;

}
`

You can see my dilemma at the bottom of this page:
http://www.dreambachelor.com/sandbox/matchmaking-bachelors

Basically what I want it to look like is on the footer below (all menus and sub menu items displayed, centered, in multiple rows and responsive.)

http://www.singleinstilettos.com/

Any help would be greatly appreciated. Sorry if I didn’t explain it thoroughly, it’s very hard for me to put into words what I want it to be.

[Steven Crader]

Here are some suggestions to get you started:
* Add text-align: center to #footer-menu
* Change #footer-menu > .menu-item to #footer-menu .menu-item
* Add display: inline to #footer-menu a

[robertallen]

Steven,

Thank you SO very much! For some reason I was having the worst time. I must’ve been putting display: inline in the wrong spots or something. I was using ul, li, etc…

Thank you SO very much!

Robert

[robertallen]

Actually, I guess I have a new problem. What if I have sub SUB menus? I couldn’t for the life of me figure out how to make the sub sub menus behave.

Here is the link:

http://www.singleinstilettos.com/sandbox/

If anyone can help me with this I would greatly appreciate it. Thank you guys for everything!

[robertallen]

It probably would help if I pasted my CSS, right? (Sorry about that)

#footer-menu {
text-align: center;

}

footer-menu, #footer-menu .sub-menu {

border: 0 none;
margin-left: 0;

}

footer-menu .menu-item {

display: inline;

}

footer-menu .sub-menu {

display: inline;
position: inherit;

}

footer-menu a {

border-bottom: 0 none;
color: #494B4B;
display: inline;

}

footer-menu a:hover {

color: #333399;

}

[Author]

Posts