个人中心
gpt4 book ai didi

php - Wordpress 二十十二个导航栏和 Logo BUG

转载 作者：行者123 更新时间：2023-11-28 09:35:27 24 4
gpt4 key购买 nike

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

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

以下是我的代码，以便更好地理解:

标题.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;
    }

最佳答案

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

编辑:

http://jsfiddle.net/y54m874c/

请看这个 fiddle 。在那里，我相对定位了 header 类，我在其中放置了 Logo 和导航。导航相对于该容器是绝对定位的。如果我将 nav > ul 放在相对位置，然后将绝对位置放在 li 元素上，那么我可以在包含它们的未排序列表中移动它们。如果我删除未排序列表中的相对定位，则列表项将查找它们所在的下一个容器并观察相对定位的内容，并将其用作引用。

相对位置本身并不一定意味着什么。你可以只说一个元素有一个相对位置，然后里面的元素就根据他定位，那个元素就可以原地不动。但是，您也可以使用相对定位来相对于自身定位元素。

固定位置看窗口浏览器的高度和宽度，这是它的“引用框架”。它将相对于它移动。静态位置是默认位置，它遵循 html 元素的流程。

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

中间地带是找到什么时候使用手动定位对您有利，什么时候使用 float 。

关于php - Wordpress 二十十二个导航栏和 Logo BUG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25547770/

24 4 0
文章推荐： ios - 我可以更简单地使用 Swift 将整数转换为特定格式的字符串吗？
文章推荐： ios - 为什么我们应该在 Swift 中使用 "NSMutableArray"或 "NSMutableDictionary"？
文章推荐： javascript - 通过对象初始化可观察对象
文章推荐： swift - 如何使用 key 在 swift 4 中散列 sha256？