Add a header widget area

Hey Rocuant,

Thank you for the inquiry.

We added this code in the functions.php file to insert the widget area in the header.

<?php

//--------------------------------
// Header widget area
//--------------------------------

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
}

We then created a custom widget area named “header” in the Appearance > Widgets panel and added a Text widget. To adjust the widget’s position within the header, we added the following code in the Quick CSS field:

#top #header #header_main .widget {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
}

Please check the documentation below for more info: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hi,

Thank you for the update.

We adjusted the code in the Quick CSS field a bit.

#top #header #header_main .widget {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
    padding: 0;
    margin-top: -3px;
    padding-left: 10px;
}

Best regards,
Ismael

Hi,
Your header is transparent the gray that you see is from the top color section on the page:

when the header is scrolled the #897270 color is from your Logo Area Color:

if you don’t want a transparent header change the setting on the page in the backend in the admin sidebar:

As for the header widget, I disabled the above css and added this:

@media only screen and (min-width: 990px) and (max-width: 1670px) { 
	#header_main .inner-container .widget .textwidget {
  	 margin-left: -196%;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1440px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 14px !important;
  }
}
@media only screen and (min-width: 1441px) and (max-width: 1670px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 18px !important;
  }
}
  #header_main .inner-container {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  align-content: center;
  }
  #header_main .inner-container .widget {
  	padding: 0;
  }
  #header_main .inner-container .widget .textwidget {
    align-content: center;
    height: 100%;
  }

please clear your browser cache and check.

Best regards,
Mike

Hi,
I think that your caching plugin was not letting the Quick CSS to show correctly, so I moved the css to WordPress ▸ Customize ▸ Additional CSS and it works good there. I adjusted the css to show a bigger font, please clear your browser cache and check.
This is the css that is now used:

@media only screen and (min-width: 768px) and (max-width: 989px) { 
	#header_main .inner-container .widget .textwidget p span {
    font-size: 24px !important;
 }
}

@media only screen and (min-width: 990px) and (max-width: 1439px) { 
	#header_main .inner-container .widget .textwidget {
  	 margin-left: -196%;
  }
}
@media only screen and (min-width: 990px) and (max-width: 1439px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 14px !important;
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1670px){
  #header_main .inner-container .widget .textwidget {
      margin-left: -97%;
  }
}
@media only screen and (min-width: 1440px) and (max-width: 1670px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 24px !important;
  }
}

@media only screen and (min-width: 1671px) {
  #header_main .inner-container .widget .textwidget {
      margin-left: -66%;
  }
}
@media only screen and (min-width: 1671px) { 
  #header_main .inner-container .widget .textwidget p span {
  	 font-size: 38px !important;
  }
}

  #header_main .inner-container {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  align-content: center;
  }
  #header_main .inner-container .widget {
  	padding: 0;
  }
  #header_main .inner-container .widget .textwidget {
    align-content: center;
    height: 100%;
  }

Best regards,
Mike

Hi,
It looked like you added many menu options in the Enfold Theme Options ▸ Advanced Styling and each was empty so the empty setting was overriding the Enfold Theme Options ▸ General Styling settings. I removed these for you and now your menu is back to the way it was.
If you want to use the Enfold Theme Options ▸ Advanced Styling to change the colors then you can, but to need to add the new colors for it to work.
I believe that we have solved your Header Widget that was the topic of this thread, please let us know if so we should now close this thread.
Please note that we ask that each thread stays on a specific topic, this helps other users and Mods. For further questions please open a new thread

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike