[Resolved] Spacing Issues | Adjusting Height for Logo

[Kristin]

Hello. I have a few issues that I need help on:
1) How do I reduce the amount of space on the home page above the logo at the top of the hero image? I’d like the logo and headline to be higher up on the page.

2) On the interior pages (Contact Us & Open Positions), how do I reduce the amount of white space above the header background image so that it matches the amount of white space above the background/hero image on the home page?

3) I need to add the logo via the Appearance section of WP, but the logo dimensions don’t work well in the tiny amount of allotted space (350 px x 70 px). The logo is too tall. Is there a way to adjust the CSS or other coding to make the allotted space taller?

Thanks,
Angi

[Leo]

Hi there,

1. Try reducing the top padding:
https://docs.generatepress.com/article/header-element-overview/#page-hero

You also have it set to merged and I don’t think that’s what you want.

2. I believe the page builder container option is what you need:
https://docs.generatepress.com/article/page-builder-container/
https://docs.generatepress.com/article/layout-element-overview/#container

3. Not quite sure what you mean. Where are you adding the logo? Can you add it so I can see the issue?

Let me know 🙂

[Kristin]

Hi Leo,

I was able to solve the first two issues with your links. Thank you.

I tried playing with the site settings for the 3rd issue, and I’m getting nowhere. I want the logo to display at the top of every page after you leave the home page. I’ve added it in Customize > Layout > Header and (I think) set the header to appear at the same time as the navigation menu on these pages /job/staff-accountant/, /open-positions/ and /contact-us/.

I can see the logo on the mobile version but not the desktop version, AND the menu disappeared from the home page (desktop version). I do have the page set to disable the header (but not the menu).

—
In the course of dealing with the above, I noticed severe spacing issues on the mobile version. I’m posting them here but please advise if I should start a new thread:
* Home Page – The alignment of the top call to action buttons is all wonky. They don’t just stack on top of each other like I’d expect.
* When you go to Contact Us or Open Positions pages, the headlines and call to action buttons do not auto adjust in size, they’re shifted way to the right and there’s a huge space between the bottom of of the header and the copy or information below that.

Surely I don’t have to manually adjust every item on these pages for responsive?

Thanks,
Angi

[Kristin]

Follow Up: I figured out the alignment issue on the home page call to action buttons.

[Leo]

I’m still not seeing a logo added inside of the header.

Can you add it in so I can actually see the issue?
https://docs.generatepress.com/article/adding-header-logo/

You might be interested in this well:
https://docs.generatepress.com/article/navigation-as-a-header/

[Kristin]

Leo,

As I mentioned in my message last week, I HAD added the logo via Customize > Layout > Header. It was only displaying when I looked at the site on mobile.

Now, I’ve added it per the instructions you sent: Customize > Layout > Primary Navigation. It’s still not showing up on any of the pages.

Thanks,
Angi

[David]

Hi there,

can you check the settings where you added the logo and make sure that logo location is set to Static ( or Sticky and Static if you want to use the sticky navigation )

[Kristin]

Hi David,

Ok, that worked. Now that I can see the logo, I’m back to my original two issues:

1) I don’t want the logo to appear on the home page because I built it into the hero image. (I’ve previously tried to use the secondary menu on one page and the primary menu on the other pages, and I ended up with a home page with no menu.)

2) When it appears in the header it’s TINY and illegible. I can adjust the HEIGHT in Menu Item Width in Appearance > Layout > Primary Navigation, but I cannot adjust the height. Is there adjust the code/html to allow the logo to display more legibly?

Thanks,
Angi

[Tom]

You can hide it on the homepage with this CSS:

.home .navigation-logo {
    display: none;
}

If you increase the height of the menu items, the navigation logo will increase in height. Otherwise, you can use CSS:

.main-navigation .navigation-logo img {
    height: 100px;
    width: auto;
}

.site-logo.navigation-logo {
    max-width: none;
    width: auto;
}

[Kristin]

HI Tom,

That’s exactly what I needed.

Thank you!
Angi

[Tom]

You’re welcome 🙂

[Author]

Posts