Responsive Navigation Menu using HTML & CSS Media Query

Uncategorized
Norbert BM0

Tutorial Description :

In this Tutorial I will create a Responsive Navigation Menu Bar using HTML & CSS Media Querym Flex Box and CSS Grid and Check pseudo class. No Java Script is used.

I will use font Font Awesome for the icons and google fonts with the font style of Roboto for the main font.

For the navigation I will use display flex so CSS3 flexbox.

I will also use pseudo element and pseudo classes as hover, after, before, and active in order to hide and make content visible .

Img:

domenico-loia-EhTcC9sYXsw-unsplashDownload

Font Awesome
Google Fonts

HTML :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Monda&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Navigation</title>
  </head>
  <body>
    <header>
      <nav class="nav_container">
        <div class="logo">
          <label for="menu" class="menu_btn">
            <img class="logo_img" src="/img/Menyhart Media Logo 2.png" alt="" />
          </label>
          <a href="#index.html">
            <label class="logo_title" for="menu">
              Menyhart <span>Media</span>
            </label>
          </a>
        </div>
        <input type="checkbox" id="menu" />
        <ul class="nav_items">
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">services</a></li>
          <li><a href="#">contact</a></li>
          <li><a href="#">feedback</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="main_container">
        <h1>Responsive Navigation</h1>
        <h2>
          <span>Desktop</span>
          <span>Tablet</span>
          <span>Mobile</span>
        </h2>
      </section>
    </main>
    <footer>
      <p>Menyhart <span>Media</span> &copy;2020</p>
    </footer>
  </body>
</html>

CSS:

*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-size: 16px;
}

body {
  font-family: "Monda";
  background-image: url(/img/domenico-loia-EhTcC9sYXsw-unsplash.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
}

.main_container h1,
.main_container h2 {
  text-align: center;
  position: relative;
  margin-top: 20vh;
  font-size: 10rem;
  color: #341c09;
}
.main_container h2 {
  font-size: 3rem;
}
#menu {
  display: none;
}
.nav_container {
  background-color: #236ab9;
  height: 80px;
  width: 100%;
  display: grid;
  grid-template-columns: 30% 70%;
  box-shadow: 0 0 10px 5px;
}
.nav_container .logo {
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}
.nav_container .logo_img {
  max-height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.nav_container .logo_title {
  color: #d4e4f7;
  font-size: 1.5rem;
  cursor: pointer;
}
.nav_container .logo_title span {
  color: #e2b007;
  text-shadow: 1px 1px 2px #341c09;
}
.nav_container .nav_items {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
}
.nav_container .nav_items a.active {
  background-color: #341c09;
  padding: 0.5rem;
  border-radius: 5px;
}
.nav_container .nav_items a {
  color: #d4e4f7;
  padding: 0.5rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}
.nav_container .nav_items a:hover {
  color: #e2b007;
  text-shadow: 1px 1px 2px #341c09;
  transition: 0.3s ease;
}
@media screen and (max-width: 1080px) {
  .nav_container .logo_title,
  .nav_container .nav_items a {
    font-size: 1rem;
  }
  .main_container h1 {
    font-size: 5rem;
  }
  .main_container h2 span {
    display: flex;
    flex-direction: column;
    font-size: 3rem;
    justify-content: space-between;
    height: 150px;
  }
}
@media screen and (max-width: 768px) {
  .main_container h1 {
    font-size: 6rem;
  }
  .main_container h2 span {
    height: 100px;
  }
  .nav_container {
    grid-template-columns: 1fr;
    justify-items: center;
    transition: all 0.3s ease-in-out;
  }
  .nav_container .logo {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }
  .nav_container .logo_title,
  .nav_container .nav_items a {
    font-size: 1.8rem;
  }
  .logo_img::after {
    position: absolute;
    content: "Menu";
    bottom: 0;
    color: #d4e4f7;
    left: 1rem;

  }
  .nav_container .nav_items {
    flex-direction: column;
    justify-content: space-around;
    height: 95vh;
    width: 100%;
    position: fixed;
    top: 80px;
    left: -100%;
    background-color: rgba(226, 176, 7, 0.8);
    overflow: hidden;
    z-index: 1;
    transition: all 0.5s ease;
  }
  .nav_container .nav_items a {
    color: #341c09;
    text-shadow: 1px 1px 2px #d4e4f7;
    display: inline-block;
  }
  .nav_container .nav_items a.active {
    background-color: #d4e4f7;
    width: 100%;
  }
  .nav_container .nav_items li {
    width: 95%;
    display: block;
    text-align: center;
  }
  .nav_container .nav_items a:hover {
    background-color: #341c09;
    border-radius: 5px;
    width: 100%;
    transition: 0.3s ease;
  }

  #menu:checked ~ .nav_items {
    left: 0;
  }
}
footer {
  background-color: #111;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #eebb33;
  font-size: 1.5rem;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 3px;
  font-weight: 500;
  text-align: center;
}
footer span {
  color: #fff;
  text-transform: uppercase;
  font-size: 1.1rem;
}

My Course:

Web Development HTML CSS & JS Beginner to Advance

Requirements

  • Basic PC/Mac Knowledge
  • Beginner Curiosity

Description

This is a beginner friendly course. This course will tech you the Foundations of Web Development. This a more practical orientate Course. Aldo we will start up slow with some basic definitions, the main focus here is to have as much as possible hands on experience. Learning by doing is the key word. That means Examples, Assignments and Exercises!

At this point I would like to invite you to join me on this journey and enrich yourself with the foundations of web development. In this Course You will learn Modern HTML 5, CSS 3, and JavaScript, and through applying them you will be able to building from Easy to progressively more complex responsive Responsive Web Pages.

Throughout the course we cover tons of tools and technologies including:

  • HTML5
  • CSS3
  • CSS FelxBox
  • CSS Grid Layout
  • Projects
  • SASS
  • JavaScript
  • DOM Manipulation
  • JSON
  • Projects , Projects and more Projects 🙂

Two Important Notes about this Course:

1. This is a hands-on Learning by doing Course. This means that we are going to start up Slowly with basic definitions in HTML and CSS and then we will combine them together by building the structure and applying design to our sites. After that we will apply JS in order to make the Site do Thinks.

2. Is that I will be constantly Updating the Content with New Documentation, Examples and Exercises in order to bring you as much value as possible. So you can always lean beck on this Course if you want to refresh your memory about something.

Bonus!

3. The most important thing the you need to know in life is where to find the information you need!Who this course is for:

  • Beginner Web Developers
  • Beginner Web Designers
  • Beginner HTML
  • Beginner CSS
  • Beginner SASS / SCSS
  • Beginner JavaScript

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.