【发布时间】：2014-10-22 06:07:15
【问题描述】：
我的导航栏和徽标有问题。 我修改了导航栏，使其位于顶部的固定位置，宽度为 100%。 我把 logo 功能也放在了页面 div 之外，所以它在页眉区域的页面上方。
问题是当我将导航栏边距顶部设置为 0 时，徽标位于导航栏下方。 当我将徽标 margin-top 设置为大约 5rem 时，它会将导航栏放到徽标开始的位置。
这是我的代码以便更好地理解：
Header.php
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>
<div id="mainlogo" class="mainlogo">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
<?php endif; ?>
</div id="mainlogo" class="mainlogo">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<div id="slider" class="slider">
<?php layerslider(1) ?>
</div>
</header><!-- #masthead -->
<div id="main" class="wrapper">
样式.css
.header-image {
display: block;
margin-top: 0rem;
margin-left: auto;
margin-right: auto;
}
/* Navigation Menu */
.main-navigation {
margin-top: 0p;
margin-top: 0rem;
position: fixed;
z-index: 999;
opacity:1;
filter:alpha(opacity=100);
width: 100%;
margin-top: 0px;
margin-top: 0rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 28px;
font-size: 1rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
color: #FFF;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
margin-left: 3rem;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}
/* Menu Background */
.nav-menu {
background-image: url("img/menu_repeat.png");
padding-left: 0rem;
padding-right: 0rem;
}
.slider {
margin-top: 15px;
margin-top: 1rem;
}
.mainlogo {
margin-top: 50px;
margin-top: 5rem;
}
.navbar {
margin-top: 0px;
margin-top: 0rem;
}
【问题讨论】：
-
当我们可以看到该站点时会更容易，因为这段代码本身没有任何意义：\
-
我的本地机器上的 IT。你想让我在这里上传主题文件吗？
-
不，我以为您在某处在线。很难看出部分代码的问题。您的导航设置为
position:fixed，看看这是否会导致一些问题。 -
你有hamachi吗？没有办法让端口转发在我的路由器中工作
-
位置固定标签似乎是问题所在。但是我现在如何实现一个固定在顶部（滚动时）的导航栏？