Drupal 8 Theming - Part 07 - Adding Main Navigation

so in the previous episode of Drupal 8 teaming we styled our header and the background to it and the logo to it I show you how you can make your header with blocks so in this episode we are going to add a main navigation to our header so that the users that have come to our site can navigate the site easily so let's see how that is done okay so to make our navigation we would first have to have some content to link that navigation to so I'm going to go to my administration content and add some new content so let's say we are building a page that is going to be dealing with movies of course so like in previous episodes of these tutorials on watch learn comm we are very fond of movies so I'm going to create a basic page called movies so let's just give it the title of movies and save and publish I'm not going to add any content right here now we can go to content once again the a and the new basic page that is going to be called about us okay save and publish this one and of course we are going to have page called contact so let's add that page okay save and publish and if you go to our content right now we will see that we have three pages movies about us and contact so we want to link those three pages in our main menu to do that we'll go to structure menus and as you can see we have few menus right here so we have an administration menu footer menu main navigation which is the one we will be using tools and user account menu you can also add your own menu and as you can see here by this message it says each menu has a corresponding block that is managed on the blocks layout page so if you create a new menu it will automatically create a block for you that you can use on your structure block layout page but right now we are going to focus on this main navigation menu so let's edit it so you go to edit we have the which we can see that we have a home link right here okay we will leave that home link and add a new link one that is going to be called movies so movies and the link to our file so to make a link you start typing the title of a piece of content to select it you can also enter an internal past such as no dad or an external URL such as HTTP example.com or enter front to link to the front page so our link is going to be to the page called movies so we just start typing movies movies and as you can see Drupal automatically adds that link and this number one right here is the ID of the node that the Drupal is going to be using to call that page so this is node 1 okay this is going to be enabled we don't need to add an description to it and it's going to be in the main navigation menu so just save this let's loot do exactly the same steps for other page so let's add a link and we can call it about us about us and just start typing about right here and you can see that we get this about us so this one has the ID of 2 so just save that and just add another one called contact so contact ok and the link contact so that one has the ID of 3 everything you create in Drupal is called the node so whatever type of content you make is going to be referenced by a node ID so about Us page has a node ID of 1 if we go to that page let's just do that right now so let's see about us if you if we go to that page you can see that we have slash node 2 so this is the ID of the page everything in Drupal is called the node so that's our content okay let's just delete this actually we can go to structure menus and just see how our menu actually our main navigational looks right now so we have a few pages right here about us contact home and movies I'm just going to reorder them a little bit so we're going to have a home and then we're going to have movies and about us and then a contact okay save this so this is our menu next thing we are going to do is going to display that menu in our header range to add this menu to our header region we'll just go to structure block layout and down here we have main navigation so if we wanna add it to add to the header region we'll just drag it right here under the side branding and say blocks okay and if we if we refresh the page we can see our menu right here so we need to style it a little bit but if you look at the page right now and HTML output of it we can see that our menu is in this div data contextual ID block in the main main menu and so on and all of this so it actually is in nav role navigation so what we want to do now actually is create a new region for our menu so that we can reference it better so I'm just going to go to my endymion that info file and create a new region called main navigation what's called like this main navigation okay and just call it by human readable name by main navigation okay save it go to the configuration of course and then we go to performance and clear the cache so once the cache is cleared we can go back to our site and as you can see we still have this menu right here but that's because we didn't add it to our new region so I'm just going to refresh this and right here we have main navigation so I'm just going to take main navigation block and put it into the main navigation region and save box and if we if we refresh the page this should disappear right now because we didn't define our main navigation region on the front page so to do that so we have this page header right here I'm just going to add a new region but I'm going to put it in and Dave called main navigation okay so let's just define a new region called page dot main navigation so we are using the name that we defined right here so main navigation I think that's right okay save it refresh the page and as you can see we now have this right here so what I'm gonna do now is I'm going to go to myself and going to go to header and I'm just going to do that main navigation and then I'm going to give it so check out the Suzy documentation if you don't know what this means so I'm actually just making a column off with red let's say five so span five and last so it's going to be aligned to the right and okay main navigation let's just save it and see what it does actually I didn't I didn't turn on gulp watch right now so I'm just going to do that right now so it will compile my sass files I'm just going to remove this save it again turn on my live reload and refresh the page as you can see now home movies about us contact is moved to the right and now I'm just going to do Li and do float:left so we got our navigation looking like this right now and then I'm going to do a display:block color white so just this right here takes the creation to be a nothing so we don't want it to underlined and if we check it right now we can see it like this and I'm just going to add some pairing to this a tag not on the top but on the right and left sides so let's say 10 pixels okay so that it's a little bit they have a little bit space between each other and I'm going to add margin to this main navigation div let's say margin top to be 10 pixels so it's a little bit aligned with this woodland logo maybe a little more so let's say 25 pixels that seems about right and we can also add some hover effects to it so hover text-decoration:underline so when we hover over it it will make an underline so this is the way we made our main navigation for the site and if we click on any of those links we would be taken to the corresponding pages so for example if you click on movies we'll go to the movies page and if we click on about us we would go to an about Us page of course they don't have any content in them so we just get the title but let's just click on those pages again as you can see we don't have a header right here so in the next episode I'm going to show you how you can take this header and include it on other page templates so our header right now is pretty much static as you can see and whenever we make a new template we have to copy all of this code to that template and if we do any changes to that template we have to do do it on multiple files so in the next episode I'm just going to show you how you can include that header on other pages and whenever you make a change you just make a change in one file and it will propagate to all of the other pages and other templates so thank you guys for watching this episode if you liked it please like it if you like this channel or if you like the content of this channel please subscribe also you can follow me on Twitter or on Facebook I will keep you up to date with my latest videos and stuff I find on the Internet and thanks again for watching and I'll see you in the next one

Channel: Watch and Learn

Views: 35,021

Rating: 4.9498749 out of 5

Keywords: Drupal 8, Drupal (Software), Theme, Drupal 8 themig, tutorial, theming tutorial, main navigation, Drupal blocks, Drupal regions, Drupal menus, Drupal theming, Druypal 8 theming tutorial

Id: KSsFt9rSNdU

Length: 15min 11sec (911 seconds)

Published: Sat Nov 21 2015