Upload .PNG file to header?

Homepage Community Forums SquareOne Theme Support Upload .PNG file to header?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #12324
    rchapple
    Customer

      I would like to add a transparent background .PNG file in place of the Site Title in the upper left of the header. Is this possible?

      #12326
      rchapple
      Customer

        I added the logo through the header image interface on the customizer page, however the logo needs to be cropped to 360 x 70 resting in a small logo. There is also quite a distance between the logo and the nav menu. Suggestions?

        Here’s the site: http://www.aerialscientific.com/
        Very much a work in progress… sorting the header first.

        Thanks!
        Ron

        #12334
        Wes
        Moderator

          The min-height is set to 164px by default, so that’s where some of that space is coming from. You can adjust this on line 1912 in your css. I’d start at around 68px like this –

          .header-image .site-title a {
              float: left;
              min-height: 68px;
              width: 100%;
          }

          If you want to decrease it even more, the other space is the bottom padding from the head-wrap on line 1823 in your css –

          .head-wrap {
              padding: 0 0 20px;
          }

          If you want to upload a different size logo, you would first need to change the size in your functions file and then when you upload using the WordPress header uploader you won’t need to crop….it should upload if the image size in your functions file matches the exact size of the image you’re uploading.

          #12336
          rchapple
          Customer

            Thanks Wes, worked perfectly!

            2 more questions:

            1. How can I center the newly uploaded logo? I tried changing CSS to the following which did not seem to work?

            .header-image .site-title a {
            float: center;
            min-height: 240px;
            width: 100%;
            }

            2. How can I center the Main Nav?

            All the best,
            Ron

            #12338
            Wes
            Moderator

              Add this to your css for the logo –

              .site-title a {
                  background-position: center top !important;
              }

              For the nav you’ll have to make a some adjustments to your css. First on line 1942 – .genesis-nav-menu you’ll need to add text-align: center;

              Then on line 1955 – .genesis-nav-menu .menu-item you’ll need to change the float: left; to float: none; and add display: inline-block; to the code.

              #12339
              rchapple
              Customer

                Again, worked perfectly. Thanks Wes!!
                You will need to send me an invoice, or we will just need to get you a ride on one of our helicopter shoots 馃槈

                Ron

                #12352
                Wes
                Moderator

                  Haha no problem! Although a helicopter ride would be incredibly awesome 馃槈

                  #13302
                  John
                  Customer
                    This reply has been marked as private.
                    #13306
                    Wes
                    Moderator

                      @John can you create a new thread/post? This thread is actually supposed to be closed (since it’s already been resolved), so other users won’t receive email notifications each time there is a reply.

                      So as soon as you create a new post I’ll be able to help you figure out what’s going on. Also make sure and add your link as well, so I can take a look at what’s going on.

                      Thanks!

                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • The topic ‘Upload .PNG file to header?’ is closed to new replies.