Wordpress导航菜单:某些页面上的垂直位置不同

时间:2015-08-10 05:46:27

标签: css wordpress position vertical-alignment navigationbar

问题

我无法垂直获得导航菜单的一致位置。它目前在大多数页面上处于正确位置,但在内部电子课程页面上它较低,我不知道为什么。我试图解决问题时我已经改变了一些代码,我再也找不到垂直定位代码了 - 虽然我认为它是在几天前我看到的时候就已经存在但是大多数页面上的位置都是正确!

我想知道从什么位置测量?我编码它(当我认为有一个垂直位置的代码时)认为它是从页面顶部开始测量的,这是不会在页面之间发生变化的,但如果是这样的话,它就不会更改内部电子课程页面。

动机

我需要在Wordpress网站上设置第二个导航菜单,我正在设置电子课程。主题附带的导航菜单设置在标题上方,我希望标题底部的导航匹配并基本上链接我的其他网站。菜单基本上应该与以下内容类似:http://www.midlifecrisismarriageadvocate.com/stand.html和我的博客。虽然我觉得我更喜欢它,如果它更像是第二个(WP博客)示例,其中所有项目都没有展开以占据导航栏的整个宽度。

我按照这篇文章中的说明添加了第二个菜单:http://premium.wpmudev.org/blog/add-menus-to-wordpress/。我还发布了我最新的问题 - 虽然我最近再次更改了css - 但没有解决我的问题。我也在wordpress.org论坛上发布了我的问题并没有收到任何回复。

主题

我正在使用我创建的儿童主题,该主题是与Zippy课程插件一起提供的主题 - 社交触发器,用于zippy课程主题。

CSS代码

对不起所有的笔记;我从一些在线教程中得到了这个,并根据我的颜色进行了定制。我通过更改,评论或混淆添加了一些注释。

.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 */

0 个答案:

没有答案