- This topic has 10 replies, 3 voices, and was last updated 9 years, 6 months ago by
.
-
Posts
-
I'm working on a client site and I think sleep deprivation is preventing me from seeing straight!
I need to upload a title logo that is larger than the theme's standard 320x120 and then float the main header on the right side.
What I'm trying to mimic is the logo and menu at http://tshoxenreider.com/
The site I'm working on is http://www.brookemcglothlin.com/demo
Any tips?
http://www.brookemcglothlin.com/demo
So frustrated.Woo hoo — okay, I figured out the header menu!
But, I'm still stuck on how to make that title/logo area larger? (again, like the example at tshoxenreider.com)
Anyone care to chime in here?
Hi there,
Are you using the custom header feature? If so, you'll need to fix it in a couple places.
In functions.php, look around line 28 for this section and change the height and width:
//* Add support for custom header
add_theme_support( 'custom-header', array(
'default-text-color' => '000000',
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 120,
'width' => 320,
) );In style.css, look around line 925 for this section and change the width:
.title-area {
float: left;
padding-top: 10px;
padding-top: 1rem;
width: 320px;
}And then line 965 and change the height:
.header-image .site-title a {
float: left;
min-height: 120px;
width: 100%;
}That should do it but if not, let me know and I'll take another look.
By the way, I love the font you used in that logo. May I ask what it is? 🙂
@Susan — Ah! Thank you, that is exactly what I needed! Any ideas on the coding I need to adjust to make the navigation bar line up correctly to the left of the logo? Again — trying to mimic the layout of tshoxenreider.com and I can't figure out what I'm supposed to wiggle to get them beside each other and centered correctly.
And the font is Bombshell Pro — little expensive, but worth it! The tagline font is NeoRetroDraw.
To make the menu show to the right of the logo, you'll need to start with adjusting the size of the header right widget area.
.site-header .widget-area
But it's still going to be tight. Perhaps you can make the logo a bit smaller or you can adjust the padding on the menu items to make everything fit.
Thanks for the font info. So pretty!
Alright, so I've been working on this site all day! @Susan-Nelson — thank you so much for all your advice! You've definitely pointed me in the right direction. However — what I can't figure out is how to adjust that .site-header .widget-area in a way that retains the responsiveness of the theme. Below is the code I used to make the adjustments for where I want the header (I tried all kinds of variations on this and the padding and this was the only thing that could get it where I wanted it). But upon resizing it, or viewing it on a mobile/tablet platform, I'm seeing that the margin-top I added is pushing those pages further down and they are no longer centered. I'm about to pull my hair out. Any thoughts?
.site-header .widget-area {
float: right;
text-align: right;
width: 600px;
margin-top: 140px
}You'll probably need to remove the floats from the logo area and widget area in the responsive section of the css. You'll also need to add auto margins to the left/right sides. And in the responsive section, you'll have to redeclare the top margin of the widget area so it's not so spaced out.
Hey ladies,
I've followed these instructions to resize the header image but it's ignoring me and still squishing the logo:
Wondering if there's another step other than this that I've missed:
In functions.php, look around line 28 for this section and change the height and width:
//* Add support for custom header
add_theme_support( ‘custom-header’, array(
‘default-text-color’ => ’000000′,
‘header-selector’ => ‘.site-title a’,
‘header-text’ => false,
‘height’ => 120,
‘width’ => 320,
) );In style.css, look around line 925 for this section and change the width:
.title-area {
float: left;
padding-top: 10px;
padding-top: 1rem;
width: 320px;
}And then line 965 and change the height:
.header-image .site-title a {
float: left;
min-height: 120px;
width: 100%;
}Thanks in advance 🙂
V
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.