修复 WordPress 中的菜单栏和徽标 [关闭]答案

【问题标题】：Fix a Menu bar and Logo in WordPress [closed]修复 WordPress 中的菜单栏和徽标 [关闭]
【发布时间】：2016-02-05 06:17:06
【问题描述】：

我面对的是徽标和菜单栏对齐而不是我的网站。我该如何解决？下面分享图片。

我想修改如下图..

我应该编写什么 HTML 或 CSS 代码？

【问题讨论】：

您要解决的具体问题是什么？
我想让我的徽标左对齐并使菜单栏从右到左全长。刚刚我在第二张图片中向您展示了（我希望徽标在菜单栏上方左对齐）

标签： html wordpress css menu

【解决方案1】：

将此 CSS 用于徽标：

.site-logo { 
    position: absolute;
    top:-55px;
    left:50%;
    margin-left: -150px;
}

【讨论】：

【解决方案2】：

您需要移动以下 HTML，

<a class="site-logo" href="http://www.norenge.com/">
  <img src="http://www.norenge.com/wp-content/uploads/2015/11/Oranemart-accesspress_store-logo.png" alt="Capital's First Online Super Store"> 
</a>

成为<section class="home_navigation" 元素的直接后代。然后将text-align: center; 应用到同一个部分元素，它就可以实现您所要求的外观。

【讨论】：

你能帮我用php代码吗？
Wordpress 通常有一个扩展名为 .php 的模板文件，一旦进入，您也会在该文件中看到 HTML。您不需要添加任何额外的 PHP，只需移动 HTML 以重新对齐您的徽标。该文件可能被命名为 header.php。
是的，我可以看到名为 header.php 的文件。我应该把这段代码放在里面吗？
不幸的是，没有看到文件和代码，我无法确定是否需要进行调整。您需要找到包含
代码的 .php 文件并从那里移动 HTML。
刚刚分享了我的 header.php 代码

【解决方案3】：

<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package AccessPress Store
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo('charset'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
        <?php wp_head(); ?>
    </head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="mastheads" class="site-header" role="banner">
    <?php if (as_before_top_header_enabled()): ?>
        <div class="before-top-header">
            <div class="ak-container clearfix">
                    <?php accesspress_ticker_header_customizer(); ?>
                    
                    <?php
                    if (is_user_logged_in()) {
                        global $current_user;
                        get_currentuserinfo();
                        ?>
                        <div class="welcome-user">
                            <span class="line">|</span>
                            <?php _e('Welcome ', 'accesspress-store'); ?>
                            <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="my-account">
                                <span class="user-name">
                                    <?php echo $current_user->display_name; ?>
                                </span>
                            </a>
                            <?php _e('!', 'accesspress-store'); ?>
                        </div>
                    <?php }
                    ?>

                    <?php if (is_active_sidebar('header-callto-action')): ?>
                        <div class="header-callto">
                            <?php dynamic_sidebar('header-callto-action') ?>
                        </div>
                    <?php endif; ?>
                    
                
            </div>
        </div>
    <?php endif; ?>
    <div class="top-header clearfix">
        <div class="ak-container clearfix">


            <!-- Cart Link -->
            <?php
            if (is_woocommerce_activated()):
                echo accesspress_wcmenucart();
            endif;
            ?>
            <?php
            if (function_exists('YITH_WCWL')) {
                $wishlist_url = YITH_WCWL()->get_wishlist_url();
                ?>
                <a class="quick-wishlist" href="<?php echo $wishlist_url; ?>" title="Wishlist">
                    <i class="fa fa-heart"></i>
                    <?php echo "(" . yith_wcwl_count_products() . ")"; ?>
                </a>
                <?php
            }
            ?>
            <div class="login-woocommerce">
                <?php
                if (is_user_logged_in()) {
                    global $current_user;
                    get_currentuserinfo();
                    ?>

                    <a href="<?php echo wp_logout_url( home_url() ); ?>" class="logout">
                        <?php _e(' LogOut', 'accesspress-store'); ?>
                    </a>
                    <?php
                } else {
                    ?>
                    <a href="<?php echo get_permalink(get_option('woocommerce_myaccount_page_id')); ?>" class="account">
                        <?php _e('LogIn', 'accesspress-store'); ?>
                    </a>
                <?php }
                ?>
            </div>

            <!-- if enabled from customizer -->
            <?php if (!get_theme_mod('hide_header_product_search')) { ?>
                <div class="search-form">
                    <?php get_search_form(); ?>
                </div>
            <?php } ?>
        </div>
    </div>
    <section class="home_navigation">
        <div class="inner_home">
            <div class="ak-container clearfix">                        
                <div id="site-branding" class="clearfix">
                    <?php accesspress_store_admin_header_image() ?>
                </div><!-- .site-branding -->
                <div class="right-header-main clearfix">
                    <div class="right-header clearfix">
                        <!-- if enabled from customizer -->
                        <div id="toggle">
                            <div class="one"></div>
                            <div class="two"></div>
                            <div class="three"></div>
                        </div>
                        <div class="clearfix"></div>
                        <div id="menu">
                            <?php
                            if (is_page('checkout') && get_theme_mod('hide_navigation_checkout')) {
                                
                            } else {
                                ?>
                                <nav id="site-navigation" class="main-navigation" role="navigation">
                                    <a class="menu-toggle">
                                        <?php _e('Menu', 'accesspress-store'); ?>
                                    </a>
                                    <?php
                                    wp_nav_menu(array(
                                        'theme_location' => 'primary',
                                        'container_class' => 'store-menu',
                                        'fallback_cb' => 'custom_fallback_menu',
                                            )
                                    );
                                    ?>
                                </nav><!-- #site-navigation -->
                            <?php } ?>
                        </div> 
                    </div> <!-- right-header -->
                </div> <!-- right-header-main -->
            </div>
        </div>
    </section><!--Home Navigation-->
</header><!-- #masthead -->
<div id="content" class="site-content">
>> this is my header.php code

【讨论】：

【解决方案4】：

继续我们在 wordpress.stackexchange.com here 和 here 的讨论，如果我没看错的话，您要做的就是在调整大小时使用相同的菜单浏览器的窗口大小为1180px，徽标位于中心，但不是仅在将窗口大小调整为1180px 时才具有此功能，而是希望始终进行这种类型的处理，这意味着拥有1180px菜单作为网站的默认菜单。

首先

因此，为了做到这一点，我们需要在屏幕尺寸大于 > 1180px 时删除默认菜单的当前 CSS。为此，请转到 - style.css:1006（意思是转到文件 style.css 行 1006），并删除以下 CSS：

此文件的绝对路径 - http://www.norenge.com/wp-content/themes/accesspress-store/style.css

#site-branding {
    width: 20%;
    padding-bottom: 5px;
    min-height: 60px;
}

第二

接下来我们需要将菜单的样式设置为1180px 作为新的默认菜单。为此，请转到：-responsive.css:48，删除代码周围的媒体查询，目前的代码是这样的：

此文件的绝对路径 - http://www.norenge.com/wp-content/themes/accesspress-store/css/responsive.css?ver=4.3.1

@media (max-width: 1180px) {
    #site-branding {
        float: none;
        display: inline-block;
        text-align: center;
        padding-bottom: 5px;
        max-width: 320px;
        width: 100%;
    }
}

而且你需要删除@media query或者只是把代码放在@media query之外，只有这样：

#site-branding {
    float: none;
    display: inline-block;
    text-align: center;
    padding-bottom: 5px;
    max-width: 320px;
    width: 100%;
}

第三个也是最后一个

最后，修复菜单居中处理，转到 - style.css:4328 并从 id #menu 中删除 float:right; 属性：

此文件的绝对路径 - http://www.norenge.com/wp-content/themes/accesspress-store/style.css

#menu {
    float: right;        /* <- REMOVE THIS LINE */
    position: relative;
    height: 100%;
}

完成此操作后，大小为1180px 的假定菜单现在将成为主要的默认菜单。祝你好运！ :)

【讨论】：

非常感谢它是完美的。
如何在左侧放置徽标？
从这个链接添加这段 CSS 代码：jsfiddle.net/k5nh23np，就像在你的 CSS 文件的最后，所以如果你以后想删除它，你知道去哪里找它.
感谢它现在有效，你太棒了.. 非常感谢！还有三个问题，1）现在我看不到“登录选项上方顶部的号召性用语按钮。它仅在登录帐户后出现。为什么？2）我想从左上角删除搜索栏并放置登录选项下的右上角。3) 我在顶部栏上看不到代码（它只在登录帐户后出现，为什么？
好的，我知道了，感谢您的帮助！