• 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

Lifestyle Pro – Header Issues

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 › Lifestyle Pro – Header Issues

This topic is: resolved

Tagged: header, lifestyle Pro

  • This topic has 20 replies, 5 voices, and was last updated 8 years, 11 months ago by Elaine Griffin.
Viewing 20 posts - 1 through 20 (of 21 total)
1 2 →
  • Author
    Posts
  • February 1, 2014 at 12:44 pm #88024
    littleleafash
    Member

    Hi there!

    So I made a full-width header here: http://www.readingandchickens.com/

    And when I resize the browser or view on a mobile device, the header width adjusts to the window size, but it cuts off when it's between the widths of ~ 1120px-752px. Above that and below that, it looks great!

    Should I load a resized header for those sizes? I can't figure out what is making the header resize correctly below 752px - because ideally it would just resize fluidly! I've tried a few things with media queries, but can't seem to crack it.

    Thanks!

    http://www.readingandchickens.com/
    February 1, 2014 at 1:13 pm #88028
    Brian Wawryshyn
    Member

    I am having the same issue with my site using the news pro theme. The image gets cut off on tablets (768) and Ipads (1024), and is really small on smaller devices.

    http://bclionsden.ca/

    February 1, 2014 at 4:26 pm #88062
    Brian Wawryshyn
    Member

    I found this tutorial, about how to solve the image clipping. It seems to work, but I have some css issues to workout because I get a space between the header image and the nav menu at 1048.

    Hope it helps you: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

    February 4, 2014 at 8:22 pm #88653
    littleleafash
    Member

    Thanks for the link - glad it helped you! Unfortunately, it didn't do anything except make the header completely gone for me (see test site: http://www.ashleycadaret.com/test/)

    Hmm. I feel like this is a simple answer that someone should know!

    February 5, 2014 at 9:18 am #88762
    John
    Participant

    Hey Brian, thanks for the mention!

    littleleafash,

    Your logo image is there, it's just hidden by the StudioPress CSS. If you remove or comment out line 888,

    
    .header-image .site-description, .header-image .site-title a
    

    and line 894,

    
    .header-full-width.header-image .site-title a
    

    you'll see your logo and then you can finish dialing it in with CSS. For example, removing any min-height declarations in the header area elements is a good idea.

    You'll probably also want to remove your site description, which I explain how to do in that tutorial that Brian mentioned.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 5, 2014 at 2:57 pm #88826
    littleleafash
    Member

    Ahh! You saved the day!!

    Thank you SO much. 🙂

    February 6, 2014 at 12:14 pm #88974
    John
    Participant

    You're welcome!


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 6, 2014 at 12:44 pm #88981
    Rita
    Member

    So I'm trying to get this work on my test site. I can't seem to get the logo to left align. It's just stuck in the middle no matter what I do.

    February 6, 2014 at 7:05 pm #89044
    John
    Participant

    YippyMomma,

    Without a URL to your site there's no way for us to know what's wrong.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 11, 2014 at 3:39 pm #89866
    Rita
    Member

    Was able to figure it out.

    February 23, 2014 at 5:02 am #92000
    Rita
    Member

    Ok. So the left alignment is good, but noticed the vertical alignment is top now instead of center. http://75.103.92.60/wp/

    February 25, 2014 at 12:09 pm #92325
    Elaine Griffin
    Member

    This is a great start for me - thank you! Unfortunately I'm having a hard time getting the header image on my site to be full-width. Instead it is just in the top corner.
    http://www.thelitkitchen.com
    Thanks!

    February 26, 2014 at 8:31 am #92468
    Elaine Griffin
    Member

    I just wanted to put a little FYI that I changed back to the original non-mobilized theme, so my client's site could look good on the computer. If anyone wants to help me out with this, I will switch back to the mobile version!
    Thanks a bunch!
    Elaine

    February 26, 2014 at 5:21 pm #92571
    John
    Participant

    Elaine,

    I noticed that you had switched the logo/header back. If you want to switch back to the mobile version I'll (try to) take a look at it today still.

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 27, 2014 at 3:26 pm #92734
    Elaine Griffin
    Member

    Thank you so much John!
    I was out last night but will be available tonight if you have time. Just let me know and I will activate!
    Thanks again!
    Elaine

    February 27, 2014 at 5:35 pm #92755
    John
    Participant

    You're welcome! Ready when you are...

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 27, 2014 at 6:27 pm #92761
    Elaine Griffin
    Member

    Great, thank you! Sorry it took me so long. It's all set!

    February 27, 2014 at 7:19 pm #92763
    John
    Participant

    Elaine, try this modified stylesheet: https://db.tt/RRTYjgTp

    I commented out what didn't need to be there related to the header and logo image, added one or two things, but didn't delete anything so you can see what I did.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    February 28, 2014 at 3:10 am #92788
    Elaine Griffin
    Member

    Worked like a charm! THANK YOU!! 🙂

    February 28, 2014 at 9:01 am #92821
    John
    Participant

    You're welcome!

    As a last tweak, it looks like I forgot to comment out line 1887,

    
    .site-header {
    		padding: 24px;
    		padding: 2.4rem;
    	}
    

    which will remove the extra padding around the header image on smaller screens/devices.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 21 total)
1 2 →
  • The topic ‘Lifestyle Pro – Header Issues’ is closed to new 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