Horizontal wp_list_pages

  • I’ve been looking for several days for a clear answer to this question I just want to use the wp_list_pages tag to create a horizontal menu instead of the default verticle menu. I know it can be done I see it in lots of templates it seems so common that I’m surprised there isn’t better info for it. Maybe I just don’t understand, but I’ve read:

    https://codex.www.ads-software.com/Template_Tags/wp_list_pages and a bunch of articles about styling a list using css but all of them use a made list and not the dynamic one generated by wp_list_pages and they don’t work with it.

    I’m pulling my hair out looking for answers. Can anyone please help?

Viewing 3 replies - 1 through 3 (of 3 total)

  • It’s all done with CSS.

    Find a theme that does it, then check out the classes/IDs in use and how they’re setup in the stylesheet.

    Or google “css list menu” and get the hang of ’em that way.

    Thread Starter rosemckay

    (@rosemckay)

    Hi again, I snagged some code from another theme and here is the CSS that works:

    #navigation {
  height:15px;
  line-height:15px;
}

#navigation ul {
	position: absolute;
	top: 80px;
	margin-left: 55px;
	left: 50%;
}

#navigation li {
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
	border-left:1px solid;
	white-space:nowrap;
	overflow: hidden;
}

#navigation li a {
	display:block;
	padding:0 10px;
	font-size:10px;
	font-family: Trebuchet, "Trebuchet MS";
	text-transform: uppercase;
}

    But I want to understand this. What part of the CSS is making the list side by side instead of on top of each other because I don’t see it. I see where the verticle seperators are (the 1px borders) but what the heck? where is the side by side stuff? I’m so confused.

    rosemckay,

    Yes, CSS is extremely confusing! It’s one of those things that, the more you play with it, the easier it gets. I’ll do my best to answer your question.

    #navigation li {
	float:left;

    That tells the browser to override the normal behavior of an <li> tag and automatically “float” everything to the left.

    I never really say that one type of code is better than another, because it’s usually just style. However, I’ll show you what my usual CSS is for this task, and maybe it’s easier to read:

    #nav li {
     list-style-type: none;
     display: inline;
}

    Here above, all we’ve done is set the <li> tag to “list-style-type: none” which basically just gets rid of the bullet points. Then, “display: inline” makes the <li> tags stack right next to each other (horizontally), where as this tag has a default “display” value of “block”, which causes each one to be on a different line.

    I’m not the best at explaining things, but I hope that helps. Please let me know if I can help you further.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Horizontal wp_list_pages’ is closed to new replies.