Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Right Area
- This topic has 31 replies, 2 voices, and was last updated 10 years, 11 months ago by Anita.
-
AuthorPosts
-
May 8, 2013 at 8:35 pm #40013StefaniMember
Hello! I'm using the Going Green theme on the following site: www.thegratefulbread.com/newsite.
I have a ribbon and two social media icons that I put into the "`genesis_header` Hook". I have everything lined up how I want it, but when I change my screen size to make sure it's still responsive, the ribbon and social media icons go behind my header image instead of below them.
I tried putting the ribbon and icons in the Header Right widget, but they do not show up (or they're there and hidden). Also, I do not see a "genesis_header_right" as shown in the visual guide (http://genesistutorials.com/visual-hook-guide/). So, I had to put them in the `genesis_header` Hook. Is there another/better way to float that stuff on the right? I need to make sure it stays responsive.
THANK YOU!
May 8, 2013 at 9:16 pm #40022AnitaKeymasterIt would be better to place them in the header and then provide a link to the url so we can see what you have.
Love coffee, chocolate and my Bella!
May 8, 2013 at 9:24 pm #40024StefaniMemberYou mean in the header hook?
I have a logo on the left and want the ribbon and icons on the right. Shouldn't they all go in the header hook?
May 13, 2013 at 5:49 pm #40748StefaniMemberHi there,
I'm wondering if someone could help me with this issue (above). I still need some more info. on how to NOT have the stuff on the right side of the header appear behind the logo (which is on the left). Right now, I have the logo in the "header" hook, then I also have those other elements in the "header" hook. Do I need to do something with floating them or is there something else I need to do? I tried putting the code for the stuff on the right in the "header right" widget, but nothing was showing up?!?
Thank you!
May 13, 2013 at 6:21 pm #40755AnitaKeymasterPlease provide a link to your website so we can assist you.
Love coffee, chocolate and my Bella!
May 13, 2013 at 6:22 pm #40756StefaniMemberMay 13, 2013 at 6:28 pm #40760AnitaKeymasterDid you add those using the Genesis Simple Hooks? You could have placed them in the Header Right Widget area which would make them fall under the logo.
Love coffee, chocolate and my Bella!
May 13, 2013 at 6:33 pm #40761StefaniMemberI tried to do that, but they didn't show up at all. I'll try again. Be back soon. 🙂
May 13, 2013 at 6:36 pm #40764StefaniMemberOK, they are showing up...but still going behind the logo when I move the screen to the left. How can I get them to fall below the logo?
May 13, 2013 at 7:01 pm #40770AnitaKeymasterLeave the code there. Let me check the code out.
Love coffee, chocolate and my Bella!
May 13, 2013 at 7:06 pm #40773StefaniMemberI'm not going to move it - promise :):) THANK YOU!
May 13, 2013 at 7:06 pm #40774AnitaKeymasterWhere is that code placed? It's not in the Header Right Widget - the actual widget area located in the Widget in the Dashboard. The CSS for that area is:
#header .widget-area { float: right; width: 640px; }
However, those two items are not in it.
Love coffee, chocolate and my Bella!
May 13, 2013 at 7:13 pm #40777StefaniMemberI put it in the Header Right Widget under Appearance-->Widgets-->Header Right. Then, I put a TEXT box under Header Right and pasted the code in there. Is that not correct?
May 13, 2013 at 7:15 pm #40778AnitaKeymasterI am trying to figure out why I cannot see the code. Give me another minute.
Love coffee, chocolate and my Bella!
May 13, 2013 at 7:16 pm #40779StefaniMemberok, no prob 🙂
May 13, 2013 at 7:21 pm #40780AnitaKeymasterYou 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.
Love coffee, chocolate and my Bella!
May 13, 2013 at 7:43 pm #40790StefaniMemberIn 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).
May 13, 2013 at 7:50 pm #40798AnitaKeymasterThat'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.
Love coffee, chocolate and my Bella!
May 13, 2013 at 7:55 pm #40799StefaniMemberAhhh! 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 :).
May 13, 2013 at 8:01 pm #40801StefaniMemberoh wait - I see why I have to change the size...going in now to change it. 🙂
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.