• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Beautiful Pro — Adjusting Title Logo Size and Header Menu

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Beautiful Pro — Adjusting Title Logo Size and Header Menu

This topic is: not resolved

Tagged: beautiful pro, navigation, title logo

  • This topic has 10 replies, 3 voices, and was last updated 9 years, 1 month ago by agentv.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • January 12, 2014 at 1:29 pm #84796
    Alle McCloskey
    Member

    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?
    So frustrated.

    http://www.brookemcglothlin.com/demo
    January 12, 2014 at 3:04 pm #84819
    Alle McCloskey
    Member

    Anyone? I'm really stuck here.

    January 12, 2014 at 8:24 pm #84884
    Alle McCloskey
    Member

    Any gurus out there able to help me out?

    January 12, 2014 at 9:11 pm #84894
    Alle McCloskey
    Member

    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?

    January 13, 2014 at 8:44 am #84958
    Susan Nelson
    Participant

    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? 🙂

    January 13, 2014 at 4:28 pm #85063
    Alle 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 #85064
    Alle McCloskey
    Member

    Oops — Meant to tag @SusanNelson

    January 13, 2014 at 5:29 pm #85084
    Susan Nelson
    Participant

    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!

    January 14, 2014 at 12:13 am #85108
    Alle McCloskey
    Member

    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
    }

    January 14, 2014 at 3:59 pm #85217
    Susan Nelson
    Participant

    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.

    May 9, 2014 at 4:14 pm #104343
    agentv
    Member

    Hey ladies,

    I've followed these instructions to resize the header image but it's ignoring me and still squishing the logo:

    http://insideoutwithjane.com

    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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble