Home>Support>How to Right Justify Social Icons and Text on right side of header

How to Right Justify Social Icons and Text on right side of header

By Cliffd, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Please help!

I’ve purchased several Vantage themes and have never had an issue until now.

I am using Acurax Social Icons as a widget along with a text widget in my header. I cannot get the two to align in a right justification manner.

Any ideas?

Cliff

URL: http://ims.dallasmediaproduction.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Cliffd

    Thanks for reaching out.

    In the Text widget used to add the icons there is a paragraph before the shortcode. Please try removing that. You can insert the CSS at Appearance > Custom CSS:

    <p style="text-align: right;"><style>
#short_code_si_icon img 
 {width:40px; 
}
.scid-1 img 
{
width:40px !important; 
}
</style>

    Remove the above and insert only the following at Appearance > Custom CSS:

    #short_code_si_icon img 
 {width:40px; 
}
.scid-1 img 
{
width:40px !important; 
}

    The rest of the space is hard to remove because the icons, the actual images, have several pixels of clear space around them.

    Try adding the following to your Custom CSS:

    #short_code_si_icon { 
margin-top: -10px;
}

    You could also give our SiteOrigin Social Links Widget a try:

    https://wordpress.org/plugins/so-widgets-bundle/

  2. 10 years, 1 month ago Cliffd

    Hi Andrew,
    Thanks for replying. Referring to your 1st comment, “In the Text widget used to add the icons there is a paragraph before the shortcode.”

    I don’t understand where you are referring with respect to the paragraph before teh shortcode.. All I did was insert shortcode and Rt Justify. Nothing before or aft…deleted to be sure.

    I’m using the Visual Editor widget for the phone number (right justified) and the Acurax Social Icons widget right below in the Header widget area…wish I could attach screen shots.

    I’ve inserted the css as described with no success, even used the Site Origin SM widget with no success.

    I’ve tried multiple combinations of Site Origin Widgets with no success.

    I’m lost here but I don’t want to changed themes and start again.

    …help

  3. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Ahh right, the shortcode is inserting the paragraph, my bad.

    Ok, under Appearance > Custom CSS please try just the following:

    #short_code_si_icon {
  margin-top: -30px;
}

    Let me know how that goes.

  4. 10 years, 1 month ago Cliffd

    Andrew,

    Nope, this code removes the vertical space between the phone number and the SM icons. What I’mm looking for is to have both right justified using the header widget.

    Also, (different topic) is there a way to extend the body/header/whatever to the very top and bottom of the page…removing the background space from ONLY the very top and bottom of the site?

    Thanks for your support…you diligence is respectfully noteworthy.

    Cliff

  5. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Looks like you’ve made progress on justifiying your header widget area. Let me know if you still need to me to look into that.

    Question two: try the following at Appearance > Custom CSS:

    /* Container */

#colophon {
  margin-bottom: 0;
}

#page-wrapper {
  padding-top: 0;
}
  6. 10 years, 1 month ago Cliffd

    Actually, I still cannot get the Social Media icons and the phone number the align on the right. And I just looked at the site with Firefox and the header is mostly gone.

    Top and Bottom of page show no background now. Just what I wanted!!

  7. 10 years, 1 month ago Cliffd

    A different topic please.

    I have a horizontal menu in the footer that looks like this:

    Home Product Solutions Merchant Support etc.

    How can I add a vertical divider between each menu item…for example:

    Home | Product Solutions | Merchant Support | etc.

    When I finish this site I want you to send me a Donate link for all your help.

  8. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Here we go, let’s try the following:

    #short_code_si_icon[style] {
text-align: right !important;
}
  9. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Try the following to add a right border to menu items:

    .main-navigation ul li {
	border-right: 1px solid red;
}

.main-navigation ul li:last-of-type, 
.main-navigation ul.sub-menu li {
	border-right: none; 
}

    Change the red value to your preferred hexadecimal color.

  10. 10 years, 1 month ago Cliffd

    Andrew,

    This ( #short_code_si_icon ) worked like a champ!! thanks so much!!

    On the menu question, I’m referring to placing dividers between the menu items in the “FOOTER.” The main menu is fine.

  11. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Ahh right! Ok, in the footer try this:

    #footer-widgets .widget.widget_nav_menu li:before {
  content: "\007C\00a0\00a0";
}

#footer-widgets .widget.widget_nav_menu li:first-of-type:before {
  content: none;
  margin-right: 0;
}

#footer-widgets .widget.widget_nav_menu li:last-of-type {
  margin-right: 0;
}

    In your Custom CSS you’re listing margin-right: 16px; for the footer menu list item. Try reducing that to make all items fit on one line.

  12. 10 years, 1 month ago Cliffd

    Looking good Andrew…don;t meant to wear you out.

    Is there a means to center the divider between the menu items?
    Here is the site now: http://ims.dallasmediaproduction.com/

    Also, can we reduce the vertical padding in the footer to bring the bottom text closer to the bottom of the menu?

    Thanks again, your the best!

    Cliff

  13. 10 years, 1 month ago Andrew Misplon
    Hi, I Work Here

    Hi Cliff

    Apologies for the delay. It looks like you’ve moved away from the original implementation of this. If you’d like to revisit just let me know.

    Thanks.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More