Hydrogen header issue.

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
echopulse
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Fri Mar 13, 2009 7:51 pm

Hydrogen header issue.

Post by echopulse » Fri Jun 18, 2021 12:51 pm

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!

User avatar
Pavel-ww
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 219
Joined: Tue Jun 30, 2020 12:17 pm

Re: Hydrogen header issue.

Post by Pavel-ww » Sun Jun 20, 2021 11:30 am

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
You do not have the required permissions to view the files attached to this post.

echopulse
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Fri Mar 13, 2009 7:51 pm

Re: Hydrogen header issue.

Post by echopulse » Mon Jun 21, 2021 2:59 pm

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
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Fri Mar 13, 2009 7:51 pm

Re: Hydrogen header issue.

Post by echopulse » Mon Jun 21, 2021 4:01 pm

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.

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 660
Joined: Sun Apr 13, 2008 8:10 pm

Re: Hydrogen header issue.

Post by JTema » Tue Jun 22, 2021 2:03 pm

I see no difference of navbar height with edge and chrome both seem same.
http://www.joomlatema.net - Joomla Extensions and Templates
https://andalusa.joomlatema.net - Andalusa Professional Responsive Joomla Template

echopulse
Joomla! Apprentice
Joomla! Apprentice
Posts: 31
Joined: Fri Mar 13, 2009 7:51 pm

Re: Hydrogen header issue.

Post by echopulse » Tue Jun 22, 2021 2:22 pm

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.

User avatar
JTema
Joomla! Guru
Joomla! Guru
Posts: 660
Joined: Sun Apr 13, 2008 8:10 pm

Re: Hydrogen header issue.

Post by JTema » Wed Jun 23, 2021 5:44 am

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;
}
http://www.joomlatema.net - Joomla Extensions and Templates
https://andalusa.joomlatema.net - Andalusa Professional Responsive Joomla Template


Post Reply

Return to “Templates for Joomla! 3.x”