HomeХобби и стильRelated VideosMore From: Basic Joomla Tutorials

How to Change the Navigation Bar Height CSS in Rockettheme's Gantry 5 Hydrogen Template

93 ratings | 8093 views
Subscribe Today! ► https://goo.gl/Y3wTy5 This tutorial shows how to change the CSS that sets the height of the top level navigation bar in the Gantry 5 Hydrogen template. Once you know what CSS changes you need to make you will need to put those same changes on your live site. The following tutorial will help you with that step: https://www.youtube.com/watch?v=TkaBka2lJp8 I found out that since brackets are not allowed in YouTube descriptions, I could not post the CSS I said I would share during the video - sorry! 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. So, I have the Basic Joomla site opened up here with the Gantry 5 template, with 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. Now, as I look over on the left-hand side here in this code you'll see that there's a number of other options in the hierarchy here and I want to just keep highlighting till I get to the element that still is at the top and 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. So 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. So the next thing that we want to do, though, is we need 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 first of all, before moving on I'm going to left click and select this HTML because you'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 here I'm just going to paste that CSS there and 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. So what I'm going to do is I'm going to go slowly down through the HTML levels here until only that white is highlighted. I might actually get the point where I run out but here this arrow 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 in 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 on. Alright, 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 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 and 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. 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. -- Tutorial Theme Song "Bluewater" courtesy of http://www.freestockmusic.com Looping Background "Teal Tiles" courtesy of http://www.motionbackgroundsforfree.com #joomla #basicjoomla #cybersalt
Html code for embedding videos on your blog
Text Comments (31)
Geo Jas (5 months ago)
wheter it is for rooted or non rooted ...?
Geo Jas (5 months ago)
its for mobile ...???
Basic Joomla Tutorials (5 months ago)
Hi Geo, I'm not quite sure what you are asking. Can you please elaborate?
Cristofer Raymundo (6 months ago)
Hello, i have a cuestion , how can insert media querie css in atoms gantry 5
Basic Joomla Tutorials (5 months ago)
Hi Cristofer, Please email me at [email protected] and I'll try to help.
Stefan Zdanowicz (1 year ago)
This works on one menu only! When you have a few menus and sub menus it works in desktop mode only. In tablet or phone mode is completely useless defeating the gantry principals. Before publishing this BS you should test it in all modes.
It will work on every menu that is affected by the css you are editing. If you have other menus or sub menus that are not affected by the changes you make then you have not changed all the css you need to for the results you want. Some basic things such as colors used can be changed globally in the Gantry Template's style setting - and that is a much more direct way to change those things. But for spacing, margins, and other things, the method demonstrated in this video is one way to go. Remember too that the mobile menus have their own CSS that you must change as well. For instance, on one of my sites (using a different Gantry 5 template) the css to change the colour of a menu on a desktop menu item is the first example below. Immediately after that is an example of how to change the a mobile phone menu item: .g-home #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, .g-homepositions #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container { color: rgba(255, 255, 255, 0.75); } #g-offcanvas #g-mobilemenu-container ul > li > .g-menu-item-container { color: #ffffff; padding: 0.938rem; } I don't understand how this defeats any Gantry principles since this follows their instructions on how to use the system they have put in place for overriding CSS. That said, there are other ways to create multiple presets for multiple menus (and other things) in Gantry as you want different items of the same type appearing differently. That is a topic for another tutorial another day.
Beat Schybli (1 year ago)
Thank you Tim! This was very useful! I am currently migrating my homepage to Joomla 3.7 using Gantry 5 because I am using Gantry 4 on my other homepage and I am very happy with it. The only thing where Gantry 5 in my opinion sucks is the menu particle. Do you know or could make a video how to implement as useful split menu with Gantry 5? This was very easy with Gantry 4, but here it seems they somehow missed it to implement. Or maybe I do not understand something correctly. Cheers Beat
Beat Schybli (1 year ago)
Hi Tim, Thanks for you reply. Well, I guess the root cause is that the menu particle itself is not very useful for mobile devices especially for tablets in landscape mode. I think Rockettheme is relying on the mobile menu for phones or tablets but this is only showing up when the device is held in portrait mode. For the moment I replaced the menu particle by the RockNavMenu which I installed and positioned on the left side area. But I am not 100% happy with it as well. Cheers Beat
Hi Beat. If I understand, a split menu is one where if you click on the top menu a side menu changes right? Is that how it worked in Gantry 4? Also, did you have to click or just mouse over the menu? If it requires a click, I think I know of a work around.
Abdul Latif Sulaiman (1 year ago)
Thanks
You are welcome!
Mohamed Djaouti (2 years ago)
thank you sir
Basic Joomla Tutorials (2 years ago)
You are welcome!
Hullio GQ (2 years ago)
Thank you for this video! How about a tutorial on creating a sticky menu that changes height on scroll?
Pax Webb (2 years ago)
thanks so much!
Paolo Gherra (2 years ago)
Thanks a lot! Clear and professional. You save me a lot of time!
I'm just can say : Thank you. Found your channel almost by luck and it's wonderlful. The way that you teach its clear and direct to point. Congratulations!!! Best Regards.
There are a little problem working with gantry.. when i try to make a more proffesional menu ( changing graphics...) and adding "over" fx.. i am totally lost.. some help with that?.. Thant you. ;)
You welcome. By the way, your videos are just to the point. Congrats.
Basic Joomla Tutorials (2 years ago)
Thanks for the very kind words!
Akshat Srivastava (2 years ago)
hi Tim, Need your help again, can you tell me if there's any way I can change the look n feel of menu without installing any 3rd party module or extension. If you've any video on it it would be very helpful, I am sure others are also facing same problem with look n feel of Gantry menu style.
Basic Joomla Tutorials (2 years ago)
There is, but unfortunately I am travelling and unable to work on any tutorials for the next month.
Omar Mohammed (2 years ago)
Merci beaucoup
Basic Joomla Tutorials (2 years ago)
de rien!
Akshat Srivastava (2 years ago)
your videos are always helpful :)
Jamie Winegard (2 years ago)
Good stuff, thanks!
Basic Joomla Tutorials (2 years ago)
You are very welcome!
Smart Drive Test (2 years ago)
Hey Tim: excellent pace on the tutorial - easy to follow along. Thanks Cheers Rick
Basic Joomla Tutorials (2 years ago)
+Smart Drive Test Thanks a ton!
William Hebler (2 years ago)
Another great video tutorial by Tim Davis and CyberSalt! Thank you, well done! Will Hebler

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.