css - Wordpress 页眉宽度(Genesis、Foodie Pro)

标签 css wordpress

http://www.livingthelighterlife.com/

在让标题看起来像我想要的样子时遇到问题。我希望蓝色部分是全宽的(目前是这样)，但我希望实际的标题( Logo 和导航)与其余内容的宽度相同 (1040px) - 希望这是有道理的。

我被告知要绕过“站点标题”，但我是 Wordpress 的新手，不知道该怎么做。

不确定我需要提供什么编码，但从这里开始:

/*
Site Header
---------------------------------------------------------------------------------------------------- */


.foodie-pro .site-header {
	background-color: #0099CC !important;
	margin-left: auto;
	margin-right: auto;
}

.genesis-header {
	background-color: #000000 !important;
}

.foodie-pro .site-header {

	background-position: left;
	margin-top: 30px;
}

.title-area {
	width: 450px;
}

.header-image .title-area {
	padding: 0;
}

.title-area h1 {
	margin: 0 auto;
}
.title-area p {
	margin: 0;
}

/* Full width header, no widgets */

.header-full-width .title-area,
.header-full-width .site-title {
	width: 100%;
}

.header-image .site-description,
.header-image .site-title a {
	display: block;
	text-indent: -9999px;
}

/* Logo, hide text */

.header-image .site-header {
	background-size: 450px 177px !important;
}

.header-image .site-title a {
	float: none;
	min-height: 177px;
	width: 450px;
}

/*
Site Navigation
----------------------------------------------------------------------------- */

/* Main Navigation
--------------------------------------------- */

.genesis-nav-menu .menu-item {
	display: inline-block;
}

.genesis-nav-menu {
	margin-top: -118px;
}

.genesis-nav-menu:before {
	content: "BROWSE RECIPES:";
	color: #f68364;
	font-size: 11.5px;
	letter-spacing: 1px;
	margin-right: 5px;
}

.genesis-nav-menu {
	text-align: right;
	font-size: 11.5px;
	letter-spacing: 1px;
}

.genesis-nav-menu a {
	display: inline-block;
	position: relative;
	padding-left: 5px;
	padding-right: 8px;
	color: #636367;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0s ease !important;
}

.genesis-nav-menu a:hover {
	color: #6dbea2;
}

li#menu-item-150 a {
	pointer-events: none;
	cursor: default;
	padding-left: 0px;
	padding-right: 3px;
	color: #f68364;
}

.menu-item:last-child a {
	padding-right: 0px;
}


li#menu-item-119:after, li#menu-item-120:after, li#menu-item-121:after {
	display: inline-block;
	position: absolute;
	top: 0;
	content: "/";
	color: #b9b9b9;
}

/* Sub Navigation
--------------------------------------------- */

.menu-primary li{
	position: relative;
}

.genesis-nav-menu .menu-item:hover > .sub-menu,
.genesis-nav-menu .menu-item:focus > .sub-menu,
.genesis-nav-menu .menu-item.menu-item-hover > .sub-menu  {
	left: 50%;
	transform: translateX(-50%);
}

.genesis-nav-menu .sub-menu:before {
	content: '';
	display: block;
	margin: auto;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #7b7c80;
}

.genesis-nav-menu .sub-menu {
	position: absolute;
	display: block;
	z-index: 2000;
	left: -9999px;
	width: 100px;
}

.genesis-nav-menu .sub-menu a {
	width: 100px;
	padding: 10px;
	background-color: #7b7c80;
	color: #ffffff;
	font-size: 10px;
	text-align: center;
}

.genesis-nav-menu .sub-menu a:hover {
	background-color: #f78f73;
}
<header class="site-header" itemscope itemtype="http://schema.org/WPHeader"><div class="wrap"><div class="title-area"><h1 class="site-title" itemprop="headline"><a href="http://www.livingthelighterlife.com/">Living the Lighter Life</a></h1><p class="site-description" itemprop="description">Eat Clean. Train Hard. Live Lighter.</p></div></div></header><h2 class="screen-reader-text">Main navigation</h2><nav class="nav-primary" itemscope itemtype="http://schema.org/SiteNavigationElement" id="genesis-nav-primary" aria-label="Main navigation"><div class="wrap"><ul id="menu-main" class="menu genesis-nav-menu menu-primary"><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-119"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Breakfast</span></a>
<ul class="sub-menu">
	<li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151"><a href="http://www.livingthelighterlife.com/recipes/" itemprop="url"><span itemprop="name">Recipes</span></a></li>
</ul>
</li>
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Lunch</span></a>
<ul class="sub-menu">
	<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><a href="http://www.livingthelighterlife.com/recipes-new__trashed-2/" itemprop="url"><span itemprop="name">Recipes NEW</span></a></li>
</ul>
</li>
<li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-121"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Dinner</span></a>
<ul class="sub-menu">
	<li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-160"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Coming Soon</span></a></li>
</ul>
</li>
<li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-148"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Other</span></a>
<ul class="sub-menu">
	<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Desserts</span></a></li>
	<li id="menu-item-122" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-122"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Snacks</span></a></li>
	<li id="menu-item-123" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-123"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Sides</span></a></li>
	<li id="menu-item-125" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-125"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Beverages</span></a></li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-150"><a itemprop="url"><span itemprop="name">•</span></a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-25"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Nutrition &#038; Fitness</span></a>
<ul class="sub-menu">
	<li id="menu-item-126" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-126"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Philosophy</span></a></li>
	<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://www.livingthelighterlife.com/sample-page/" itemprop="url"><span itemprop="name">Workouts</span></a></li>
</ul>
</li>
</ul></div></nav>

最佳答案

您需要做的就是将标题和导航包装在 <div> 中具有相同的样式。或者作为另一种选择，我可能只是将您的导航放在标题内，这样结构就像这样:

<header>
    <div class="logo__container">Stuff</div>
    <nav>Navigation Stuff</nav>
</header>

然后将标题的样式设置为与内容容器相同的样式:

.header {
    width: 1040px;
    display: block;
    margin: 0 auto;
 }

关于css - Wordpress 页眉宽度(Genesis、Foodie Pro)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39783199/

上一篇：html - 图像不在表格容器中

下一篇：javascript - 运行 javascript 不运行 CSS

相关文章：

html - 如何在没有容器的情况下沿着基线将 div 中的元素居中？

html - 用于列表导航的 Sprite 背景跨度

php - 将 HTML 转换为 WordPress 系统的最简单方法

javascript - WordPress 通过 ajax 在 div 中加载帖子详细信息和内容

wordpress - 如何仅设置 WordPress 缩略图的图像宽度

javascript - <br> 在工具提示的标题标签中不起作用

css - 每次修改css文件都要清空cookies

php - 从 PHP 中的字符串输入中删除特定字符串

wordpress - 更改安装 WordPress 的目录的文件夹名称

css - 如何改变整个元素的风格

©2024 IT工具网  联系我们