Harry Potter, The Beginning!

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Provident sit iusto ipsam. Inventore, blanditiis repudiandae. Molestiae, dolorum obcaecati?

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter

In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).

Only when the button is clicked, the navigation bar will be displayed.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi voluptatum atque molestias voluptate, repellat ipsam quisquam totam officia aliquam voluptatem obcaecati exercitationem molestiae commodi tempora error illo laborum labore iste. Voluptatum ducimus quia odit eveniet aspernatur doloribus optio voluptatibus, id accusantium, error vero ab, saepe praesentium laudantium modi hic molestiae.

Harry Potter, The End!