Community Forums › Forums › Archived Forums › Design Tips and Tricks › Metro Pro theme Header help
- This topic has 11 replies, 2 voices, and was last updated 9 years ago by Joy G.
-
AuthorPosts
-
March 28, 2015 at 1:31 pm #145953mcnaterMember
I'm looking to close the space between the header on my site and the main menu. I tried following an online guide and for some reason I can't get the changes to stick.
Could anyone help me out?
Thanks,
http://www.kyanclassic.com
NateMarch 28, 2015 at 2:57 pm #145959Joy GMemberI use Metro and I reduced the padding at these locations, which I think might help... (the first one refers to the search box in header right, I am not sure what your equivalent is.)
input, select, textarea { background-color: #f5f5f5; border: 1px solid #ddd; box-shadow: 0 0 5px #ddd inset; color: #999; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; padding: 6px; /* was 16px*/ width: 100%; } .site-inner { clear: both; padding-top: 0px; /*was 32px;*/ } .site-title a, .site-title a:hover { background-color: #f96e5b; color: #fff; display: inline-block; padding: 10px; /*was 16px*/ text-decoration: none; }
I hope this helps...
March 28, 2015 at 9:14 pm #145982mcnaterMemberThanks for the response, but I still can't quite get it to stick.
I first followed the instructions I found on this link, so I'm not sure if that is messing it up somehow.
I just don't get why it's not moving. I know its not a caching issue as I have that stuff turned off.
I must be missing something else.
March 28, 2015 at 10:45 pm #145983mcnaterMemberWhen I do 'Hide Image' and just have text it looks fine and the "logo" box is bigger. But as soon as I choose an image, it seems cropped. Just not sure.
March 29, 2015 at 2:57 pm #146026Joy GMemberI was looking at it in Firebug, and it seems to me that the wording of 'a day of golf...' and the logo on the right are one image, which maybe are not taking up the full widget space, so there is some left below that, and then there seems to be some other spacing below the widget area. Also, below your main logo there is some space, which may not be necessary because the wording 'a day of golf...' has quite a bit of padding round it,
I found the following piece of code related to the wording / logo nearest the menu so maybe if you could reduce the bottom margin that might help...
.widget { margin-bottom: 32px; word-wrap: break-word; }
March 29, 2015 at 3:42 pm #146027mcnaterMemberThank you so much! Reducing that margin-bottom indeed did shrink the gap. I appreciate your help very much.
One other thing if you don't mind, I changed the logo from 270 x 80 to 300 x 120 but for some reason it's still cropping it when I try and upload a logo of the new size. If I leave the header logo on the left as "TEXT", the words KYAN CLASSIC appear fine in a 300 x 120 box, but any logo still is shrunk to 270 x 80. I followed the steps in that previous guide, but I'm wondering if there is something else there?
I can't thank you enough for your help.
March 29, 2015 at 5:09 pm #146032Joy GMemberIn my metro theme, I made an alteration in the functions.php file as below. Did you change yours according to the link you mentioned so the 270 is 300 and the 80 is 120 like you want? I put the //* in with my notes because that hides my notes but keeps them for me to see what I did. I don't know it it is advisable to do that, but it has helped em as I learn and wanto to undo things.
//* Add support for custom header add_theme_support( 'custom-header', array( 'width' => 680, //* was 270, 'height' => 120, //*was 80, 'header-selector' => '.site-title a', 'header-text' => false ) );
If you have not already altered your functions php file be really, really careful, as one mistake can make your website go blank. You would need a 'ftp client' like 'Filezilla' set up so that you can fix any mistakes by going in there and editing the code there to get your site back to how it was. Anyhow, this is the exact code that is working on my site so it ought to be okay fro you to just change the values. (don't add it, just amend what is already there).
If you have 'Firebug' you can right click and see different thigns in the screen. it shows your title is still 270x80. You have 920px across the width of the menu and 544px with the wording 'a day of golf...' and the left hand logo, so that gives 416px left . if your title is to be 300px then I guess that gives you 116px spare in between.
I changed the css of my header-right section to be :
.site-header .widget-area { float: right; width: 200px; /*was 644*/ }
So maybe after checking your functions php you could check what the above width in your css is. It should be something between 544 and 660 given the sizes you have... I would probably go for something in the middle... Anyhow, I don't think you need to do this, bit, only check your functions.php...
March 29, 2015 at 10:45 pm #146052mcnaterMemberAgain, thanks for the help. Yes, my functions file is set to 300 x 120 like the article mentions.
Here is what my widget shows too:
/* Widget Area
--------------------------------------------- */.site-header .widget-area {
float: right;
width: 664px;
}I'll play around with that size now to see what happens.
March 29, 2015 at 10:48 pm #146053mcnaterMemberP.S. Here's what it looks like when I try and put a 300x120 sized logo into the image:
https://docs.google.com/file/d/0BySf0XxcDgnrakpCRFZTZi1TajA/edit?usp=drivesdk
It cuts it off.
March 30, 2015 at 7:14 am #146091Joy GMemberDo you have something like this piece of code, and what width do you have?
.title-area { background: url("http://my logo etc") no-repeat scroll left top rgba(0, 0, 0, 0); float: left; padding-left: 0; width: 680px; /*was 340*/ }
March 30, 2015 at 9:56 am #146119mcnaterMemberThis is what is in that section:
/* Title Area
--------------------------------------------- */.title-area {
float: left;
padding: 0;
width: 300px;
}.site-title {
font-family: 'Oswald', sans-serif;
font-size: 48px;
line-height: 1;
margin: 0 0 0;
text-transform: uppercase;
}.site-title a,
.site-title a:hover {
background-color: #f96e5b;
color: #fff;
display: inline-block;
padding: 16px;
text-decoration: none;
}.site-description {
display: block;
height: 0;
margin-bottom: 0;
text-indent: -9999px;
}March 30, 2015 at 11:01 am #146132Joy GMemberIt seems to me that you have some code showing up in Firebug like this:
.header-image .site-title a { }
which seems to be empty. On someone else's metro site they have:
.header-image .site-title a { float: left; min-height: 100px; min-width: 500px; width: 100%; .header-image .site-title a { max-width: 500px; min-height: 80px; padding: 0; }
Maybe it would be worth seeing how those compare to what you have and experimenting with the width values to see what they affect. Your title-area seems wide enough at 300px. I sometimes try to make it a bit wider and let the image stay at 300px incase that has more room for error.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.