Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
  • #1370387

    Hi, I’d like to place a Map or Location Icon with client address in the top bar on left, together with a phone icon and telephone number, but on one line at the top left. I’ve tried a bunch of code, but it places it on two lines and I’m confused about the best way to do this. Although I’ve done it before using code I swiped from google developer tools, I can’t seem to make it happen this time.

    The top bar I want to emulate is what you see on this site:

    Thank you.


    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,


    That worked, and I was able to style it too, thank you!

    Could I ask though, why is it that, although I have the Top Bar programed in Advanced Styling to have a background of Blue with white text, on a page that has a transparent header, it does not take on the blue background on tablet or mobile, it makes the background white, with white text, so you can’t see it. IF you go to a page without the transparent header though, then the top bar background will be blue. So basically, when you have a transparent header, that you bring down to tablet or mobile, the top bar does not take on the top bar settings under advanced, it just leaves it white. Am I missing something on that ?

    Home Page with transparent header:

    Other Page without transparent header, this is the way the top bar should look on mobile and tablet:


    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,


    Unfortunately, that didn’t work, but now the issue is even more strange, and it happened overnight (without my doing anything). When I came to my desk this morning to work on this site, the header has what looks like a white background with some transparency, and all text is white in the logo ara area as well as the top bar. So, on all screen sizes

    1) the top bar is not taking on the syling in advanced options;
    2) the logo/navigation area is not taking on the styling in Theme Options > Logo Area.

    Both top bar and logo area were taking on the styling settings yesterday on desktop versions, but not mobile or tablet; now it is happening on all screen sizes.


    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,


    Hi Mike,

    No, that wasn’t what I wanted. I actually wanted the background to be white in the logo area and the top bar to be the blue – it looked really nice. Weirdly, although I can see that the logo area is now blue, I cannot see the change you made in the back end in Theme optins > Logo Area – it shows nothing, so I put it back to white, but that changed the top bar as well, and the styling is still not taking on any of the text colors I have programmed.

    Supposed to be:

    Blue Top Bar #066892
    White Logo Area with Black text and blue on hover as well as active page – and, this is the way it is programmed, but it is not working.

    Seriously, it was working just fine, exactly the way I have it programmed in theme options, then overnight, it just changed. There seems to be a conflict somewhere and it is not taking on my styling options.


    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,


    Thank you for all your troubleshooting.

    I am using Siteground

    I do not have “MEMCACHED” turned on, but do have “Dynamic Cache”, which I just flushed. I noticed something else in Siteground under Cachinge Levels. The first one is NGINX Direct Delivery – which was enabled and, since it is not enabled on my site, which is working fine, I disabled it, but that didn’t seem to help.

    Screenshots from Siteground:


    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,


    Of course I don’t mind, I really appreciate your help.



    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,


    Thank you, it looks great now on Desktop, just the way the styling options are set.

    However, there is just one remaining problem, which is the original problem. The Top Bar styling on mobile & tablet – it’s still white background with white text, so it’s not taking on top bar styling on smaller screens.


    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,


    I’ve tried that, cleared the cache on my phone, using Chrome, no cigar. Tried pulling up on somone else’s phone who had never accessed the site, that didn’t work either. Both show white top bar with white text.

    I also tried pulling up the site on my phone in incognito mode – same thing – white top bar with white text.

    But, if I go to a screen viewer for testing sites on different screen sizes, it looks good. I’m stumped and really appreciate your help.

    • This reply was modified 1 year, 3 months ago by Eleina_Shinn.

    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,



    I added following code to Quick CSS field in Enfold theme options > General Styling

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

    Could you please clear dynamic cache on SiteGround and review your website? :)
    Best regards,


    That was it, it’s only the pages where a transparent header is chosen that the top bar does not take on the theme styling options; your css worked to fixt that. Thank you!


    Glad Yigit could 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,

Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Icons and Other Information in Top Bar’ is closed to new replies.