Adding social media icons in header

Homepage › Community Forums › Epik Theme Support › Adding social media icons in header

Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • April 23, 2013 at 12:11 pm #4132
    Elizabeth
    Customer

      I would like to add some social media icons in the header of my website using the Header Right widget area and the Social Profiles widget. I now have a custom header image for my logo and the size is 1152×120. If I try putting in the Social Profiles widget it goes below the header image (which makes sense). I’m thinking I need to change the custom header width in the functions.php file and put in a smaller header image for my logo.

      Should I change the width in the functions.php file here? And if so, then where do I put my new smaller width logo (header) image?

      Add support for custom header
      add_theme_support( ‘genesis-custom-header’, array(
      ‘width’ => 1152,
      ‘height’ => 120

      site is: http://rankingedge.com

      I’m not even sure if I’m on the right track here. Any suggestions? Thank you!

      April 24, 2013 at 1:30 am #4154
      Wes
      Moderator

        yes you would first change the size in your functions file first….then upload your image. For the smaller logo, you would need to override the logo in your responsive section of your css file.

        Example –

        `#header {
        background: url(link_to_your_image.jpg);
        }`

        April 24, 2013 at 2:46 pm #4176
        hotsaucedaily
        Customer

          eslucky and Wes – can you dumb this down for us? I’d like to accomplish the same, but I’m not quite following what you both are saying.

          Could you post this so we all benefit from the tip? Thanks!

          ~Brian

          April 24, 2013 at 3:51 pm #4191
          Elizabeth
          Customer

            I’m not sure if this will help you Brian but I just got this to work. I’m sure Wes will have more valid information…or correct anything I said here. But here’s what I did.

            First I went into the functions.php file (This is found in WP in the Appearance – Editor area) I changed this code:

            Add support for custom header
            add_theme_support( ‘genesis-custom-header’, array(
            ‘width’ => 1152,
            ‘height’ => 120

            I simply changed the width from 1152 to 400 (the new width of my logo image)

            After that I uploaded (in the Add new Media area) my new logo image that was 400×120. I copied the link to the image and added the code that Wes put in his message. Now, this did not immediately work for me in so I thought maybe I needed to do some changing in the actual Genesis header area. When I went there I saw that the dimension for uploading the header image was changed to the 400×120. I uploaded my new logo file there and I then had my new logo in my website header.

            I had to do a second thing to make this work. The widget area for the header right area still would not work. I had to go back into the CSS and change the percentage width for the widget. I made mine 40%.

            #header .widget-area {

            overflow: hidden;
            width: 40%;

            All this will vary with whatever sizes you are doing. I hope this wasn’t confusing for you. It did work for me.

            I don’t know why I can’t get the code tags to work in this message. I’m sure I’m doing something simple wrong. But I think you’ll get the point.

             

            April 24, 2013 at 4:30 pm #4205
            Wes
            Moderator

              Also, you can make your logo center by adding this to the responsive section (iPhone and iPad sections) – 

              #header {
    background-position: center top;
}

              in addition to the other suggestion.

              I’ll be creating a much needed tutorial on how to add a header, how to make it responsive and a few other things since there isn’t much out there that explains how to do this…..which is surprising.

              Nick Kroft created a plugin that handles it – http://designsbynickthegeek.com/plugins/genesis-responsive-header ….This is for anyone who doesn’t want to deal with the code.

              Hopefully I’ll have that tutorial and many others very soon.

              April 24, 2013 at 10:39 pm #4231
              hotsaucedaily
              Customer

                Thanks Eliz ! I can handle those things. Just needed a little clarification.

                 

                Wes – a tutorial is indeed a welcome necessity! Thanks.

                April 24, 2013 at 10:44 pm #4234
                Wes
                Moderator

                  You’re Welcome

                  April 24, 2013 at 10:47 pm #4235
                  Elizabeth
                  Customer

                    Your welcome. Glad I could help. I didn’t mean to make it sound like you couldn’t do it. I just thought that maybe I didn’t really explain it the right way. 🙂 Good luck with your website.

                  • Author
                    Posts
                  Viewing 8 posts - 1 through 8 (of 8 total)
                  • The topic ‘Adding social media icons in header’ is closed to new replies.