如何将固定导航扩展到容器div之外，但文本与容器对齐
[英]How to extend fixed nav beyond container div but with text aligned with container
问题描述
Basically I want a fixed navigation that extends the length of the viewport so that that background and border-bottom covers the width of the viewport, but I want the text (the nav links) to remain aligned with the container div that it's inside. 
基本上，我想使用固定的导航来延长视口的长度，以便背景和边框底部覆盖视口的宽度，但是我希望文本（导航链接）与其中的容器div保持对齐。
I've tried playing with the margin-left at negative %'s, but while that fixes the navigation across the width of the viewport, the text (nav links) then disappears. 我试过在负％处使用左边距，但是尽管这样可以固定视口宽度的导航，但是文本（导航链接）然后消失了。 How can I get them back into view and containing JUST THE TEXT inside the parent container div? 如何将它们重新显示并包含在父容器div中的“仅文本”？ (I really hope that makes sense for someone to understand) Again, I basically just want that border-bottom on the site-nav to run the length of the viewport with the text remaining where it is. （我真的希望这对某人理解是有道理的）再次，我基本上只是希望site-nav上的border-bottom运行视口的长度，而文本保留在原处。
As a side note: this is being designed for a wordpress theme. 附带说明：这是针对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>
1 个解决方案
解决方案1
1 已采纳 2015-12-07 14:25:09
You will need to alter the html of the page for this to function the way you need. 您将需要更改页面的html，以使其发挥所需的功能。
The .container has a set width that the site is using to center the main content. .container具有站点用于将主要内容居中设置的宽度。
You will need to remove the top most <div class="container"> to below the <header> then add a new <div class="container"> within the <nav> . 您需要将最顶部的<div class="container">移到<header>下面，然后在<nav>内添加新的<div class="container"> <nav> 。
You can then style the nav with a background color, border etc... 然后，您可以使用背景颜色，边框等为导航设置样式。
<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... -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.