Hydrogen header issue.

[echopulse]

I just made a new website using the Gantry 5 Hydrogen template. It's really nice, but I'm having two small issues. When I include my header banner in the header particle, it creates a margin around the header, about half an inch. I would like the header to completely fill the space.

Here is the site, www.abilenetechguy.com

The second issue is the height of the navbar, and the height of the navbar buttons are not the same. I have tried adding custom CSS to fix it, but it's not working.

#g-navigation {
height: 45px;
}

.g-main-nav {
height: 45px;
overflow:hidden;
}

.g-main-nav .g-toplevel>li>.g-menu-item-container {
padding: .30rem 0.938rem;
}

Thanks!

[Pavel-ww]

Hi. Delete all your changes to lead to the original form (including all you have added to custom_13.css).

Then use the following code

Code: Select all

#g-header .g-content {
	margin: 0;
	padding: 0;
}

This appearance will be after doing this.

1.jpg

[echopulse]

I didn't make any changes to custom_13.css, but I had someone help me fix the navbar, so he might have done it. So, is there a way I can find out what was originally there so I can compare it?

Thanks

[echopulse]

I just took out the media queries that change things on different size screens, and added that code you wrote. That seemed to fix it, at least in Chrome, but there is a small problem with the height of the navbar in Edge. Thankfully edge is not used by many people. Would be cool if I could fix it though.

[JTema]

I see no difference of navbar height with edge and chrome both seem same.

[echopulse]

You using the new edge? Also, you won't see the height difference until you hover over one of the links on the nav bar. It's the highlighted part that's different.

[JTema]

When inspected with browser dev tools it seems that changing padding 0.30 to 0.25 below on line 31 custom_13.css resolves hover padding issue.
.g-main-nav .g-toplevel > li > .g-menu-item-container {
padding: 0.25rem 0.938rem;
}