• 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 Theme – Header Nav Position

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 Theme – Header Nav Position

This topic is: not resolved

Tagged: beautiful pro, header image, header menu

  • This topic has 15 replies, 6 voices, and was last updated 9 years, 6 months ago by Alle McCloskey.
Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 20, 2013 at 7:08 pm #74616
    weslinda
    Member

    Good evening. So I rolled out Beautiful Pro on a site that I manage for a local group of Help-Portrait in Baltimore. I added the custom image, and setup the menu in the header. However, the menu position looks out of place. Does anyone know if this is a theme issue? It isn't in the same location as it is on the demo. Does using the custom header image throw things off?


    Loving the Genesis Life!

    http://www.helpportraitbaltimore.org/
    November 20, 2013 at 7:12 pm #74618
    nutsandbolts
    Member

    It looks like your logo image has made the header area quite a bit taller than the demo - you can fix that and center the menu vertically by adding margin-top: 35px; to your stylesheet under .site-header .widget-area.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers β€’ Find me on Twitter and Google+

    November 20, 2013 at 7:19 pm #74621
    Erin Ulrich
    Participant

    (Andrea, I had my answer all ready, then realized you just beat me to it. So I'm just adding mine to what you've already stated. πŸ™‚

    I've experienced the same issue when using a logo image of exactly what the theme calls for (320px x 120px). So it does seem to be a bit of an issue, but at least it's an easy fix with adding the padding.

    On another random note, it's fun to see a Help-Portrait site mentioned here. I do the website for the Allume Conference, and Help-Portrait was a sponsor this year. πŸ™‚


    Erin Ulrich | Genesis Recommended Developer | Design by Insight

    November 20, 2013 at 7:21 pm #74624
    weslinda
    Member

    Thanks for the quick reply. My concern is that I'm following all of the theme's instructions. I'm following the logo size that it recommends to use. I didn't want to introduce my own CSS fix if this is a known issue.

    By adding that, then I need to pay attention to that amount throughout the responsiveness of the theme.

    I was more curious if this was standard results for the theme. If you look at my header side by side with the demo, you'll see the menu on the demo is actually lower than the menu on my site. Thus my question on if there was something missing in the configuration to explain why mine wasn't turning out the way the demo was.

    I'm quite comfortable on the CSS to fix this, I'm more interested in knowing if this is a known issue and how the theme responds when a customer header image is used. If it is, then in my opinion this is something that should be fixed in the root theme. I should not have to insert CSS when I'm following theme instructions.


    Loving the Genesis Life!

    November 20, 2013 at 7:24 pm #74625
    nutsandbolts
    Member

    I would suggest submitting a ticket to the official StudioPress support team. Since the forums are manned by volunteers, we aren't in a position to do much about that, though I definitely see where you're coming from.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers β€’ Find me on Twitter and Google+

    November 20, 2013 at 7:28 pm #74627
    weslinda
    Member

    I have submitted a ticket to support. I asked the question here to see if others had seen the issue or if it was something off on my own configuration. Looks like at least 1 other person has seen this, so I'm curious to hear the response from StudioPress.


    Loving the Genesis Life!

    November 20, 2013 at 7:29 pm #74629
    nutsandbolts
    Member

    If you don't mind, update this thread when you hear back from SP so other users might be able to find this in a forum search. Thanks!


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers β€’ Find me on Twitter and Google+

    November 20, 2013 at 7:32 pm #74631
    weslinda
    Member

    Don't mind at all. I've seen this in other themes as well. It's just a bit frustrating that this hasn't been polished 100%.


    Loving the Genesis Life!

    November 21, 2013 at 11:24 am #74732
    weslinda
    Member

    So in initial conversations, it appears that this is the way they did it. No real reason. Just the way the theme was designed. If you switch to not using a Header Image, then you get drastically more padding/margin built into the header right nav.

    Header Image: https://www.dropbox.com/s/hjxwpnxts0m2i0g/padding-spacing-demo-vs-real.png

    No Header Image: https://www.dropbox.com/s/f3rukcfglkaz9t9/No-Header-Image.png

    In my opinion, if you centered the text to the text, then why wouldn't you center the text with the Header Image? The idea was something else in the designers mind. Doesn't make sense to me as one would think it would line up.


    Loving the Genesis Life!

    December 3, 2013 at 2:00 am #76775
    wendyinoc
    Member

    I have an issue as well with the menu. Mine is going under my Logo or if I leave Text. I really want it to be the right like the picture . Help πŸ™‚
    http://www.cruisebride.com

    December 3, 2013 at 2:37 am #76776
    wendyinoc
    Member

    Cancel solved the problem.

    March 5, 2014 at 2:06 pm #93573
    Brenda
    Member

    O.K. - I"m reading through all of this, but I can't seem to fix my problem. When I uploaded a header, the header is centered with the nav bar below. I want it to look just like the demo but using my own name/header in the top left - where "Beautiful Theme" is.

    March 5, 2014 at 2:07 pm #93575
    nutsandbolts
    Member

    Can you post a link to your site, Brenda? It's always easier to help if we can see what you see.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers β€’ Find me on Twitter and Google+

    March 5, 2014 at 8:14 pm #93610
    Brenda
    Member

    Yes, it's http://www.triplebraidedlife.com

    I had it in maintenance mode, but I'll take it off to show you. Thank you!

    March 5, 2014 at 9:08 pm #93614
    Brenda
    Member

    And I also don't know why I'm seeing a gray bar above the site banner?

    I want to take out that bar and use the entire space above the banner for my logo/header and nav bar.

    Like this: http://www.brookemcglothlin.com/

    March 10, 2014 at 11:55 pm #94230
    Alle McCloskey
    Member

    Hey, Brenda!

    I was searching through the threads for an answer on a different question and in my scrolling saw the http://www.brookemcglothlin.com pop up in your post —Β I'm actually her designer and recently did her rebrand on her site! πŸ™‚ Small world!

    To move your logo to the right side and move your navigation bar to the left side and in line with the logo, simply follow the directions in the Beautiful Pro Theme Setup document...

    "HOW TO CONFIGURE THE NAVIGATION MENUS —Β In the Beautiful Pro theme, the Primary Navigation menu area is not used in the demo. The default navigation area can be disabled by navigating to Appearance > Menus > Manage Locations. Set the Primary navigation to the “Select a Menu” option in the drop down to disable the default Primary Navigation Menu location. The Secondary Navigation area is disabled in the Beautiful Pro theme demo. Be sure to click the “Save Settings” button to preserve your changes.

    The main navigation used in the demo of the Beautiful Pro theme is a custom Menu widget placed in the header right widget area. Navigate to Appearance > Menus and create a new menu. Add your menu items. Navigate to Appearance > Widgets. Choose the Custom menu widget and drag it to Header Right. In the widget settings, choose the navigation menu you created. Be sure to click the “Save” button to preserve your changes."

    That being said, the space is much smaller and you have more menu items than Brooke did, so you could do a couple things to make it fit —Β get rid of your HOME item (most people know to click on the logo/header to navigate back to the homepage now), move things like Disclosure and/or Resources to a sidebar link or even in a footer section. The other option would be to fiddle with the CSS and shrink the font size down a bit!

    Hope that helps!
    Glad you like Brooke's site! πŸ™‚

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 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