如何将固定导航扩展到容器 div 之外，但文本与容器对齐

Question

基本上我想要一个固定的导航来扩展视口的长度，以便背景和边框底部覆盖视口的宽度，但我希望文本（导航链接）与容器保持对齐 div 它在里面。

我试过在负 % 处使用 margin-left，但是虽然这修复了整个视口宽度的导航，但文本（导航链接）随后消失了。我怎样才能让它们回到视图中并在父容器 div 中只包含文本？（我真的希望有人能理解这一点）同样，我基本上只是希望站点导航上的边框底部运行视口的长度，文本保留在原处。

附带说明：这是为 wordpress 主题设计的。

.container {
max-width: 928px;
margin: 0 auto;
padding-left: 20px;
padding right: 20px;
overflow: hidden;
}

/*Primary Header Menu*/

.site-header {
 margin: 0 auto;
}

.site-header nav {
 background-color: #FFF;
 position: fixed;
 z-index: 99999;
 width: 100%;
 height: 50px;
 top: 0;
 padding-top: 15px;
 text-transform: uppercase;
 font-size: 90%;
 border-bottom: 1px solid #393734;
}


.site-header nav ul li {
 margin-right: 5px;
 position: relative;
 width: 150px;
 z-index: 1;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited {
 display: block;
 padding: 10px 18px;
 text-decoration: none;
}

.site-header nav ul li a:hover {
 color: #ECECEC;
}


.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
 color: #006ec3;
}

/*dropdown menu for subs*/
.site-header nav ul ul {
 display: none;
 background-color: #FFF;
}

.site-header nav ul li:hover ul{
 display: block;
 position: absolute;
 top: 30px;
 padding-left: 0;
}

/*prevents subs from displaying side by side*/
.site-header nav ul ul li,
.site-header ul ul a {
 float: none;
}

<body <?php body_class(); ?>>
 
 <div class="container">
 
  <header class="site-header">
   
   <nav class="site-nav">

    <?php
    
    $args = array(
     'theme_location' => 'primary'
    );
    
    ?>
    
    <?php wp_nav_menu(  $args ); ?>
    
   </nav>

   <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
   
  </header>

Answer 1

您需要更改页面的 html 才能使其按您需要的方式运行。

.container 具有设置的宽度，网站使用该宽度将主要内容居中。

您需要删除最上面的 <div class="container"> 到 <header> 下面，然后在 <nav>.

中添加一个新的 <div class="container">

然后您可以使用背景颜色、边框等设置导航样式...

<body <?php body_class(); ?>>
 
 
  <header class="site-header">
   
   <nav class="site-nav">
              
 <div class="container"> <!-- INCLUDE THE .CONTAINER CLASS INSIDE THE NAV -->

    <?php
    
    $args = array(
     'theme_location' => 'primary'
    );
    
    ?>
    
    <?php wp_nav_menu(  $args ); ?>
      </div>
    
   </nav>

   <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
   
  </header>
 <div class="container">
      <!--  OTHER CONTENT...  -->

如何将固定导航扩展到容器 div 之外，但文本与容器对齐

How to extend fixed nav beyond container div but with text aligned with container

html

css

wordpress

navigation

fixed