Question

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

我尝试使用％％左边的边距左边玩，但是当修复了视口宽度的导航时，文本（导航链接）就会消失。如何让它们回到视图中并在父容器div中包含JUST THE TEXT？（我真的希望有人理解这是有道理的）同样，我基本上只想在site-nav上使用border-bottom来运行视口的长度，文本保留在原来的位置。

作为旁注：这是为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>下方，然后在<div class="container">中添加新的<nav>。

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

<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之外，但文本与容器

1 个答案: