Posts in category: Materialize CSS

Learn How to increase navbar height in materialize css

At Ampersand Academy, we have already discussed how to create Navbar and how to change the colour of the navbar, various types of Navbar and how to incorporate mobile collapsible Navbar using Materialize CSS. In order to recap these topics, follow the below-mentioned links 
1. Navbar in Materialize CSS 
2. SideNav in Materialize CSS

Here’s the link to Materialize CSS Navbar.

Having discussed and incorporated the Navbar on your website, know how to increase the default Navbar height. 

When we examine the default Navbar in Materialize CSS, the min-height is approximately 64px. If you are to fix a logo on the navbar, your logo should have a max-height of 64 px, else the logo will not be accommodated fully in the Navbar height. Supposedly, the logo which you would like to integrate with the website has the height which is greater than 64px and if you try to fit it in the Navbar, the visibility is affected. 

In order to fix this, we should be able to increase the navbar height instead of reducing the logo size and make it not visible on the website. This can be achieved by writing a CSS class for the Navbar. 

This simple solution will help you increase navbar height and make your logo visible enough. Learn how to add Feature Discovery on Page Load

Learn Feature discovery on page load

Offer some incentive and support return visits by acquainting clients with new features and usefulness at logically significant minutes. 

Feature discovery prompts have more effect when they are displayed to the correct clients at logically significant minutes. At the point when displayed to the wrong client at the wrong time, they can be meddlesome and irritating.

Feature Discovery can be utilized to intimate users about new functionality or a feature on the website. We can use Feature Discovery to bring in call to action buttons in the website. 

In the Materialize CSS website, the documentation is poorly built and it is tedious to make the Feature Discovery work in your website, especially on the page load. We at Ampersand Academy developed the working script for Feature Discovery. 

In this example, we have enabled Feature Discovery for Call to Action button. Visitors who access the website from their mobiles can contact the Company / Website Owner directly. If a visitor access the website from the Desktops / Laptops they can view the mobile number which they use to contact the Company / Website Owner via the Feature Discovery Feature. 

This is one of the basic examples in which call to action button is used for contacting the company. One may use Feature Discovery creatively for conveying the message uniquely. 

Visit the following link to read the Official Documentation for Feature Discovery. However, you should be using the HTML code and JS code mentioned below to make it work.

phone

    <div class="tap-target" data-target="menu">
        <div class="tap-target-content">
          <h5 class="white-text">Hi there!</h5>
          <p class="white-text">You can call us in +91 9876543210 or click the button while you browse from mobile</p>
        </div>
    </div>

<script>
		 document.addEventListener('DOMContentLoaded', function() {
				var elems = document.querySelectorAll('.sidenav');
				var instances = M.Sidenav.init(elems, {});			 
           var elemsTap = document.querySelector('.tap-target');
    var instancesTap = M.TapTarget.init(elemsTap, {});
             instancesTap.open()
			  });
		</script>

Learn about Mobile Menu with Accordion

Learn Mobile menu with accordion type sub menu items

Materialize CSS is one of the most easy-to-use CSS frameworks for website development. Materialize CSS offers easy to use CSS and JS scripts to enable mobile responsive side navigation. In the previous tutorial, we have discussed how to add responsive mobile side navigation both on the left and right side. If you want to learn how to create mobile responsive side navigation follow the link.

In this tutorial, you will learn how to create accordion-like submenu items on the side navigation. For this, first, we have to create a side navigation menu. Suppose, if there is the main level menu and sub-level menu. For example, take an e-commerce website you have Men and Women Dresses. Under the Men’s section, you will have Trousers, Shirts, Shoes, etc. On the same line, the Women’s section will have Skirts, Trousers, Tops, etc. In order to have a layout that depicts this level, the following things have to be done. Open the collapsible section in materialize CSS website and copy the HTML and JS for accordion and paste in the list item of side nav. 

The HTML code has to be copy-pasted inside li tag of side navigation. The javascript has to be included inside the script tag where we already have a script for side navigation. 

Once you have added the script, you can now rename the Accordion Header and add the list item inside collapsible body check as required. 
In our case, we have created 3 headers Men’s Dresses, Women’s Dresses and Children’s Dresses and each header have their respective sub-items such as Trousers, Shirts, T-Shirts, Shoes, Skirts, etc.

We can also explore having Collapsible type menu level instead of Accordion type based on the requirement. It can be achieved by simply calling the key value accordion: false in the javascript. This will create sub-menu with collapsible type instead of Accordion Type. 

Learn about Opening Side Nav on Right Side in Materialize CSS. For more details about various courses, check out Ampersand Academy.

Learn How to open SideNav on the right in Materialize CSS

