beaverbuilder
3/14/2018 - 8:03 PM

Merge page content into the header

This snippet is used in the following knowledge base article – https://kb.wpbeaverbuilder.com/article/237-merge-page-content-into-the-header

merge-page-content-header-example-3.css
content_copyfile_download
@media (min-width: 992px) {
  .fl-page-bar {
    position: absolute;
    top: 0;
    z-index: 11;
    width: 100%;
  }
  .fl-page-header, .fl-page-header-wrap {
    background-color: transparent;
    border-bottom-style: none; /* Removes the 1px border below the menu */
    position: absolute;
    top: 80px; /* Height of top bar */
    width: 100%;
    z-index: 10;
  }
}
merge-page-content-header-example-2.css
content_copyfile_download
.home .fl-page-bar {
  position: absolute;
  top: 0;
  z-index: 11;
  width: 100%;
}

.home .fl-page-header, .home .fl-page-header-wrap {
  background-color: transparent;
  border-bottom-style: none; /* Removes the 1px border below the menu */
  position: absolute;
  top: 80px; /* Height of top bar */
  width: 100%;
  z-index: 10;
}
merge-page-content-header-example-1.css
content_copyfile_download
.fl-page-bar {
  position: absolute;
  top: 0;
  z-index: 11;
  width: 100%;
}

.fl-page-header, .fl-page-header-wrap {
  background-color: transparent;
  border-bottom-style: none; /* Removes the 1px border below the menu */
  position: absolute;
  top: 80px; /* Height of top bar */
  width: 100%;
  z-index: 10;
}