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

【问题标题】：How to extend fixed nav beyond container div but with text aligned with container如何将固定导航扩展到容器 div 之外但文本与容器对齐
【发布时间】：2016-03-12 04:23:05
【问题描述】：

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

我尝试在负 % 处使用左边距，但是虽然这修复了跨视口宽度的导航，但文本（导航链接）然后消失了。如何让它们重新显示并在父容器 div 中包含 JUST THE TEXT？（我真的希望有人能理解）同样，我基本上只是希望站点导航上的边框底部运行视口的长度，而文本则保留在原处。

附带说明：这是为 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>

【问题讨论】：

可能重复 - stackoverflow.com/questions/28565976/…

标签： html css wordpress navigation fixed

【解决方案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...  -->

【讨论】：

太棒了，效果很好！我只是稍微改变了它，因为它把标题图像推到了容器之外。所以 .container 类现在适用于导航中的内容，然后适用于标题图像，并在 .site-header 类之后再次适用于“其他内容”非常感谢！