Mobile responsive navigation is one of the important aspects of a responsive website. It is possible to create beautiful main navigation for desktop/laptop browsers, however, when we design mobile navigation it is a must to make it easily accessible from all mobiles and tablets. There should be a mobile responsive button trigger and when a user clicks it, it should open up a mobile navigation. Follow this link to access the documentation for Sidenav in Materialize CSS.

There are two options when we create a mobile responsive navigation trigger and navigation panel. Either you can have it on the left or on the right. It is possible to create a mobile trigger button on the left and navigation panel, however, some users find the navigation button and panel on the left not that user-friendly. Materialize CSS offers a mobile responsive panel and trigger button on the left. The developers always look forward to having an easy hack to make the mobile responsive menu trigger and panel to the right.

This tutorial helps developers to implement a mobile responsive menu trigger and panel on the right. First, it is a must to incorporate the navigation bar in the website. Materialize CSS offers several variants of the navbar. Know how to create NavBar from this link

The first step you must do is to copy the Mobile Collapsible Navbar from the website along with the JavaScript. The JavaScript code has to be mentioned inside the script tag just above the body close tag.

This will produce a Navbar with collapsible button and navigation pane on the left

If you would like to have the Mobile Menu Trigger button on the right, just add the class “right” next to “sidenav-trigger” class in the mobile menu trigger HTML code. 

<nav>
            <div class="nav-wrapper">
              <a href="#!" class="brand-logo">Logo</a>
              <a href="#" data-target="mobile-demo" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
              <ul class="right hide-on-med-and-down">
                <li><a href="sass.html">Sass</a></li>
                <li><a href="badges.html">Components</a></li>
                <li><a href="collapsible.html">Javascript</a></li>
                <li><a href="mobile.html">Mobile</a></li>
              </ul>
            </div>
          </nav>

          <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
          </ul>

This is will render the mobile collapsible menu on the right and when the user clicks the navigation pane will open on the left side.

If you would like to bring the mobile navigation pane on the right side, add the key-value pair edge:’right’ in the Javascript. The code for which is mentioned below

 <script>
         document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, {edge:'right'});
  });
</script>

This will render the mobile navigation pane on the right. In the next tutorial, you will learn how to create accordion-type side navigation items. Now that we have seen how to open SideNav on the right in Materialize CSS, Learn about Colors in Materialize CSS.

Learn Working with colors in Materialize CSS

Changing the text and container colour on a website is one of the basic yet frequently performed tasks while designing a website. Usually, changing the colour is done using CSS. A designer can either use in-line CSS or write a class for changing the colour. 
In Materialize CSS, the framework developers have made the process of changing the colour of both the text and container easy. Just by calling the colour name inside the class tag will produce the desired result. For example, if you would like to have red colour text colour, just add the text red-text inside the h1 tag.

Here’s the link to Materialize CSS Color Library.

<div class="row red-text">
<h1>Changing color of text</h1>
</div>

In order to achieve this in CSS, we have to write the code as follows … 

<div class="row" style="color: red">
<h1>Changing color of text</h1>
</div>

Furthermore, in order to achieve the change in background colour in CSS following is the code 

<div class="row" style="background-color: red">
<h1>Changing color of division</h1>
</div>

The same result can be achieved by simply adding the text red in the div class, the following is the code

<div class="row red">
<h1>Changing color of division</h1>
</div>

Materialize CSS has not only eased the process of adding colour to the text and division but also enabled the designers to follow consistency in the design level.

Learn about Mega Menu in Materialize CSS

Learn Mega menu for Materialize CSS Framework and implement where it requires a huge menu

This tutorial briefs how to add a Mega menu in Materializecss.com. As we know, there is no default option in Materializecss Framework for Megamenu, we take the privilege in demonstrating how to add a mega menu using simple CSS classes. 

What is available in MaterializeCSS.com?
MaterializeCSS in default provides navbar components with several variants such as Logo with Right Aligned Links, Logo with Left Aligned Links, Center Logo Option, Fixed Navbar, Navbar with Tabs, Navbar with Dropdown Menu and Search Bar. However, there is no default option to create Megamenu in MaterializeCSS. In the following, we shall discuss how a standard Navbar can be inserted and how to create a Mega menu in the Navbar.

Steps to Create Standard Navbar with a drop-down menu:

1. Download the starter pack of MaterializeCSS Framework from the following link:
http://materializecss.com/getting-started.html

2. Extract to a folder.

3. Create index.html in the same folder using the HTML Setup given in the above-mentioned link.

4. Now that the index file has been set up, add the Navbar with Dropdown Component from the following link:
   http://materializecss.com/navbar.html
   In the above link copy Navbar Dropdown Menu Script and paste it in the body of the index.html

5. In order to activate the drop-down functionality add the following JavaScript just before tag and within the $( document ).ready(function) block as given below:

<script>
$( document ).ready(function(){     
$(".dropdown-button").dropdown(); 
})
</script>  

