Using Materialize with C# .NET MVC: How to Add a Navigation Bar & Basic Styling
July 14, 2018
This tutorial will show Windows users how to add and customize a Materialize (a modern, responsive CSS framework based on Material Design by Google) navigation bar and implement basic styling in a C# .NET MVC application. The source code for this tutorial can be found on GitHub.
1. This tutorial assumes that you already have a C# .NET MVC application open in Visual Studio 2017 (or a similar IDE) and have already added the Materialize framework to your application. If you have not completed these steps, please refer to our previous tutorial “How to Add Materialize CSS Framework to a C# .NET MVC Application” for easy, step by step instructions.
2. I have deleted the starter code from _Layout.cshtml and added a comment that explain where the code for our navigation bar will go. We need to put our navigation bar (and footer if you choose to add a footer) in the shared _Layout.cshtml file that way it will appear on each page of our website.
3. Next, delete the starter code from Index.cshtml, so that we are starting with a clean slate.
4. We are now ready to add the navigation bar and the background color of our page (this should also be implemented in the shared _Layout.cshtml file so that all pages share the same background color, unless you want each page to be a different color). To add a background color, we will simply set the class of the <body> to whatever Materialize color we want. The Materialize color palette can be found here. Simply choose a color code to set the background to. For this tutorial, I have chosen a light green (green lighten-4).
5. Now that we have set the background color for our website, we will add the navigation bar. We will refer to the navbar code Materialize provides us with found . We simply call the nav class and set it to whatever color we want our navigation bar to be. For the navbar, I chose a greyish blue (blue-grey lighten-4).
6. To implement the navbar, we will add a “nav-wrapper” and “brand-logo” class which we will center with “white-text”. We titled our navbar “Implementing a Navigation Bar in Materialize” and put it in a “flow-text” class to make the text responsive.
7. At this point, when we run our application it looks like this:
8. Now that we have our navbar, we can now add links to it like home, about, and contact. To do this, we create a list of the links we want on our navbar. But first, I changed our “brand logo” to “Materialize Tutorial” and moved it to the left, instead of center, so our links can be on the right.
9. We will now add home, about, and contact links to our navbar. To do this, we put them in a list like below. In <ul> we specify that it will be located on the right-hand side and will collapse to be hidden when on screen is medium sized or smaller. Please refer to the code in the picture below. In the second picture, “about” is darker, because my mouse was hovering over that link at the time the screenshot was taken.
10. When we click on about or contact, it will simply take us to empty pages, since we have not yet added anything to our about or contact pages yet. However, the navbar is now completely functional, and as many links as you like can be added to it. They will all share the _Layout.cshtml file with the navbar and green background. Our Materialize navigation bar is now complete!
The source code for this tutorial can be found for free on GitHub.