#css #wordpress
#css #wordpress
Вопрос:
Я работаю над своим блогом: livingthelighterlife.com
И у меня возникают проблемы с тем, чтобы заголовок выглядел так, как я хочу. Я бы хотел, чтобы раздел синего цвета был полной ширины (как сейчас), но я хочу, чтобы фактический заголовок (логотип и навигация) был той же ширины, что и остальной контент (1040 пикселей) — надеюсь, это имеет смысл.
Не уверен, какую кодировку мне нужно предоставить, но вот некоторые для начала:
/*
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: defau<
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 amp;#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> Ответ №1:
Это изображение заголовка, вероятно, находится в ваших настройках WP. Итак, чтобы упростить задачу, просто оберните заголовок разделом:
<section class="my-header">
<header class="site-header">
...
</header>
</section>
Чем добавить пару стилей:
.my-header {
background: none #0099CC;
}
.site-header {
max-width: 1040px;
/* It already has margins left and right set to "auto" */
}
Комментарии:
1. Как бы я обернул? Я очень новичок в WP.