6. Now a standard navbar with a drop-down menu is created and you will be getting a result as given below.

Steps to Mega Menu from the Standard Navbar with drop-down Menu:

1. Once we have the Navbar with a drop-down menu, we can convert the drop-down menu into a mega menu. In the index.html, you will now find a <ul> element with id=”dropdown1″. Modifications have to be done in this <ul> in order to achieve mega menu. 

2. First, add a class name “mega” next to the “dropdown-content”.

3. Now write CSS property for the .mega class. In order to increase the width of the dropdown, add min-width CSS property in the mega class as below. 
   Note: 
   You can set the min-width value as per your requirement. Here, min-width is set to 610 px. 

<style>
.mega {
min-width: 610px !important;
}
</style>

The style script has to declared just before the </head> tag

4. Now you can see that the width of the drop-down menu has increased. Now we can add columns and rows and create the mega menu. In order to add column and rows, the respective script has to be included within the
tag with “dropdown-content” class. 

5. Here, we have intended to create a Mega menu with three column with respective headers.
   In order to achieve the above, first, we will be creating a ROW inside the <ul> tag

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">            
</div>
</ul>

Second, we will be splitting the row into three columns

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
</div>
</ul>

Third, now we can add the headers to respective columns

<ul id="dropdown1" class="dropdown-content mega">
<div class="row">
<div class="col m4">
<li>Head 1</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li>Head 2</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
<div class="col m4">
<li>Head 3</li>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</div>
</div>
</ul>

Additional Notes:

What is Megamenu?

Megamenu is one of the recent advancements of a drop-down menu. It is nothing but a drop-down menu where a website developer can group individual menu items under categories. For example, consider an apparel e-commerce website where one will have a general shop button under which you can have group categories for Men’s Apparel Section, Women’s Apparel Section, Kid’s Apparel Section and under each Category Section there will individual items such as Shirts, Trousers, Jeans, etc. 

Learn about adding logo to navbar in Materialize CSS

Learn Adding Logo to the Navbar in Materialize CSS and implement in you website and web applications

In the previous tutorial, we discussed how to create Navbar using Materialize CSS Framework. If we explore the coding involved in the Navbar, there is an individual component named Logo.  The Logo mentioned there is just a text and this can be changed to the image. Most of the Clients will be having their company logo, which can be added in this section. In order to demonstrate, how to add an image logo in the navbar, we have created a dummy logo and added it to the Project Folder. Usually, the logo image can be in the following formats: jpg, jpeg, png, or SVG. 

Now that we have a sample logo in our images, we can change the Logo text to a sample logo image.

Here <img> tag is used to insert the logo file. Furthermore, in order to control the width and height of the logo, width and height classes are used.  The width and height can be adjusted according to the requirement.

Now we have the logo in our Navbar

Learn about Navbar in Materialize CSS

Creating Navigation Bar

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some websites. Web Applications also require Navigation Bar in order to ease the access of the application. Materialize CSS provides a wide variety of Navigation bar types. Each Navbar option will be used in different scenarios.

Option 1: Left Aligned Logo and Right Aligned Links

All the components which have to be present on the website have to be added inside the body tag of the HTML file. All the style classes can be added in a separate file named style.css and can be linked to the HTML tag as we linked the Materialize CSS files. The first step in learning Navbar in Materialize CSS is to add Materialize CSS files in your working directory and call both CSS and JS files.

In order to add the Materialize Navbar in the HTML Structure we created, we refer to the Materialize CSS website and call in the Navbar coding and paste it into the body tag. You can get the navbar coding from Materialize CSS Website

The Navbar code will create a navigation bar with left aligned logo slot and right aligned menu links. 

By default, Materialize CSS generates Navbar in Red color which can be changed by overriding the color class. In Materialize CSS it is easy to change the color of any container, just by referring the Materialize CSS Color documentation and adding the required color name we can change the color of any container. In this case, if it is required to change the color of the navbar to blue, just add class=”blue” inside the nav tag.

Option 2: Right-Aligned Logo and Left-Aligned Links

In the above coding, if we change the class at two places we can achieve Right Aligned Logo and Left-Aligned Links. 

First, we should change the alignment inside <ul> from right to left. 

Second, we should add the class right next to the brand-logo class.

Output as follows

Option 3: Centering the Logo

We can align the logo to the center of Navbar easily by simply changing the alignment class right to center in the Option 2

The output will be as follows

Option 4: Active Navbar Items

Active Items in Navbar simply means that the highlighted menu item is the current page. In order to highlight a menu item as active, add class=”active” to the respective menu item <li>

The output will be as follows. Kindly note the darker shade of blue which relates to the active class.

Now that you know Navbar in Materialize CSS, Learn about Materialize CSS Simple Raised Button.