Be|Baker header

bomerang

Hey guys!

Thank you fo a great theme. My webpage is  and I would like to have the header like the one in Be|Baker. More specifically I would like to have the bows at the buttom of the header on the home page. And also the sister pages should have the same header layout, like the sisterpages on Be|Baker - with the page name on a picture, bows at bottom of the header, and bows at the end of the picture.
Please provide me a step by step guide on how to achieve this!

Thank you in advance! 

Albert

Hey,

for this header we used "Classic" header layout and also used below custom css:

/* Header */
#Top_bar .menu > li > a span:not(.description) { border-right-width: 0; }
#Top_bar:after { background: url(http://themes.muffingroup.com/be/baker/wp-content/uploads/2014/11/home_bakery_header_pattern.png) repeat-x; content: ""; display: block; height: 21px; left: 0; position: absolute; width: 100%; z-index: 21; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

bomerang

@muffingroup thank you, it looks amazing! 

Is it possible that you could tell me how you achieved the fact that subheaders like "Products" "About" and "Gallery" in the Be|Baker theme are centrelized upon a picture? Please provide a step by step guide on how to achieve that.

I've tried to find that in the source code, and I found this:

<div id="Content"><div class="content_wrapper clearfix"><div class="sections_group"><div class="entry-content" itemprop="mainContentOfPage"><div class="section    "  style="padding-top:80px; padding-bottom:40px; background-color:; background-image:url(http://betheme.muffingroupsc.netdna-cdn.com/be/baker/wp-content/uploads/2014/11/home_baker_subheader_2.jpg); background-repeat:no-repeat; background-position:center bottom; background-attachment:; background-size:; -webkit-background-size:" ><div class="section_wrapper clearfix"><div class="items_group clearfix"><div class="column one column_column"><div class="column_attr  align_center" ><h2 class="subheader_title">Products</h2></div></div></div></div></div>

But obviously putting this as a html code on every page does not do the same effect that you have in your theme...

I also tried to add this css code i found:
.title{font-size:60px;line-height:60px}hr{height:3px}h5,h6{font-weight:300}h2.subheader_title{color:#fff;margin:0}

But it only made the subheaders bigger. 

Thank you for your patience!

Albert

For this header we used "Section" item with settings as on http://pbrd.co/1zE53Y9 but inside section we used "Column" item with below code:

<h2 class="subheader_title">Products</h2>

Learn more: Video Tutorials | How To | FAQ Vote on what comes next