Icons and Other Information in Top Bar

Hey Eleina,
Thanks for the link to your example, try adding this code to your Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text

<ul class="topbar-contact"><li class="map"><span class="inline"><a href="#">[av_font_icon icon='ue842' font='entypo-fontello' size='20px'][/av_font_icon]Pet Street 123 - New York</a></span></li>  <li class="phone"><span class="inline"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]555-555-5555</a></span></li>  <li class="mail"><span class="inline"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon] (Email address hidden if logged out) </a></span></li></ul>

and add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

#header_meta .inline {display: inline-block;}
#header_meta .topbar-contact ul {list-style: none; list-style-type: none;}
#header_meta ul.topbar-contact li {display: inline;}
#header_meta ul.topbar-contact li a {vertical-align: middle;}
#header_meta ul.topbar-contact {margin-bottom: 0;}

this is the expected results:

Best regards,
Mike

Hi,
This is because the transparency setting has priority, I will point this out to the Dev Team for their review.
For now please use this css:

@media only screen and (max-width: 989px) { 
.responsive #top .av_header_transparency #header_meta {
    background: #066892;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the login, I assume that the background color of the header was meant to be #066892, I found that in the Enfold Theme Options ▸ General Styling ▸ Logo Area ▸ Logo Area Background Color the color was set to white, causing the white overlay on the blue background color.
I removed the white and now the header is blue, please clear your browser cache and check.

Best regards,
Mike

Hi,
I found that your header div’s are not correct, your #header_main is a child of your #header_meta instead of being a sibling:
your site:

my test site:

but I don’t see a cause for this, we are both using the same version, and I tried updating your site with my version in case your version was corrupt but that didn’t help.
I saw your server is using PHP v7.4.33 and I’m using v8.0.1 so I downgraded my PHP version to try to duplicate, but that didn’t reproduce your error.
I tried disabling all of your plugins with no success.
So I’m not sure what has caused this, which webhost and server are you using? Is it using an object-oriented cache such as Memcached, Redis, or Varnish?
I have asked the rest of the team if they have seen this before.

Best regards,
Mike

Hi,
Thanks for the screenshots, but I don’t recognize these options since I don’t have a Siteground account, so I’m not sure how they would change the DOM structure.
While we wait for feedback from the rest of the team, do you mind if I try exporting your site to a test site on my server to see if the error carries over?

Best regards,
Mike

Hey,

Your HTML in “Phone Number Or Small Info Text” field in Enfold theme options > Header > Extra Elements was broken. I fixed it and that helped.

Please review your website :)

Best regards,
Yigit

Hi,
Please try clearing your browser cache, when I check the topbar has a blue background and white text.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
That is odd, I checked your contact page with my Android phone the topbar was blue with white text. I also tested on a Mac with Safari design mode and it also showed correctly.
I don’t have an iPhone so I have asked the team to check with their iPhone and will reply when I hear back or they may reply with their findings, Thank you for your patience.

Best regards,
Mike