Problem
I can’t get a consistent position for my navigation menu vertically. It is presently in the correct position on most pages, but on internal e-course pages it is lower and I donât know why. I’ve changed the code a bit in trying to figure things out and I can no longer find the vertical positioning codeâthough I thought it was there when I looked at it a few days ago and yet the position on most pages is correct!
I wonder what is the position measuring from?. I coded it (when I thought there was a code for the vertical position) thinking it was measuring from the top of the page which is something that doesn’t change from page to page, but if that were the case it would not change on the internal e-course pages.
Motive
I need a second navigation menu on a WordPress site I am setting up for e-courses. The navigation menu that comes with the theme is set above the header and I want a navigation at the bottom of the header that matches and basically links my other sites. The menu should basically look like the ones here: http://www.midlifecrisismarriageadvocate.com/stand.html and at my blog. Though I think I would like it if it were more like the second (WP blog) example where all the items do not spread out to take up the entire width of the navigation bar.
I added the second menu by following the instructions from this post: http://premium.wpmudev.org/blog/add-menus-to-wordpress/. I’ve also posted my latest problem therâthough I recently changed the css againâwith no resolution to my problem. I also posted my problem at the wordpress.org forums and received no response.
Theme
I am using a child theme I created from the theme that came with the Zippy Courses pluginâsocial triggers for zippy courses theme.
CSS Code
Sorry for all the notes; I got this from some online tutorial and customized it for my colours. I’ve added to some of the notes with my changes, comments or confusions.
.top-nav {
height: 45px;
padding: 0;
margin: 0;
position: absolute; /* Ensures that the menu doesnât affect other elements */
border-right: 0px /*solid #a5dcc2; */
}
.top-nav li {
height: auto;
width: auto; /* Each menu item was 148px wide, changed to auto */
float: left; /* This lines up the menu items horizontally */
/*text-align: center;*/ /* All text is placed in the center of the box, removing this changed nothing--text is still centered */
list-style: none; /* Removes the default styling (bullets) for the list */
/*font: normal bold 14px;*/
font-family: Georgia, Verdana, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #b7f5d7;
}
/*The next code styles the anchor tags that are found in each list item. Each anchor tag is the same size and shape as the list item.*/
.top-nav a {
padding: 2px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 0px solid #BEF6DB;
border-right: 0px solid #a5dcc2;
text-decoration: none; /* Removes the default hyperlink styling. */
color: c91640
display: block;
}
/*The next style is responsible for changing the color of each menu itemâs background when hovered over with a mouse pointer. .*/
.top-nav li:hover, a:hover {
background-color: #82bfa2;
font-color: #ffffff
}
/*The next two styles are related. The first style hides the drop-down menu, while the second style displays it when a mouse pointer is hovered over the main menu item.*/
.top-nav li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 38px; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.top-nav li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
