Announcement

Collapse
No announcement yet.

Move Social Buttons to Header

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

  • 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.

  • #2
    Anyone have any ideas on this?

    Thanks!

    Comment


    • #3
      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
      TheCartDesigner.com
      Not 3dcart Owned or Operated
      100% Independent 3dcart Expert


      Follow Us on Twitter

      Comment


      • #4
        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
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          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!

          Comment


          • #6
            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.
            TheCartDesigner.com
            Not 3dcart Owned or Operated
            100% Independent 3dcart Expert


            Follow Us on Twitter

            Comment


            • #7
              I did. When I cleared the cache, they moved to the location they are now.

              Thanks!

              Comment


              • #8
                That did the trick, thats awesome!

                Thank you!

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

                Thanks,

                Vern

                Comment


                • #9
                  You are very welcome. Glad I could help.

                  Shaun
                  TheCartDesigner.com
                  Not 3dcart Owned or Operated
                  100% Independent 3dcart Expert


                  Follow Us on Twitter

                  Comment


                  • #10
                    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!

                    Comment


                    • #11
                      change the social wrap rule to this.

                      .social-wrap {
                      display: block;
                      position: absolute;
                      right: 420px;
                      top: 0;
                      }
                      TheCartDesigner.com
                      Not 3dcart Owned or Operated
                      100% Independent 3dcart Expert


                      Follow Us on Twitter

                      Comment


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

                        Have a great day!

                        Thanks again,

                        Vern

                        Comment


                        • #13
                          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;
                          }
                          TheCartDesigner.com
                          Not 3dcart Owned or Operated
                          100% Independent 3dcart Expert


                          Follow Us on Twitter

                          Comment


                          • #14
                            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!

                            Comment


                            • #15
                              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;
                              }
                              TheCartDesigner.com
                              Not 3dcart Owned or Operated
                              100% Independent 3dcart Expert


                              Follow Us on Twitter

                              Comment

                              Working...
                              X