Header style 9 options

Header on transparent background with the elements appearing on click

Multi-functional transparent header style with hamburger menu icon, Primary Navigation menu appearing pop up on click horizontally.

You can see the example here.

  • Header animation – switch it to Enable if you want to have the header animation on scroll (the main header will hide on scroll).
    Header animation effect
    • Header appearance effect –  select the appear animation effect for the header from the list of available ones.
Header elements settings

header-elements-settings

  • Login form – enable or disable the login form in the opened (active) header.
  • Social icons – switch it to Enable to have the social icon in the opened (active) header. The social icons can be set in Theme optionsSocial accounts Social networks section.
  • Search form in header – switch it to Enable to display search form in the header.
  • Language switcher in header – allows you to enable or disable the language switcher in the header.
  • Shopping cart button in header – allows you to enable or disable the cart button in the header. Woocommerce plugin is required to be installed and activated.
  • Menu icons – switch it to Enable to display icons in primary navigation. Make sure that icons are set for the top level navigation menu items in Appearance Menus section.
Header color settings

header-color-settings

  • Header background color – select the background color for the header main section.
  • Header border color – choose the border color for the header.
  • Header text color – set the text color for the elements set in the header.
Header active color settings
  • Active header background color – set the background color for the opened (active) header.
  • Active header text color – select the header element text color for the opened (active) header.
Header content settings
  • Header content alignment – set the horizontal alignment for the header content. Left, right and center positions are available.
  • Copyright message – add the copyright message which will be visible in the bottom of the opened (active) header.
Header style 9 custom logos

custom-logos-header-9

  • Header logotype image – select the image from the media library which will be set as logotype image for the current header style.
  • Header logotype image for retina – upload the image from the media library which will be set as logotype image for retina for the current header style.
  • Active header logotype image – select the image from the media library which will be displayed in the opened (active) header.
  • Active header logotype image for retina – upload the image from the media library which will be displayed in the opened (active) header on retina devices.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}