Announcement

Collapse
No announcement yet.

Move Social Buttons to Header

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • thecartdesigner
    replied
    This will move it to just above the menu bar. That's about the only best other option.

    .social-wrap {
    display: block;
    position: absolute;
    top: 85px;
    width: 980px;
    }

    Leave a comment:


  • softballdreamz
    replied
    That does work better. I did notice one thing, when you are logged in, the "Hello, your name Log Out" sits on top of the icons?

    Suggestions?

    Thanks again!

    Leave a comment:


  • thecartdesigner
    replied
    I took a closer look at it quick and changing these two rules to below will work much better

    .social-wrap {
    display: block;
    position: absolute;
    top: 40px;
    width: 980px;
    }

    .social-icons {
    float: right;
    margin: 0 65px 0 0;
    position: relative;
    }

    Leave a comment:


  • softballdreamz
    replied
    Thank you, that did it! I can't believe I didn't catch it sooner.

    Have a great day!

    Thanks again,

    Vern

    Leave a comment:


  • thecartdesigner
    replied
    change the social wrap rule to this.

    .social-wrap {
    display: block;
    position: absolute;
    right: 420px;
    top: 0;
    }

    Leave a comment:


  • softballdreamz
    replied
    I am not sure if it is just a coincidence, but my Search above the Social Media icons is not longer working.

    Any thoughts?

    Thanks!

    Leave a comment:


  • thecartdesigner
    replied
    You are very welcome. Glad I could help.

    Shaun

    Leave a comment:


  • softballdreamz
    replied
    That did the trick, thats awesome!

    Thank you!

    BTW, I am still very interested in a theme..

    Thanks,

    Vern

    Leave a comment:


  • softballdreamz
    replied
    I did. When I cleared the cache, they moved to the location they are now.

    Thanks!

    Leave a comment:


  • thecartdesigner
    replied
    Did you replace your global header code as specified above starting with <div class="social-wrap">

    If you did... You need to go to your store settings scroll all the way to the bottom and click "clear cache"

    I see whats happening... On top of making sure you have the social-wrap div above Change these two css rules below to:

    .social-wrap {
    display: block;
    position: absolute;
    top: 0;
    width: 980px;
    }

    .social-icons {
    float: right;
    margin: 45px 70px 0 0;
    position: relative;
    }

    That should do it. Make sure you clear your cache again
    Last edited by thecartdesigner; 07-17-2014, 04:51 PM.

    Leave a comment:


  • softballdreamz
    replied
    I moved them and added the code, but they are displaying odd.

    I will leave them there for now.

    Thank you very much for the help!

    Leave a comment:


  • thecartdesigner
    replied
    I went ahead and loaded the same template you are using to do the adjustments.

    Use the code below in your global header:

    Code:
    <div class="social-wrap">
    <div class="social-icons"> 
      <!--START: social_link_facebook--><a href="[social_link_facebook_url]" class="facebook" target="_blank" title="Like Us on Facebook"></a><!--END: social_link_facebook--> 
      <!--START: social_link_twitter--><a href="[social_link_twitter_url]" class="twitter" target="_blank" title="Follow Us on Twitter"></a><!--END: social_link_twitter--> 
      <!--START: social_link_googleplus--><a href="[social_link_googleplus_url]" class="gplus" target="_blank" title="Follow Us on Google+"></a><!--END: social_link_googleplus--> 
      <!--START: social_link_youTube--><a href="[social_link_youTube_url]" class="youtube" target="_blank" title="Subscribe to Our Channel"></a><!--END: social_link_youTube--> 
      <!--START: social_link_pinterest--><a href="[social_link_pinterest_url]" class="pinterest" target="_blank" title="Follow Us on Pinterest"></a><!--END: social_link_pinterest--> 
      <!--START: social_link_instagram--><a href="[social_link_instagram_url]" class="instagram" target="_blank" title="Follow Us on Instagram"></a><!--END: social_link_instagram--> 
      <!--START: social_link_tumblr--><a href="[social_link_tumblr_url]" class="tumblr" target="_blank" title="Follow Us on Tumblr"></a><!--END: social_link_tumblr--> 
      <!--START: social_link_blog--><a href="[social_link_blog_url]" class="blog" target="_blank" title="Subscribe to our Blog"></a><!--END: social_link_blog-->
      <div class="clear"></div>
    </div>
    </div>
    Add the css rules below to the absolute bottom of your active css file:

    Code:
    /* Social Icons Buttons */
    .social-wrap {
      display: block;
      position: absolute;
      width: 980px;
    }
    
    .social-icons {
      float: right;
      margin: 45px 60px 0 0;
      position: relative;
    }
    
    .social-icons a {
        float: left;
        width: 22px;
        height: 22px;
        display: block;
        margin-right: 5px;
        background: url(../../../../assets/templates/common/images/social-icons.png) no-repeat;
    }
    .social-icons a.facebook {background-position: 0 0; }
    .social-icons a.twitter {background-position: -26px 0; }
    .social-icons a.gplus {background-position: -51px 0; }
    .social-icons a.youtube {background-position: -77px 0; }
    .social-icons a.pinterest {background-position: -103px 0; }
    .social-icons a.instagram {background-position: -129px 0; }
    .social-icons a.tumblr {background-position: -154px 0; }
    .social-icons a.blog {background-position: -180px 0; }
    Hope this helps.

    Thanks,
    Shaun

    Leave a comment:


  • thecartdesigner
    replied
    Can you put them back in your global header? As soon as they show up I can try to get them aligned for you.

    Thanks,
    Shaun

    Leave a comment:


  • softballdreamz
    replied
    Anyone have any ideas on this?

    Thanks!

    Leave a comment:


  • softballdreamz
    started a topic Move Social Buttons to Header

    Move Social Buttons to Header

    Hello All,

    My site is Welcome to Softball Dreamz - Sacramento's Softball Apparel & Accessories Headquarters!. I am not super well versed at coding. Essentially, what I would like to do is move the social icons from their current location on my site to directly below the search box, centered.

    I have used this tutorial https://support.3dcart.com/Knowledge...s-social-links

    and can get them to appear on my site. Now I just need to move them. When I put the code from the help page in the global header field, the icons display beneath the logo.

    Any help is MUCH appreciated.
Working...
X