Header Right Area

Community Forums Forums Design Tips and Tricks Header Right Area

This topic is: not resolved

This topic contains 31 replies, has 2 voices, and was last updated by  AC 1 year, 4 months ago.

Viewing 15 posts - 16 through 30 (of 32 total)
  • Author
    Posts
  • #40780

    AC
    Blocked
    Post count: 7712

    You have 2 headers in your code. You should only have 1. You put something in your code to Center the logo. Not sure how you coded that, but that’s why it’s shifted over. How did you input the logo? What method.

    #40790

    stefiharr
    Participant
    Post count: 47

    In my `genesis_header` Hook, I have the following code:

    <div class=”header”><a href=”http://www.thegratefulbread.com/newsite”><img src=”http://thegratefulbread.com/newsite/wp-content/uploads/2013/05/gratefulbreadlogo.png”></a></div>

     

    In the editor, I did have some funky coding.  So, I fixed it – a little…but I can’t get the header to go to the left (I tried float: left; but that didn’t work…and I don’t see the stuff that’s supposed to be on the right).

    #40798

    AC
    Blocked
    Post count: 7712

    That’s why. Pull that out of there. Open up the Functions.php file. Look for the header settings and change them to the exact size of your logo and save. Then go to Appearance > Header and upload it there. You added another Header class and it’s confusing the CSS. I never use the hook for logos/headers. Once you do this, it will be on the left, the header right widget will show up and they will respond properly.

    #40799

    stefiharr
    Participant
    Post count: 47

    Ahhh!  OK!  Php scares me!  Do I HAVE to go in there and change the size or can I just upload it to the header area in Appearance and then tell it to float left?  I will totally go into PHP (through FTP, right?) if I must :).

    #40801

    stefiharr
    Participant
    Post count: 47

    oh wait – I see why I have to change the size…going in now to change it.  :)

    #40802

    AC
    Blocked
    Post count: 7712

    No no no! The header is already in the CSS. All you need to do is go to Appearance –> Editor. Look on the right, click Functions.php. Scroll down and you will see the Header code and the height and width. Change the two number to your logo’s height and width and save it.

    Then, go to Appearance –> Header. Upload your logo and save it. That’s it. It will already be on the left.

    • This reply was modified 1 year, 5 months ago by  AC.
    • This reply was modified 1 year, 5 months ago by  AC.
    #40810

    stefiharr
    Participant
    Post count: 47

    Thank you soooo much for your help anitac!  I have everything where I want it for now…but the header image isn’t resizing when I shrink the screen.  Isn’t it supposed to?

    #40817

    AC
    Blocked
    Post count: 7712

    Ok, now we’re cookin’! Install this plugin – http://designsbynickthegeek.com/plugins/genesis-responsive-header and activate it. You will need to resize your logo down to 4 different widths and then upload them into this plugin. The header will stay the same for desktop computer, but resize when it hits a mobile device. The plugin really works.

    #40820

    stefiharr
    Participant
    Post count: 47

    Oh WOW!  OK – I will totally do that!  I’m going to make sure the client (this isn’t my site :)) even likes the direction the site is going in…then I’ll install the plugin and upload the different sizes.  Thank you TONS!!  YOU ROCK!

     

    By the way, I am worried that if I push the banner and icons on the right side of the header up at all (b/c I moved them down to line up with the bottom of the logo), that they won’t fall below the logo when resizing.  Do I need to do something else with that stuff on the right to make sure it all stays intact and doesn’t go behind the logo again?  (PS – I’m new to Genesis.  I learned about CSS and HTML by learning Thesis…but I don’t want to use Thesis anymore b/c it’s not responsive…and by the way, I am LOVING this support forum…and ALL of your help!!)  :)

    #40822

    AC
    Blocked
    Post count: 7712

    You’re welcome. Glad I could help you. For the header-right widget – check to see if it’s in the CSS under the Media Queries or Responsive CSS area – if it is then don’t worry about it. If you look and nothing is there, you can add it down there with how you want it.

    #41095

    stefiharr
    Participant
    Post count: 47

    anitac, I’m about to work on the responsive header plugin.  Quick question though…if I add the coding for the right-header widget UNDER the responsive CSS, won’t it mess up the responsive-ness?  Isn’t it true that anything under it can mess it up?

    Thanks!!

    PS – I looked at your website.  Is Buster a Bichon?  He’s one cute baby – that’s for sure!!

    #41096

    AC
    Blocked
    Post count: 7712

    No that doesn’t effect the plugin at all. The plugin dictates the size but doesn’t change the position of either one of them. Thanks for the compliment on Buster, he’s Bichon and Poodle.

    #41097

    stefiharr
    Participant
    Post count: 47

    How wonderful – a Bichapoo!  Precious!  I have 3 Shih Tzus!

    I want to clarify/re-word my question:

     

    I have two things going on in my header:

    (1) a logo, which is on the left

    (2) 3 images, which are on the right (a ribbon and two social media icons)

     

    The above are not all part of one header image.  So, in order to make the responsive header work, am I going to need to resize all of those items (the logo, ribbon, and two icons)?

     

     

    #41099

    AC
    Blocked
    Post count: 7712

    No, only the logo on the left. Just resize it.

    #41100

    stefiharr
    Participant
    Post count: 47

    ok, whew! Thank you!  :)

Viewing 15 posts - 16 through 30 (of 32 total)

You must be logged in to reply to this topic.