Community Forums › Forums › Archived Forums › General Discussion › Executive change logo size
Tagged: Executive change logo size
- This topic has 7 replies, 2 voices, and was last updated 10 years, 5 months ago by Tim Squires.
-
AuthorPosts
-
October 20, 2013 at 2:33 am #67772Tim SquiresMember
Hello, I need to change the size of my logo in the Executive theme. The size of the logo on the Executive site below is just about perfect (although the background color is very different) and I need to achieve the same result if possible:
The site that I am working on is here:
Many thanks 🙂
http://timsquires.com.au/executiveOctober 20, 2013 at 2:35 am #67774Tim SquiresMemberOctober 20, 2013 at 2:37 am #67776Tim SquiresMemberApologies again, the link posting function doesn't seem to be working. To see the example please navigate to
October 20, 2013 at 2:48 am #67777jhguynnMemberTim:
I think you need to edit the following code in your functions.php file:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 260,
'height' => 100,
'header-selector' => '.site-title a',
'header-text' => false
) );Change the width and height to whatever suits you, then you can make a logo to fit.
October 20, 2013 at 4:01 am #67783Tim SquiresMemberThanks! That's great. I also changed the values in the CSS to match the new values in functions.php
.header-image .title-area, .header-image .site-title, .header-image .site-title a { float: left; margin: 0; max-width: 410px; /*--changed from 260px to match new value in functions.php allowing new logo size--*/ min-height: 158px; /*--changed from 100px to match new value in functions.php allowing new logo size--*/ padding: 0; width: 100%; }
It look much better - only problem now is that the nav bar has been pushed down and out of alignment. Any idea of how to fix that? Thanks so much for your help so far.
Tim
October 20, 2013 at 7:29 am #67802jhguynnMemberTim:
This would involve making similar changes to some combination of code / css for navigation. You were savvy enough to catch the necessary css for the logo change, so give it a go. I recommend you use Firefox browser with the firebug plugin as a tool for identifying the css classes that need your attention. A youtube video would suffice to show you how to use firebug (if you don't already know).
Sorry to 'hit and run', but I'm out the door with my 2 year old for some fall outdoor activities, and don't have the time to dig around myself. Perhaps someone else will chime in. Good luck!
October 20, 2013 at 12:31 pm #67865Tim SquiresMemberNo problem at all - I really appreciate your help and suggestions. I'll persevere with Firebug and crack that code 🙂 Thanks again!
October 20, 2013 at 4:10 pm #67902Tim SquiresMemberUpdate: I have managed to position the nav bar where required and it displays well on my Mac. But there are issues when viewed on my iPhone - the logo won't resize properly and part of it is cut off, and there is an excessive gap between the logo and the mobile nav bar, which I think has been caused by the extra margin that I added for the desktop version display. Here is the CSS:
/* Widget Area --------------------------------------------- */ .site-header .widget-area { float: right; width: 60%; /--changed from 820px--*/ } .site-header .widget { padding: 28px 0 0; padding: 2.8rem 0 0; margin-top: 3rem; /*--added in--*/ }
Grateful for any suggestions - as always 🙂
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.