Aimy H1 Heading: Context: com_content.article

Change the Navigation Bar Height CSS in Gantry 5 Hydrogen

A YouTube user asked how to change the height of the navigation bar in RocketTheme's Gantry 5 Hydrogen template. Here is the tutorial we made.

Once you know what CSS changes you need to make you will need to put those same changes on your live site. Click here for a following tutorial that will help you with that step.

Gantry 5 custom css

Hi I'm Tim Davis. Thanks for tuning into Cybersalt's Basic Joomla Channel.

Today we've got a shout-out to Mike Urquhart. Mike asked on YouTube, "Can you tell me how to change the height of the navigation bar in Gantry 5 Hydrogen template?" Yes, we can - let's look at that on the computer right now.

So, in order to find the CSS that we're going to change to adjust the height of that navigation bar, we're going to be using Google Chrome's element examiner. I have the Basic Joomla site opened up here with the Gantry 5 Hydrogen template, and I'm going to hit F12 to bring up the element inspector.

What we want to do is click on this button here on the left to select an element and we're going to select somewhere up here on that menu bar. That's probably a good guess there since its selecting the whole thing and we'll look down. Now we have the elements on this side and what their properties are.

As I look over on the left-hand side here in this code you'll see that there are a number of other options in the hierarchy here and I want to just keep highlighting until I get to the element that is still at the top and then select what we want. This one, "g-container." It goes right across the top but I don't see anything in here setting the same color that is there, so I go up one higher to "g-navigation" to the section. That still highlights right across and when I look over here I see here's the background color that is set. So, this is probably the CSS that we want to change.

I'm going to type by just clicking here to add a new line to the CSS to test it and type "height", hit enter and then I'm going to type 40 and we'll do 40 pixels (PX). And we'll see right away, as soon as I finish typing the X, this top bar has the height that is lower. The next thing that we want to do, is to find some other CSS to change because as you can see the white of the home menu there is a different height as well. So, before moving on, I'm going to left click and select this HTML because we're going to want to put that in our custom HTML page in the RocketTheme template. I'm going to copy that and we'll put it over here on another screen (I just have a notepad open) and paste that CSS there. We'll get ready for a new line to paste the next things.

Alright, so the next thing that we want to do is somehow change the height of this white. What I'm going to do is go slowly down through the HTML levels here until only that white is highlighted. I might actually get to the point where I run out, but here you see we can click and go to the next level. We'll highlight that - there we go - we've got it. That's the active menu. So, when we click on that, look over here and we'll see here the background white color is being set there for "g-navigation, g-main nav top-level". So once again I'm going to type in there "height". We're going to add a new line - let's do the same height of course, 40 pixels, and now that white has changed its height. So, we're making progress.

Again, I'm going to select all that CSS, that we've just edited, we actually don't need to repeat the background color so what we'll do is I'll bring my notepad over here and we'll paste that in there. But I'm going to take out this background color line and just delete it. We have some weird double spacing happening here but that won't affect when we paste later.

Next you notice that the title "Home" is now right on the very bottom; it's not at the middle of the white spot there. So, let's go down another level over on the left and select - there we go, we have the "ag menu item container". We click on that and now we're looking for something that will make that whole move up and as we scroll down here we see "g main nav top level padding". Now this check box here, we can just uncheck that and see if that has any effect on what we're working on and it does, so we're in the right area. We want to adjust this first number to remove the padding that's at the top so it can move up a bit. I've already been experimenting with this, so we're going to go and put in ".45 REM" and as we change it we see that it's centered nicely up there. So, again down here we'll just hit enter and once again we have some CSS we want to select and copy and put in our list of CSS that we've edited.

All right, now there we go. Everything seems to be pretty good except as you'll notice now, if you have a sub menu under this menu, you're going to end up with the thicker sizes. Now, you might be fine with that and if you don't mind having the thicker boxes that's great and the navigation bar is a lesser height and your problems are solved.

If you want these other areas, the submenus, to have the same height as that, then what you need to do is continue to go down through the HTML code on this side and find where the height is set for other things such as a submenu and just continue to repeat the steps of hunting down the CSS for changing what you want to change. So, it can be a little bit tricky sometimes on templates because the first thing that you click on to examine might not even have anywhere that you can adjust the height of something or the width or the color, but by going up through the preceding HTML and using the tools I've demonstrated here you will find the CSS for different elements that you want to change.

And of course the final step is to take all of this custom CSS code that we've made changes to and paste that into the "custom.scss" file that is in the template folder that you set up for changing the CSS. I have a tutorial on that already. I'll put a card up that will link to that video and put a link to that video in the description for this video. I will also be posting this CSS information in the bottom. I'm going to remove a little bit more because here, for example, we only change height, so we don't want to keep duplicating more than is necessary.

That's how to change the height of that navigation bar in Gantry 5 Hydrogen. So, Mike, and everyone else, give the video a “like” and subscribe to this channel - that would be great.

Thanks for watching and enjoy working on your Joomla site!


subscribe basic joomla

subscribe cybersalt

earn coins bn

Login Form