This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Icon fb in Header not aligned with langage WPML switcher

Resolved 14 replies premiumthemetheme-vantage
Romain
10 years ago · Last reply by Andrew Misplon 10 years ago

Hi Andrew, Hi Greg,

First of all, thanks a lot for your theme and your rich support ! Everythings works great !
One thing I canno’t manage, to place properly the fb icon along the langage switcher of WPML… On Firefox it’s OK but Opera, Chrome etc… he’s going down and down… even worst on mobile. I used the vantage social media widget where I resized the medium icon (which is maybe the problem…)
I added on my style.css child theme :
/* =facebook icon to the right and separate to the icon flag and replaced on chrome
———————————————– */
.widget_vantage-social-media .social-media-icon.social-media-icon-facebook{
float: right;
margin-right: 30px;
margin-top: -1px;
}
/* =facebook icon resized
———————————————– */
.widget_vantage-social-media .social-media-icon {
width: 14px;
height: 14px;
}
/* =resize and repostion the ‘f’ in the icon facebook
———————————————– */
.widget_vantage-social-media .social-media-icon [class^=”icon-“] {
text-align: center;
margin-top: -0.45em;
margin-left: -0.4em;
}

So my other option is to place this icon next to the search one, just on his left and just keep my little flags alone and quiet in the header. But for this I really need you to help me… if you have any idea how I can figure this out ?

Thanks

Romain

URL: http://techn.de/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

14
  1. Daniel Staff 10 years, 11 months ago

    Hi Romain,

    Thank you for your kind words :-)

    Kindly place the following css in the custom css

    .widget_vantage-social-media .social-media-icon {    
    top:-9px!important;
}

    Cheers

  2. Romain 10 years, 11 months ago

    hi Addo ! I forgot you also ! I actually do not know how big is your team…
    Thanks a lot for the code… it’s actually perfect for opera and other chrome but now, as I expected, the fb icon on Chrome is going up also sadly…
    I will just to try to play with all this.
    If an another idea raised I will be happy to hear it !
    thanks again !

  3. Daniel Staff 10 years, 11 months ago

    Hi Romain,

    Is it too far up on Chrome or Firefox? I will try and get some browser specific CSS to try and help you out.

    Please let me know!

  4. Romain 10 years, 11 months ago

    Hi Addo,
    Too far up on Firefox sorry, not Chrome! Thanks to your code, Chrome & Opera are both fine !
    But Firefox is now the problem…
    Thanks for keeping me update is you find anything I will appreciate…
    I try to disturb you as less as I can as your forum is already rich on infos, but for this point… am stuck !

  5. Romain 10 years, 11 months ago

    Hi Addo,
    I come back to you to see if you figure something out with this fb logo too up in Firefox ? i did not find anything yet…
    Thanks !

  6. Andrew Misplon Staff 10 years, 11 months ago

    Hi Romain

    Start out by adding the following:

    /* Vantage Header Sidebar Padding */
header#masthead .hgroup #header-sidebar[style] {
padding-top: 0px !important;
padding-bottom: 0px !important;
}

    You can adjust those two 0px figures as required. Right now you’re header sidebar is padding 69px. That’ll give you the same starting position for all the browsers. Addo’s CSS should then do the trick.

  7. Romain 10 years, 11 months ago

    Hi Andrew,
    Thanks for answering,
    That’s defeanitely what I would like, to have the same starting position on all browsers… unfortunately your code only works for Firefox. Addo’s CSS make the fb icon almost disapear…
    On Opera, Chrome and Explorer nothing has changed with your code and it’s perfect ! Addo’s CSS do the work….
    Still nothing I see to bring this fb icon down on the Firefox…
    Everything is viewable on the website in live…
    I appreciate your help, if something come up, let me know !
    R.

  8. Andrew Misplon Staff 10 years, 11 months ago

    Thanks for the feedback here. Please change 0px to 69px, so your Custom CSS on this will now look as follows:

    header#masthead .hgroup #header-sidebar[style] {
    padding-top: 69px !important;
    padding-bottom: 69px !important;
}

    Please can you then remove the Custom CSS sent by Addo, just so I can see things as they were before we tired to resolve. Thanks.

    On my side that gets your icons showing again in Firefox.

  9. Romain 10 years, 11 months ago

    The Firefox is now ok but the three others (Opera, Explorer and Chrome) shows the fb down (I guess +9px down…) and not aligned so…
    I know, I am also “tired” to resolve this ;)

  10. Romain 10 years, 11 months ago

    Do you actually see the same things as well on your side with this fb icon not aligned or am I the only one ?
    I would really want to go through and delete this fb icon but the world apparently need it….

  11. Romain 10 years, 11 months ago

    On mobile, it’s actually a disaster on chrome even if I had a nice alignment on PC ….

  12. Andrew Misplon Staff 10 years, 11 months ago

    I see the problem. Please try this for me. Insert a Layout widget into the header widget area, create a two column layout in that widget, insert one widget into each column. That’ll hopefully handle things a bit bitter.

  13. Romain 10 years, 11 months ago

    Andrew, it’s perfect ! Topic is closed !
    Just have to resize the column in order to the flag appears horizontally !
    Unfortunately I did not know the layout widget… I plead guilty…
    Thanks for your time and your great themes !
    R.

  14. Andrew Misplon Staff 10 years, 11 months ago

    It’s a brand new widget. Really glad to hear that helped.

    All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread