WordPress的頭寬度（創世紀，美食家臨）

http://www.livingthelighterlife.com/WordPress的頭寬度（創世紀，美食家臨）

有問題，讓頭看起來我希望它的方式。我希望藍色部分是全寬（就像現在這樣），但我希望實際的標題（標識和導航）與其餘內容（1040px）的寬度相同 - 希望這是有道理的。

我被告知圍繞「網站標題」，但我是新來的Wordpress，我不知道如何做到這一點。

不知道我需要什麼編碼來提供，但這裏的一些啓動：

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

 

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

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

 
.foodie-pro .site-header { 
 

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

 
.title-area { 
 
\t width: 450px; 
 
} 
 

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

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

 
/* Full width header, no widgets */ 
 

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

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

 
/* Logo, hide text */ 
 

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

 
.menu-primary li{ 
 
\t 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 { 
 
\t left: 50%; 
 
\t transform: translateX(-50%); 
 
} 
 

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

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

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

 
.genesis-nav-menu .sub-menu a:hover { 
 
\t 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"> 
 
\t <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"> 
 
\t <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"> 
 
\t <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"> 
 
\t <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> 
 
\t <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> 
 
\t <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> 
 
\t <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"> 
 
\t <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> 
 
\t <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>

來源

2016-09-30 Samantha

所有你需要做的是同樣的造型包住頭和導航在<div> 。或作爲另一種選擇，我可能只是把你的導航內幕你的頭，雖然，這樣的結構是這樣的：

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

，然後只是有你的頭以同樣的方式爲你的內容容器樣式：

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

來源

2016-09-30 03:35:46 thesublimeobject

我去哪裏包裝它？我不確定在哪裏找到要包裝的代碼。 – Samantha

那麼，很難說沒有看到你的項目......是你在一個地方粘貼你的問題的代碼......？還是在別的地方，分手了？ – thesublimeobject

我的項目位於livingthelighterlife.com – Samantha

您需要定義以下達到你想要的東西：

.site-header{ 
max-width: 1040px; 
} 

#menu-main{ 
max-width: 1040px; 
margin-left: auto; 
margin-right: auto; 
padding-right: 2em; 
}

並固定在小型設備上的漢堡包菜單更改top物業價值到35px;

@media screen and (max-width: 1039px){ 
button#responsive-menu-button { 
    width: 55px; 
    height: 55px; 
    position: absolute; 
    top: 35px; /*Changed this*/ 
    right: 5%; 
} 
}

來源

2016-09-30 05:24:59 Ricky

WordPress的頭寬度（創世紀，美食家臨）

回答

相關問題