About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

Lesson 3: Part-3 Responsive Navigation

Most of the web developers struggle while making a responsive navigation or menu bar compatible with all the screen sizes and browsers. This lesson is about developing responsive navigation with simple HTML, CSS, and jQuery coding.

Steps to develop this navigation

  1. Make sure of the fact that you are aware of media queries and how to write them. If not, please refer to this: - CSS Media Queries before going further.
  2. Go through the previous lesson "Lesson 3: Part 1 - Designing Widgets: Main Navigation" if you have not gone through. It shows how to design desktop navigation
  3. Download the latest version of jquery from jquery.com
  4. Create a folder with any name that you want to, create 2 folders - CSS and JS inside that and place the downloaded jquery file inside the JS folder
  5. Now, open any text editor and create an HTML file inside the main folder and a CSS file inside the CSS folder, and a jQuery file inside the JS folder. The folder structure would look like this:

    Folder Structure of the Project
    Folder Structure of the Project

    Note: To create html, css, and js file, open any of the text editors and save the text file with extensions .html, .css, and .js respectively as shown below:

    Save Dialog Box
    Saving js file

    As shown in the image, replace .js with .css for saving css file and .html for saving HTML file.

  6. Add references of the js and CSS file in your HTML file inside the head tag as below:

    Head tag details of the example
    Meta tag and external file references

    Replace the URLs with yours in the script's src attribute and link's href attribute.

  7. Now, copy the entire HTML and CSS code from Lesson 3: Part 1 - Designing Widgets: Main Navigation in the HTML & CSS file respectively. Save the files and check the output (Open the HTML file in any of the browsers). The output should be as below:

    Desktop Navigation
    Output 1 - Desktop Navigation without any js
  8. Remove default margin, padding from the body and set box-sizing of the elements

    Remove default margin and padding from the body tag which a browser sets for it by default and change the box-sizing in such a way so that the padding & border lies inside the content space. To do this, add below CSS in your CSS file at the top:

    Setting box-sizing for all the elements and removing default padding, margin from body tag
    Setting box-sizing for all the elements and removing default padding, margin from the body tag

    If you are not aware of the box-sizing property, please refer to Important CSS properties.

  9. Hamburger Icon for Mobile Menu

    Before starting the desktop view, always look into the mobile design because it might have some more elements than the desktop view. In this example, we have a hamburger icon above the navigation as shown below:

    Mobile Menu Design
    Mobile Menu Design
    So let us design this icon first. For that, we need to add an element before the navigation division. I have added an anchor tag as shown below: 

    HTML code for the hamburger icon

    HTML code for the hamburger icon

    The CSS for the hamburger icon would be as below:
    CSS coding for the hamburger menu
    CSS coding for the hamburger menu
  10. The next thing to do is add 3rd level navigation inside the 2nd menu item of the second level navigation so that the output would be like below:
    3rd level navigation
    3rd level navigation

    I am not going to show the code for this 😁. If you are not able to do this, please go through  Lesson 3: Part 1 - Designing Widgets: Main Navigation one more time.

  11. Now, let us design the mobile navigation. We do not need the desktop styling to be applied in the mobile view. Also, we do not want to display the hamburger menu icon on the desktop view. So, move the desktop styling code inside the media query and add display none property to the hamburger menu icon as shown below:
    Media Query for the desktop view
    Media Query for the desktop view
  12. Let us design mobile navigation now. The CSS would be:
    CSS code for mobile navigation
    CSS code for mobile navigation

    Here, we need 2 things more. They are 1. The border-bottom needs to be extended end to end and 2. The arrow icon. To extend the bottom border we will use ::before and ::after pseudo-selectors as shown below:

    CSS code for the mobile navigation
    CSS code for the mobile navigation

    For arrow, we have to write some jquery, which we will do after writing jquery for the desktop view navigation. Add the property overflow-x: hidden to the div main navigation as shown below:

    CSS property added to the main navigation division
    CSS property added to the main navigation division
  13. Move all the hamburger CSS inside the media query for mobile if it is placed outside anything, because we need it only in the mobile view.

  14. Now, let us build the functionality of the navigation. We will start that from the desktop view. Initially, the inner level navigation should not be visible. It should be visible only when the mouse moves over its parent menu. For that we will hide all the inner level navigations, the CSS would be:

    CSS to show hide inner navigation on mouse hover
    CSS to show hide inner navigation on mouse hover
  15. The only thing left to do now for desktop navigation is to write jQuery code to add and remove the active class from the parent li on mouse hover. So, open the js file that we have saved initially and write the below code:

    JQuery Code Snippet for the Desktop Navigation
    JQuery Code Snippet for the Desktop Navigation

    Now, save the js file and check the output, the desktop navigation is done now.

  16. Let us make the functionality of mobile navigation now. The first thing to do is to add the arrow with the help of jquery as below:

    jQuery to add the arrow
    jQuery to add the arrow

    This will make the arrow visible in the desktop view too. So, add below CSS inside the media query written for the desktop view:

    CSS to hide arrow from the desktop view
    CSS to hide arrow from the desktop view
  17. Let us design the arrow for the mobile menu. Write below CSS inside the media query for the mobile menu:

    CSS Code for the Mobile Menu Arrow
    CSS Code for the Mobile Menu Arrow

  18. Now, the jQuery for the mobile menu would be:
    jQuery code for responsive navigation
    jQuery code for responsive navigation
    Save this to the js file and see the output. You can see the active class toggled on the click of the arrow from the web inspector as shown below:
    Verifying the js code through web inspector
    Verifying the js code through web inspector
  19. Now, all we need to do is to design the menu, CSS code to make it active on click would be:

    CSS to hide inner navigation initially
    CSS to hide inner navigation initially
    CSS to show inner navigation on arrow click
    CSS to show inner navigation on arrow click

  20. Now you might notice that the arrow is somewhat shifted and there is a border that's appearing after the last li of inner level navigation as shown below:

    Spaces that needs to be removed
    Spaces that need to be removed

    The CSS for that would be:

    Removing spaces from the arrows & removing border from the last li
    Removing spaces from the arrows & removing border from the last li
  21. Initially, the mobile navigation should be hidden, it should be visible only on clicking the hamburger icon. For that we are going to do the same as we did for the inner navigations, we will adding and removing open class to the main navigation division on clicking hamburger menu. For that the main navigation division's CSS needs to be modified as below:

    CSS to hide main navigation
    CSS to hide the main navigation

    CSS to show navigation on clicking the hamburger menu
    CSS to show navigation on clicking the hamburger menu

    Now, the jquery to be written on the hamburger icon click is:

    jQuery for hamburger icon click
    jQuery for hamburger icon click
  22. To change the hamburger icon on click write the below CSS code:

    CSS for changing hamburger icon to cross on click
    CSS for changing hamburger icon to cross on click

We have created responsive navigation. There is one more thing to do. This is an activity for you. Try adding inner level navigations to the last menu i.e Menu Item 7. The inner navigation should be aligned towards the right as shown below:

Last Navigation Alignment

The color code I have used for the body is rgb(217,171,251). For any queries or feedback, you can reach me at [email protected].

Subscribe to Be a full stack .NET developer by Email