[Resolved] Not able to get site header configured and doesn't format for mobile/tablet

Home Forums Support Not able to get site header configured and doesn't format for mobile/tablet

  • This topic has 25 replies, 3 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1008369
    Donald

    On my existing site (trophybonesoutfitters.com for reference) I have a much deeper header and I’m able to place the site logo, header title and header tagline where I want them. (using a different theme) Also my existing site logo and site header re-formats so they display for different size screens on the existing site. Is it possible to maintain the same look with the GenerateTheme or use a template in the site library. I am redesigning on a staging site before I move to a new hosting company (SiteGround) and don’t mind starting from scratch.(for example the Catalyst by Mike Oliver).

    FYI: the URL below is my staging site where I’m configuring the GenerateTheme theme.

    #1008537
    David
    Staff
    Customer Support

    Hi there,

    the easiest way would be to create a Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    Here’s some examples of them:

    https://docs.generatepress.com/article/page-hero-examples/#example-2

    This means your Site Header in the Customizer would just contain the logo and the navigation. The image and the text would come from the Header Element.

    Let me know if you need more info.

    #1008742
    Donald

    David really appreciate the help.
    The Header Image came out great! Now if I can get the logo to appear in the top left corner and the site Title and Tagline on the bottom of the header I’d be golden.

    Thanks again!!

    #1008809
    Leo
    Staff
    Customer Support

    Just to confirm, you want the logo to move up (red arrow) and the site title and tagline at the bottom of the header (green arrow) like this?
    https://www.screencast.com/t/JQ9vdGYmSs

    What about the navigation?

    #1008897
    Donald

    Whoops, meant to respond here rather than just reply.
    Yes, that is correct. I have managed to get the site logo up to the position it needs to be, but if I unhide the site title and the tagline it makes a mess of it. So, just to be clear I would like the logo positioned where it is, but have the site title and tagline at the base of the header, but visible of course on the page. The other issue I have yet to master is auto reformatting of the page for various scree sizes.

    Thanks Leo!!

    #1008902
    Donald

    Sorry Leo,
    The navigation is fine. I like it at the top.

    #1009025
    Leo
    Staff
    Customer Support

    How are you adding the site title currently?

    Can you add them as the page hero content?

    Then we should be able to align them to the bottom with some CSS.

    Let me know 🙂

    #1009031
    Donald

    Hi Leo,
    I’ve tried several things, but currently I did the header image with a hero element. (I think its called). Then I started working on a hook element and I have something close, but the site title and the tagline are miles apart. I think I can work on the font once I get those two lined up. Fro reference you can take a look at my production site (trophybonesoutfitters.com) which is what would be nice to end up with. My staging site is 4jg.b78.myftpupload.com which has the new GeneratePress template. I really appreciate your time assistance on this. I’m a retired network engineer and know very little about webmastering. Just trying to get by on a shoestring budget.
    This is the code I’ve come up with in the hook element. I would like to get the top line down just over the bottom line of text. As in the prod site.

    <p style=”font-family: times, serif;
    font-size:60pt;
    color:White”>Eastern Kentucky Hunting Outfitter</p><p style=”font-family: times, serif;
    font-size:48pt;
    color:white”>Whitetail Deer, Turkey and Coyote Hunts</p>

    #1009034
    Donald

    BTW: I’ve been trying to leave a 5 star review, but it takes me to the wordpress site and I search around for the review section, but haven’t come across it. I know I’m next to helpless.

    #1009064
    Leo
    Staff
    Customer Support

    Instead of using hooks element, can you add this as the page hero content for the home page page hero?

    <h1 class="main-title" itemprop="headline">Eastern Kentucky Hunting Outfitter</h1>
    <p class="site-description" itemprop="description">Whitetail Deer, Turkey and Coyote Hunts</p>

    Then set the horizontal alignment to center:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content

    Let me know when this is done. We should be close to replicate your previous home page 🙂

    #1009070
    Donald

    Okay so, I pasted the code in the the Hero Page element then went to the customizer > Layout > Header Alignment and changed it Centered. That changed things around a bit.

    #1009071
    Donald

    Okay, I got ya now. Went back and changed the customizer, went to the element and changed horizontal alignment to center. looks better.

    #1009072
    Leo
    Staff
    Customer Support

    Yup we are getting there.

    Now just increase the top padding of that page hero and the site title and tagline should move down:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-5-position-the-content
    https://docs.generatepress.com/article/header-element-overview/#padding

    Let me know 🙂

    #1009073
    Donald

    Great!! You made this easy. I was working at it way to hard. One more question. How do I change the font size of the text? Oh and I lied. How do we get the pages to auto format for various screen sizes?

    #1009074
    Donald

    Okay, the text is to some degree. The logo not so much. Wish I could get it to display a little bigger on tablet and cells.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.