Community Forums › Forums › Archived Forums › Design Tips and Tricks › Beautiful Pro — Adjusting Title Logo Size and Header Menu
Tagged: beautiful pro, navigation, title logo
- This topic has 10 replies, 3 voices, and was last updated 10 years, 9 months ago by
agentv.
-
AuthorPosts
-
January 12, 2014 at 1:29 pm #84796
Alle McCloskey
MemberI'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.January 12, 2014 at 3:04 pm #84819Alle McCloskey
MemberAnyone? I'm really stuck here.
January 12, 2014 at 8:24 pm #84884Alle McCloskey
MemberAny gurus out there able to help me out?
January 12, 2014 at 9:11 pm #84894Alle McCloskey
MemberWoo 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?
January 13, 2014 at 8:44 am #84958Susan Nelson
ParticipantHi 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? 🙂
January 13, 2014 at 4:28 pm #85063Alle McCloskey
Member@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.
January 13, 2014 at 4:38 pm #85064Alle McCloskey
MemberOops — Meant to tag @SusanNelson
January 13, 2014 at 5:29 pm #85084Susan Nelson
ParticipantTo 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!
January 14, 2014 at 12:13 am #85108Alle McCloskey
MemberAlright, 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
}January 14, 2014 at 3:59 pm #85217Susan Nelson
ParticipantYou'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.
May 9, 2014 at 4:14 pm #104343agentv
MemberHey 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.