Anatomy of a Magazine Style Premium WordPress Theme - Part 3.1 “Navigation – Second Level Menu”
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
The end result with a little mod will look like this:
#topbar .subwrap {
background: #fff;
height: 51px;
width: 958px
}
.submenu {
background: #fff;
height: 34px;
line-height: 34px;
padding: 0;
margin: 0;
}
.submenu a {
color : #790000;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.submenu a:hover, .submenu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.submenu ul {
list-style : none;
padding : 0;
margin : 0;
}
.submenu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}
/* Override Children */
.children {display: none;}Note how I made a few changes to .subwrap and .submenu to differential it from the main menu, very subtle change though. Also note how I added a style at the very end to prevent the child(ren) category(ies) from being displayed.
That’s it, check the result, a second level menu using categories.
Next time, we will discuss conditional and dropdown/slidedown menus.
February 12th, 2008 at 5:48 pm
Awesome! I’ve never really been that technically-oriented, but you’re breaking down how these themes are made makes it so much easier to digest, thanks so much!
February 12th, 2008 at 8:55 pm
@ CleverSage
Thank you. I am glad I could be of some use
February 15th, 2008 at 6:45 pm
Is it easy to customize the header on this theme w/ an image? I love it, but would like to plug in a logo instead of the text. Great work!
February 15th, 2008 at 10:46 pm
Also - I notice that the posts are short and then say “Read More.” Does it only display a certain number of characters and then readers will need to click? Is that an option that can be turned off so that the entire post can be displayed?
February 16th, 2008 at 5:56 pm
I love how you provide some code and explain the variations.
For instance, the navigation in the header and the template ttag and code your provided.