Top-menu-bar Social Icons

  • Author
  • #2367



    Have you noticed any problems with the Social Icons since you changed from ‘Ultra-icons’ to ‘Font-Awesome’?

    I have been building a site on Ultra v0.9.4 (current when I started) and have finally got to close to launch and so updated the theme to bring it up to speed (obviously using a child theme) and found quite a few class name changes and the like, that I had to update so my custom css was still valid.

    Upon updating to v1.0.1, I noticed you changed to ‘font-awesome’ (who wouldnt?) for your icons and have noticed certain issues with the display positions on different browsers.

    I have installed a fresh v1.0.1 Ultra theme on another test site just to confirm its not some custom code that is affecting it and would like to know if you see the same issues please?

    On Firefox (40.0.3) I see the icons in the top left (Social Menu position) are stuck to the top of the viewable page, not vertically-aligned to the phone and email text like they were. (The #top-menu-bar however does have ‘vertical-align’ set to center for this social menu)

    On Chrome ( They work perfectly and show exactly where you would expect them.

    On Safari (5.1.4) The social icons are now vertically aligned correctly but the is now a massive (40-50px) margin between each social icon. This spreads out across the top bar to about the center with multiple social links.

    On IE (11.0.9600) The social icons are nowhere to be seen (I’m assuming they are positioned off screen to the top) and obviously not in the right position.

    These issues appear on a fresh install v1.0.1 site as well and unless I am mistaken, must be showing on your browsers too.

    I cant give you the link to the site as it yet to go live, but I have reverted to a vanilla ultra theme and see the same problems.

    I have noticed that removing the ‘display:block;’ from the actual link ‘a’ helps in Firefox to bring the icons back into line, but makes them move slightly out in Safari. This doesn’t help the large left/right margin issue.

    Any advice?




    Andrew Misplon

    Hey Paul

    Thanks for the effort involved here.
    No, wasn’t aware of any issues.
    Sorry for the hassle updates might have caused.

    ultra-icons had one or two icons in it from another pack. I landed up not using them. By moving to font-awesome and shifting to a standard “font-awesome” handle in functions.php we ensure that if a plugin uses Font Awesome and abides by the same standard handle, we won’t be double loading the library. Assuming we both have a the same Font Awesome version number. A long shot! But, still, it’s best practice.

    Ultra 1.0.1 brought about quite a big change. You can now add a social icon to any menu location and at the same time, you can use the social icon menu positions for regular menu items too. So in essence, I did away with the idea of a social icon menu. All menu locations now have this ability.

    Ultra 1.0.1 also brought above a change in that the top bar now has an option responsive feature. It can collapse at the same breakpoint you have set for your main mobile menu. It’s a default OFF option. You can turn it on at Appearance > Theme Settings > Navigation > Responsive Top Bar.

    Ok, so onto the problem. Is the site online? Can you perhaps create a new user account for me to test with so I can get past the maintenance mode plugin if you’re using one?

    [email protected]


    Andrew Misplon

    Hey Paul

    A quick follow-up to see how things are going on your side. Let me know when you have time, I’m keen to get your challenge resolved.

    Ultra 1.0.2 is in the update queue. As part of my initial WooCommerce integration there is a crucial change that will affect all child themes. I’m going to do my best to notify everyone on every support thread regarding child themes that I can access. The change is simple but wide reaching. In every template file there was previously a div closure for the container class:

    </div><!-- .container -->

    That closure must now be moved to footer.php where is should have always been. That’s my bad.

    If you have template files in your child theme or footer.php, a change will need to happen. I’m standing by to assist anyone that needs help with this. I don’t mind doing the change if I get sent a link to the child theme in use.

    Chat soon.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Scroll to top