Question

我的导航栏和徽标有问题。我修改了Navbar，它位于顶部的固定位置，宽度为100％。我也将logo功能放在页面div之外，因此它位于标题区域的页面上方。

问题在于，当我将导航栏margin-top设置为0时，徽标位于导航栏下方。当我将徽标margin-top设置为大约5rem时，它会将导航栏放到Logo开始的位置。

以下是我的更好理解的代码：

的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">

的style.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;
    }

Answer 1

使用absolute positioning。导航的父级应该是相对定位的，然后绝对定位导航将相对于该父级定位。

编辑：

http://jsfiddle.net/y54m874c/

看到这个小提琴。在那里，我相对定位header课程，我在其中放置徽标和导航。导航绝对与该容器相关。如果我将nav > ul相对定位，然后将绝对位置放在li元素上，那么我可以在包含它们的未排序列表中移动它们。如果我删除了未排序列表中的相对位置，那么列表项将查找他们所在的下一个容器并查看相对定位的内容，并将其用作参考。

相对位置本身并不一定意味着什么。你可以说一个元素有一个相对位置，然后内部元素将根据他的位置，并且该元素可以保持原样。但是，您也可以使用相对定位来相对于自身定位元素。

固定位置查看窗口浏览器的高度和宽度，这是＆＃39;参考框架＆＃39;为了它。它将与之相关。静态位置是默认值，它遵循html元素的流程。

您也可以使用花车，但是您无法根据自己的喜好定位元素。

中间地带是找到何时使用手动定位以及何时使用花车的好处。

Answer 2

好的，我明白了。

我将#navbar设置为固定和主菜单也固定。似乎可以作为expectet

感谢所有人。

Wordpress TwentyTwelve Navbar和Logo BUG

2 个答案: