Question

我在为我正在构建的网站调整导航栏和徽标时遇到麻烦。如果不涉及WordPress，我将能够做到这一点，但是我的wordpress主题生成了很多类，我不确定该如何使用。

这是我目前拥有的：

我希望将徽标留在左侧，同时将菜单项移至徽标的右侧。我的网站是invictus-together.com，如果您想查看该网站进行检查。我的php / html是：

<div id="page">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'invictus' ); ?></a>

    <header id="masthead" class="site-header">
            <a href="invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/invictus-together-logo-white.png"/></a>
            <nav id="site-navigation" class="main-navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'invictus' ); ?></button>
                <?php
                wp_nav_menu( array(
                    'theme_location' => 'menu-1',
                    'menu_id'        => 'primary-menu',
                ) );
                ?>
            </nav><!-- #site-navigation -->

        <div class="login-section">
        </div>
    </header><!-- #masthead -->
</div>

此外，我当前的CSS是这样的：

.site-header {
    background-color: black;
    color: white;
    align-items:center;
}

#masthead {
    display: float-left;
}

.main-navigation {
    clear: none;
    float:left;
    padding-top: 36px;
}

.main-navigation a{
    color:white;
    margin:5px;
}

如果有人可以帮助我，我将非常感激。

Answer 1

#masthead { display: float-left; }

这是无效的CSS。

header a:first-child {
    float: left;
    width: 25%;
    display: block;
}

header a:first-child img {
    width: 100%;
    height: auto;
}

.main-navigation {
    clear: none;
    float:left;
    padding-top: 36px;
    width: 75%;
}

Answer 2

从padding-top中删除.main-navigation并将display: flex;添加到.site-header。徽标和导航将并排并对齐。

Answer 3

一个简单的解决方案是使用此CSS，使#masthead容器成为一个flex容器，其中（两个）子元素（包装图像和导航容器的链接）左右对齐。

#masthead {
    display: flex;
    justify-content: space-between;
}

Answer 4

您可以使用此代码

body {
            margin: 0;
            padding: 0;
        }
        #page a {
            float: left;
        }
        .site-header {
            background-color: black;
            color: white;
            align-items: center;
            padding: 30px;
        }        
        #masthead {
            display: block;
        }        
        .main-navigation {
            padding-left: 36px;
            display: inline-block;
        }        
        .main-navigation a {
            color: white;
            margin: 5px;
        }

<div id="page">
        <a class="skip-link screen-reader-text" href="#content">
            <?php esc_html_e( 'Skip to content', 'invictus' ); ?>
        </a>
        <header id="masthead" class="site-header">
            <a href="invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/invictus-together-logo-white.png"/></a>
            <nav id="site-navigation" class="main-navigation">
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                    <?php esc_html_e( 'Primary Menu', 'invictus' ); ?>
                </button>
                <?php
                wp_nav_menu( array(
                'theme_location' => 'menu-1',
                'menu_id'        => 'primary-menu',
                ) );
                ?>
            </nav>
            <!-- #site-navigation -->
            <div class="login-section">
            </div>
        </header>
        <!-- #masthead -->
    </div>

Answer 5

我最终使用了网格显示，效果很好。

HTML：

<div id="page">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'invictus' ); ?></a>

    <header id="masthead" class="site-header" role="banner">
    <div class="container-header">
        <div class="site-branding">
            <?php dynamic_sidebar('header'); ?>
        </div><!-- .site branding -->

        <div class="site-logo">
            <a href="https://invictus-together.com"><img src="<?php echo get_template_directory_uri(); ?>/site-photos/invictus-together-logo-white.png"/></a>
        </div><!-- .site logo -->

        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'invictus' ); ?></button>
            <?php wp_nav_menu( array('theme_location' => 'menu-1', 'menu_id' => 'primary-menu') ); ?>
        </nav><!-- #site-navigation -->
    </div><!-- .container -->
    </header><!-- #masthead -->
</div>

CSS：

header {
    margin-top: 10px;
}

#masthead {
    background-color:black;
    margin: 0px;
} 
.container-header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-items: stretch;
    align-items: stretch;
}

/*social media*/
.site-branding::after {
    content:"";
    clear:both;
}

.site-branding .widget {
    margin-bottom:0;
}

.site-branding{
    grid-column:3;
    grid-row:1/2;
    align-self: stretch;
    justify-self:center;
}

/*logo*/
.site-logo {
    margin:20px;
    grid-column: 1;
    grid-row:1/2;
    align-self: stretch;
    justify-self:center;
}

.site-logo a img {
    margin:0;
}

/* Main Navigation */


.main-navigation {
  clear: both;
  display: block;
  float: none;
  text-align: center;
  grid-column: 2;
  grid-row:1/2;
  align-self: center;
}

.main-navigation li {
  display: inline-block;
  float: none;
}

.main-navigation a {
  display: block;
  font-size: 22px;
  font-weight: 700;
  padding: 0 20px;
  text-decoration: none;
  text-transform: uppercase;
  color:white;
}

.menu-header-menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这是它的外观，我需要做的就是更改字体：

对齐导航栏和徽标时遇到问题

5 个答案: