Hi Jordan,

Nothing that I can see. Here are all my css customizations:

#top #header .av-main-nav > li > a .avia-menu-text, #top #header .av-main-nav > li > a .avia-menu-subtext {
text-transform: uppercase;
}
ul.sub-menu {
position: relative !important;
left: 20px !important;
opacity: 1 !important;
visibility: visible !important;
}
ul.sub-menu {
position: relative !important;
left: 0px !important;
opacity: 1 !important;
visibility: visible !important;
z-index: 10000;
box-shadow: none !important;
border-bottom: 1px solid #e1e1e1;
width: 100%;
}
.sub-menu li, .sub-menu li a{
float: none !important;
display: block !important;
}
.sub-menu a{
background: transparent !important;
border: 0 !important;
padding: 5px 8px !important;
}
.main_color .avia-icon-list .iconlist_icon {
background: #49662f;
}
h3.iconbox_content_title {
font-size: 20px !important;
align: center;
}
.iconbox .iconbox_content p:last-child {
color: #50341c !important;
}
.tnp-yellow-box .iconbox_content {
background: #cfa34f !important;
}
.tnp-yellow-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.tnp-orange-box .iconbox_content {
background: #c07b44 !important;
}
.tnp-orange-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.tnp-brown-box .iconbox_content {
background: #93653f !important;
color: #4f321b;
}
.tnp-brown-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.iconbox_content_container .post {
float: none;
}
.tnp-green-box .iconbox_content {
background: #a6b393 !important;
}
.tnp-green-box h3.iconbox_content_title {
color: #50341c !important;
font-size: 20px !important;
}
.avia-icon-list .iconlist_title {
color: #50341c !important;
}
.avia-icon-list .iconlist_icon {
height: 53px;
width: 53px;
line-height: 54px;
font-size: 20px;
border-radius: 500px;
}
media=”all”
.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {
font-weight: bold;
}
.post-meta-infos {
display: none;
}
.slide-meta {
display: none;
}
.iconbox_content_title {
font-weight: bold;
text-transform: uppercase;
font-size: 19px !important;
color: #50341c;
align: center;
}
#top h3 a {
font-weight: bold;
text-transform: uppercase;
}
#top .fullsize .template-blog .post .entry-content-wrapper {
margin-bottom: -28px;
}
.av-thin-font .av-special-heading-tag, .modern-quote .av-special-heading-tag {
color: #50341c;
}
body .av-special-heading .av-special-heading-tag {
padding: 2px 0 0 0;
}
li#menu-item-384 a {
color: green !important;
}
li#menu-item-5818 a {
color: #52772f !important;
}
.grid-entry-title {
align-content: center;
}
h3.grid-entry-title.entry-title {
text-align: center;
}
.news-time {
display: none;
}
.news-headline {
font-size: 12px;
text-transform: uppercase;
}
.main_color .heading-color, .main_color a.iconbox_icon:hover, .main_color h1, .main_color h2, .main_color h3, .main_color h4, .main_color h5, .main_color h6, .main_color .heading, .main_color .toggle_content strong, .main_color .toggle_content strong a, .main_color .tab_content strong, .main_color .tab_content strong a, .main_color .asc_count, .main_color .avia-testimonial-content strong, .main_color div .news-headline, #top .main_color .av-related-style-full .av-related-title, .main_color .av-default-style .av-countdown-cell-inner .av-countdown-time, .main_color .wp-playlist-item-meta.wp-playlist-item-title {
color: #50341c;
text-transform: uppercase;
}
.responsive.js_active #top .main_color .avia_combo_widget .top_tab .tab {
text-transform: uppercase;
}
h4.entry-title.summary {
font-style: italics !important;
font-size: 15px;
color: #49662f;
}
.recentcomments, .widget_recent_entries li {
font-size: 14px;
}
p.tribe-events-widget-link {
display: none;
}
#footer {
padding: 0 0 0 0;
}
ul, ol {
margin-bottom: 20px;
margin-left: 0px;
}
ul.sub-menu {
border-bottom: none;
}
.category-gear .av-share-box {
display: none!important;
}
.category-gear .av-comment-box {
display: none!important;
}
.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char {
font-weight: bold;
}
.iconbox .iconbox_content a:hover {
color: #ffffff;
}
#top .tribe-events-list-event-title.entry-title, #top .tribe-events-list-event-title {
font-weight: bold !important;
font-size: 23px !important;
}
.avia-button {
border-bottom-width: 0px !important;
}
.avia-button.avia-size-medium {
padding: 5px 10px 6px 12px;
}
b.yks_mc_interest_group_text {
display: none;
}
.tribe-events-list-widget ol li {
margin-bottom: 25px;
}
@media only screen and (max-width: 1225px) and (min-width: 990px) {
.av-main-nav > li > a { padding: 0 12px; }
strong.logo { width: 20%; }
}
.widget_nav_menu ul:first-child > .current-menu-item > a, .widget_nav_menu ul:first-child > .current_page_item > a {
color: #4f321b;
}
body {
font-size: 14px;
}
.main_color .tnp-brown-box a {
color: #a6b393;
}
@media only screen and (max-width: 990px) {
h1.av-special-heading-tag {
font-size: 20px;
}}
.menu-item-top-level-7 a .avia-menu-text{
color: #52772f !important;
}
@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}

#top h3 a {
font-size: large;
}

#top .grid-entry .inner-entry {
padding-right: 5px;
padding-bottom: 5px;
}

#top .grid-entry .inner-entry {
margin-right: 0px;
box-shadow: none;
}
h4 {
text-transform: inherit !important;
font-size: 20px !important;
line-height: .9em !important;
}
.content {
padding-top: 25px;
}
#tribe-bar-form {
padding-top: 30px;
padding-bottom: 20px;
}

.tribe-mini-calendar-event {
border-bottom: none;
}

.recentcomments, .widget_recent_entries li {
border-top: none;
}

#footer .widget {
margin: 30px 0 0px 0;
}

.widgettitle {
color: #4f321b !important;
}

.tribe-mini-calendar-event .list-info h2 {
color: #52772f !important;
}

#top .tribe-events-adv-list-widget span {
display: inline;
}

#tribe-events-header .tribe-events-sub-nav {
top: 0px !important;
}

.grid-image img {
padding: 15px;
border-radius: 20px;
}

.logo img {
padding-top: 5px;
padding-bottom: 8px;
}

#header_main {
border-bottom-width: 0px;
border-bottom-style: solid;
z-index: 1;

no…. unfortunately not…
this is the site http://www.studiolynnpieraets.be

and this is the css-code that I have already implemented, maybe there is something wrong in here ?:

.container .main-title entry-title .breadcrumb-title{display:none;}

.container {background-color:#cac8bc;
font-family:DINBek-Regular, Helvetica, sans-serif;}

.container_wrap .footer_color {padding:0px;}

.alternate_color .breadcrumb, .alternate_color .breadcrumb a, #top .alternate_color.title_container .main-title, #top .alternate_color.title_container .main-title a {
color: #cac8bc;}

#top .av-menu-button > a .avia-menu-text {
border:0px solid #ffffff;
border-radius:0px;}

#top .av-menu-button > a:hover .avia-menu-text {
border-bottom:1px solid #ffffff;}

p {margin: 0.85em 0;
margin-left:150px;
margin-bottom:10px;}

element.style {
font-size: 13px;}

.avia_textblock {
clear: both;
line-height: 1em;
letter-spacing:1px;
margin-left:0px;}

.av-styling-no-styling .avia-image-container-inner, .av-styling-no-styling .avia_image, .av-styling-no-styling .av-image-caption-overlay {
border-radius: 0;
border: none;
margin-bottom:50px;
margin-right:50px;}

img, a img {
border:none;
padding: 0;
margin:0;
display:inline-block;
max-width:50%;
height:50%;
image-rendering: optimizeQuality;}

html, #scroll-top-link {
background-color: #cac8bc;}

#top h4 a:hover{color:#808080;}
element.style a:hover{color:#808080;}

a:hover, a:focus, a:visited {
outline: 0;
text-decoration: none;
color:#808080;}

.home .av-main-nav-wrap {
float: left;
position: relative;
display:none;}

.main_color a, .main_color .widget_first, .main_color strong, .main_color b, .main_color b a, .main_color strong a, .main_color #js_sort_items a:hover, .main_color #js_sort_items a.active_sort, .main_color .av-sort-by-term a.active_sort, .main_color .special_amp, .main_color .taglist a.activeFilter, .main_color #commentform .required, #top .main_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .main_color .blog-categories a, .html_elegant-blog #top .main_color .blog-categories a:hover {color: #ffffff;}

html{font-family:DINBek-Regular,helvetica,sans-serif;}
body{font-family:DINBek-Regular,helvetica,sans-serif;}

.av-main-nav>li>a, h1 {
font-family: DINBek-Regular!important;}

a:hover, a:focus, a:visited {
outline: 0;
text-decoration: none;}

#top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a:hover {
font-weight: inherit;
text-decoration: none;
color: #808080;}

.content .entry-content-wrapper {
padding-right: 0px;}

.container .av-content-small.units {
width: 100%;}

.av-seperator-icon{display:none;}

.page-id-38 #main .main_color, .page-id-38 #main .main_color .container {
background: white;}

.page-id-38 .header_bg, .page-id-38 .container {
background: white;}

.page-id-38 #main .main_color{background-color:white;}

.page-id-38 .logo {display: none;}

.header_color .primary-background, .header_color .primary-background a, div .header_color .button, .header_color #submit, .header_color input[type=’submit’], .header_color .small-preview:hover, .header_color .avia-menu-fx, .header_color .avia-menu-fx .avia-arrow, .header_color.iconbox_top .iconbox_icon, .header_color .iconbox_top a.iconbox_icon:hover, .header_color .avia-data-table th.avia-highlight-col, .header_color .avia-color-theme-color, .header_color .avia-color-theme-color:hover, .header_color .image-overlay .image-overlay-inside:before, .header_color .comment-count, .header_color .av_dropcap2, #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text, .header_color .av-colored-style .av-countdown-cell-inner, .responsive #top .header_color .av-open-submenu.av-subnav-menu > li > a:hover, #top .header_color .av-open-submenu.av-subnav-menu li > ul a:hover {
background-color: #cac8bc;
color: #ffffff;
border-color: white;
letter-spacing:1px;
font-family:DINBek-Regular, helvetica, sans-serif;}

html* .page-id-38 {
background-color: #fff !important;
background: #fff !important;}

thanks,
Fab.

Hi, thanks once more. Please note the issue is only partly resolved.
I have added the below CSS to the Child-Theme, effectively making most of the changes needed.

However, I am stuck on making two changes:
1. Color-Overlay for the image in the Color-Section. Is there a CSS that can change the color and opacity of this section accross the site? If so, would you be able to provide me with this?

2. I use the headline rotator. There is a “custom” color setting for the headlines. Would it be possible to change the Headline Color of the Headlines Rotator by CSS, and if so, what is the code for this?

If you have any suggestions to improve the below CSS, please do feel free to comment.
Thank you.

@import url(‘../enfold/style.css’);
#top .avia_message_box_content strong{color:#E74D7B;
}
.custom-color-heading strong{color:#E74D7B
;}
.slideshow_caption strong, div .slideshow_caption h2 strong{color:#E74D7B;
}
#top #wrap_all .custom-color-heading .av-special-heading-tag, #top .custom-color-heading a, #top .custom-color-heading strong, #top .custom-color-heading .special_amp{color: #E74D7B;
}
.av-section-color-overlay {
opacity: 0.4 !important;
overlay-color: #E74D7B !important;
}
#top .av_font_icon a{color: #E74D7B; display: block;
}
.av_font_icon.av-icon-style-border .av-icon-char{
color: #E74D7B;
border-color: #E74D7B;
}

Hi Vinay
Thank you for your reply. With the css you provided, It looks perfect in small screen. I tried resizing the browser it looks great

but it still looks like this in iphone. see this screenshot.

and also the text is not clickable, no links , no hover style.

This is all the css used in quick css to get this header widget right. May be it is a bit too much :) May be it needs a bit of clean up. Your help would be highly appreciated.

/* header widget for LARGE screen*/
#header .widget {
  font-size: 34px;
  line-height: 40px;
  position: absolute;
  right: 50px;
  top: 0;
  z-index: 100;
  height: 100%;
  margin: 0;
  padding: 0;
    text-align: right;
}

@media only screen and (min-width: 767px) {
#header .widget{
max-width: 1210px;
left: 0;
right: 0;
margin: 0 auto;

}
}

#header.header-scrolled .widget{
	font-size: 23px;
	line-height: 30px;
}

#header .widget .textwidget, #text-2{
	display: table;
        width: 100%;
	height: 100%;
        float: right;
        z-index: -999 !important;
}
#header .widget .textwidget .custom-text{
	display: table-cell;
	vertical-align: middle;
}

#header .custom-text .icon{
  font-size: 42px;
}

#header.header-scrolled .custom-text .icon{
  font-size: 32px;
}

#header .custom-text .icon span{
	float: none;
	display: inline-block;
	margin-left: 0;
	margin-right: 9px;
}

#header .widget .custom-text p,
#header .widget .custom-text a{
  font-weight: bold;
  color: black;
  margin: 0;
}

/* header widget anchor text hover, it affects social icons too*/
#header .widget .custom-text a:hover{
  color: green;
}

/* header widget for MEDIUM screen*/
@media screen and (max-width: 989px) and (min-width: 767px) {
  #header .widget {
    font-size: 26px;

  }

  #header .custom-text .icon{
    font-size: 40px;
  }

}

/* header widget for SMALL screen*/
@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 100px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }

  .responsive .logo,
  .responsive .logo a {
  	height: 200px !important;
  }

  .responsive .logo img{
     height: 180px !important;
  }
}

/*
.content {
  padding-top: 10px;
  padding-bottom: 10px;
}
*/

.main_menu {
  left: 0px;
  right: auto;
  height: 0px;
  display: none;
}

.special_amp {
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  line-height: inherit;
  font-weight: bold;
  color: inherit!important;
}

/*footer image media query*/

@media screen and (max-width: 720px) {
    .textwidget img.avia_image {
        margin-right: 100px;
    }
}

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

/*reduce color box top padding*/

.content {
padding-top: 10px;
padding-bottom: 10px;
}

/* added */

#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 45px 0px 0px 0px;
}

#header.header-scrolled#header .widget .textwidget, #text-2 {
    display: table;
    width: 35%;
    height: 100%;
    float: right;
    display: inline-flex;
padding: 10px 0px 0px 0px;
margin-left: 100px;
}

@media screen and (max-width: 1900px) and (min-width: 989px) {

#text-2 {
  right: 40px !important;
   margin-right: 0px !important;
}

}

@media only screen and (max-width: 766px) and (min-width: 480px){

#text-2 {
  right: 100px !important;
   margin-right: 0px !important;
}

}

@media screen and (max-width: 767px){
  #header .widget {
    font-size: 14px;
    line-height: 24px;
    right: 130px;
    padding: 0;
  }

  #header .custom-text .icon{
    font-size: 26px;
  }
  .responsive .logo img{
    height: 140px !important; 
  }
}

@media screen and (max-width: 480px) {
.responsive .logo img {
    height: 90px !important;
}
.responsive #top #wrap_all .container {
    width: 99%!important;
    max-width: 99%!important;}}