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 13, 2013 at 8:02 pm #40802AnitaKeymaster
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.
Love coffee, chocolate and my Bella!
May 13, 2013 at 9:10 pm #40810StefaniMemberThank 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?
May 13, 2013 at 9:42 pm #40817AnitaKeymasterOk, 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.
Love coffee, chocolate and my Bella!
May 13, 2013 at 9:52 pm #40820StefaniMemberOh 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!!) 🙂
May 13, 2013 at 10:00 pm #40822AnitaKeymasterYou'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.
Love coffee, chocolate and my Bella!
May 15, 2013 at 6:40 pm #41095StefaniMemberanitac, 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!!
May 15, 2013 at 7:06 pm #41096AnitaKeymasterNo 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.
Love coffee, chocolate and my Bella!
May 15, 2013 at 7:13 pm #41097StefaniMemberHow 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)?
May 15, 2013 at 7:15 pm #41099AnitaKeymasterNo, only the logo on the left. Just resize it.
Love coffee, chocolate and my Bella!
May 15, 2013 at 7:17 pm #41100StefaniMemberok, whew! Thank you! 🙂
May 25, 2013 at 3:12 pm #42633StefaniMemberHi anitac,
I uploaded the four sizes to the responsive header plugin. The smallest one surely does seem small...but if that's the way it's supposed to be, then no prob!
Now the issue is with that stuff on the right. When I had it lining up with the bottom of the logo on the left, it had to have a big margin-top. That meant that when the device is smaller, the stuff on the right falls below the logo (good!) but with a big space between the logo and the stuff that falls below it.
Is there a way to have it all "float" to the bottom of the widget area without having to specify that huge top margin?
Thank you!!! (www.thegratefulbread.com/newsite)
May 25, 2013 at 4:19 pm #42636AnitaKeymasterYou know responsive is different for each website because the responsive settings will need to be changed for each website based on the header, logo, and other things in there. I can really give any other assistance without looking at and having a change to modify and play with the code. I can do this for you as a freelance service if you want. If you are interested, send me an email on my website. I can use a responsive tool to try to get it worked out for you. You can see you site using this - http://studiopress.com/responsive.
Love coffee, chocolate and my Bella!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.