[Content Hidden]
Hey Lynn,
I’m definitely familiar with Gerard, and indeed, he’s a wonderful guy. 
I figured that was the case. Okay, I can definitely point you to the right direction here. So first, the styling I’m referring to can be found on your stylesheet under Appearance > Edit. The reason your heading went over the header on single posts is because of the negative margin being applied to achieve the transparent header effect. So I guess my question would be, do you want to have a transparent header for your single posts or not?
Ben
Appearance > Editor , yes. Below is what I see there and have been adjusting. At first the negative top margin was set to -435, but I changed it after you prompted me to do it. Now I have it set at -205 like the KB post instructed (and can change the other media queries after we have the problem tackled for the most part).
I would like the transparent header to display on any page including the single posts.
Thanks Lynn
/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/
/* img {
max-width: 100%;
height:auto;
display:block;
}
*/
/* H3 */
h3 { font-family: Georgia, sans-serif; font-style: italic; color: #0474bb; }
/* H2 */
h2 { font-family: Georgia, sans-serif; color: #9d9e9e; font-size: 34px; }
/* Doorcountyiconset */
article#fl-post-100 div.fl-node-56479e3f79114 {
font-family: ‘Raleway’ !important;
color: rgb(24, 128, 64) !important;
font-size: 14px !important;
}
/* Homeboldtext */
div#home_page_content span {
font-family: Georgia !important;
color: rgb(4, 116, 187) !important;
font-size: 36px !important;
line-height: 30px !important;
font-weight: 900 !important;
font-style: italic !important;
}
/* Center the text elements in the right block of the header */
.header-right { text-align: center;}
/* Center the “Reserve Now” image */
div.reserve-now img {
margin: 0px auto;
margin-bottom: 1px;
}
.fl-builder-content .review-body-copy {
font-family: ‘Raleway’ !important;
color: rgb(0, 0, 0) !important;
font-size: 15px !important;
line-height: 20px !important;
font-weight: 300 !important;
}
/* Transparent Header Settings */
@media (min-width: 992px) {
.fl-page-content {
margin-top: -205px; /Adjust depending on the height of the header for large devices/
}
}
@media (min-width: 768px) {
.fl-page-content {
margin-top: -205px; /Adjust depending on the height of the header for medium devices/
}
.fl-page-header-primary {
position: relative;
z-index: 3;
background: none;
}
.fl-page .fl-page-header-primary .fl-page-header-wrap {
border-bottom: none;
}
.fl-page-header-primary .fl-page-nav-wrap {
background: none;
border-top: none;
border-bottom: none;
}
@media (min-width: 1px) {
.fl-page-content {
margin-top: -205px; /Adjust depending on the height of the header for medium devices/
}
.fl-page-header-primary {
position: relative;
z-index: 3;
background: none;
}
.fl-page .fl-page-header-primary .fl-page-header-wrap {
border-bottom: none;
}
.fl-page-header-primary .fl-page-nav-wrap {
background: none;
border-top: none;
border-bottom: none;
}
/* Space between elements in the header-right section */
.header-right-item {
margin-top: 1px;
}
/* Space out the Social icons in header-right */
.header-social-icons i {padding-right: 5px;}
/* Stretch the header items to each side */
.fl-full-width .container {
padding-left: 100px;
padding-right: 120px;
width: 100%;
}
/* Adjust the padding, color and transparency of the header /
/ .fl-page-header-primary { */
.fl-page-header-container {
background-color: rgba(255,255,255,0.70) !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* Center Main Menu */
@media (min-width: 992px) {
.menu-main-menu {
padding-left: 20px;
padding-right: 150px;
width: 100%;
}
}
ul#menu-main-menu {
margin: 0 auto;
width:90%;
}
/* hide elements on post meta data -ie category */
article .fl-post-meta {
display: none;
}
Hey Lynn,
That’s the problem. If you want the transparent header for your single posts, some of the content gets behind the header. If we remove that, it’s as if you didn’t have a transparent header at all. Let’s just go with the latter. Adding this style to your stylesheet should fix the single posts.
.single .fl-page-content {
margin-top: 0px;
}
Ben
Thanks Ben, that worked well enough. The single Posts are still not transparent, the Pages are. But most importantly, the Posts are displaying the title properly and that’s good enough.
I really appreciate your help on this. Just a few more things and the site will be ready to go. My most challenging site yet and I could not have done it without BB. Thanks again, Lynn
No worries! Enjoy BB!
Ben
Hi, I’m looping back on this. I think I have an issue that is related. When I go to other devices, the image is not aligning to the top. Do I need to adjust each one with css or is there a way to do this globally?
Thanks Lynn
Hey Lynn,
I’d really love to assist you further, but the problem this time is how each page is being styled so it has to be done individually while removing previous styles from the previous dev. The article above I referred you to does this transparent header stuff site wide for pages. You site does this on a page by page basis.
Ben