Header Text Widget

Hi,

Thank you for the inquiry.

You can adjust the default header styles (text color, background) in the Enfold > General Styling > Logo Area panel. To adjust the style of specific elements such as the main menu, go to the Enfold > Advanced Styling panel. For more header options, please go to the Enfold > Header panel.

Best regards,
Ismael

Hi,

Thanks for the update. What exactly are you looking to style on your site? If you need help with a header widget, then please add some content to it. Otherwise we can’t see the ID of the element.

Best regards,
Rikard

Hey,

I added following code to bottom of Quick CSS field to turn the background color to transparent

#top #wrap_all #header #header_main .inner-container .widget {
  background-color: transparent;
}

You can add following code to Quick CSS to change font color to white but since you are using white header, applying following code would make the text invisible

#header .widgettitle {
  color: white;
}

Cheers!
Yigit

Hi,

To increase font size of the widget title, please use

#header .widgettitle {
  font-size: 26px; 
}

and to increase font size of the widget text, please use

#header .textwidget {
  font-size: 20px; 
}

Best regards,
Yigit

Hi,
Thank you for the link to your site, your title wraps because the css for the widget expects that you will be adding text to the widget also:


so assuming that you are only going to use the title and no text I adjusted your css:

Please clear your browser cache and check.

Best regards,
Mike

Hi,
You can use the Enfold Theme Options ▸ Advanced Styling ▸ Main Menu Links to choose the color:

I did this for you, please clear your browser cache and check.
Let us know if this helped and we will close this thread, if you have any further questions please create a new thread and we will gladly try to help you with them also. We like to keep each thread on topic so other users can also find solutions to their issues, thank you for understanding.

Best regards,
Mike

Hi,
Thanks for the feedback, I added this css:

#header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
	color: red !important; 
}

please clear your browser cache and check.

Best regards,
Mike

Hi,
I had to guess which foolscap image you wanted to use, so to change this icon to an image:

I added this css:

.hr-center.hr-icon-yes .av-seperator-icon:after {
  content: "";
  background-image:url(https://new.faschingsklub-thalheim.de/wp-content/uploads/2022/01/Kappe_100.png);
  background-size: 100% 100%;
  display: inline-block;
  height: 30px;
  width:30px;
}
.hr-center.hr-icon-yes .av-seperator-icon {
	font-size: 0px;
	width: 30px;
    height: 30px;
}

and the results are:

If you want to use a different image, simply change the url in the css.
I made this change for you, please clear your browser cache and check.

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