CODEWITHSUNDEEP
javascripthtmljquerycss
RojiE
RojiE

Reputation: 45

How do I make my navigation stay sticky and responsive using a logo image?

So, I decided to use a logo image instead of normal text. However, after I added the img tag to the nav, everything went bad from there. The navigation is sticky when I scroll, however, it looks distorted when I add the image tag under the nav tag. The navigation is also set to where when you scroll the navigation is resized.

HTML including jQuery/JavaScript:

$(document).ready(function() {
  $('.btn').click(function() {
    $('.items').toggleClass("show");
    $('ul li').toggleClass("hide");
  })
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: white;
  min-height: 200vh;
}

nav {
  background: #00bfff;
  padding: 5px 40px;
}

nav {
  position: fixed;
  top: 0;
  /*left: 0;*/
  width: 100%;
  /*justify-content: space-between;*/
  align-items: center;
  transition: 0.6s;
  z-index: 100000;
  opacity: 1;
}

nav.sticky {
  padding: 20px 100px;
  background: /*#235d63*/
  #00bfff;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

nav ul li {
  padding: 15px 0;
}

nav ul li.items {
  position: relative;
  width: auto;
  margin: 0 16px;
  text-align: center;
  order: 3;
}

nav ul li.items::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background-color: pink;
  opacity: 0;
}

nav ul li.items:hover::after {
  opacity: 1;
  bottom: 8px;
}

nav ul li.logo {
  flex: 1;
  color: pink;
  font-size: 1.4375rem;
  font-weight: 600;
  transition: .4s;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.125rem;
}

nav ul li:hover a {
  color: pink;
}

nav ul li i {
  font-size: 23px;
}

nav ul li.btn {
  display: none;
  color: pink;
}

nav ul li.btn.show i::before {
  content: '\f00d';
}


/*Responsive Navigation Menu Starts Here*/

@media all and (max-width: 900px) {
  nav {
    padding: 5px 30px
  }
  nav ul li.items {
    width: 100%;
    display: none;
  }
  nav ul li.items.show {
    display: block;
  }
  nav ul li.btn {
    display: block;
  }
  nav ul li.items:hover {
    border-radius: 5px;
    box-shadow: inset 0 0 5px pink;
    box-shadow: inset 0 0 10px rgb(247, 167, 180);
  }
  nav ul li.items:hover::after {
    opacity: 0;
  }
}


/*Responsive Navigation Menu Ends Here*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="contact.css">
  <script src="http://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="logo">Nashwa's Group of Companies</li>
        <li class="items"><a class="active" href="index.html">Home</a></li>
        <li class="items"><a href="updates.html">Updates</a></li>
        <li class="items"><a href="testimonials.html">Testimonials</a></li>
        <li class="items"><a href="gallery.html">Gallery</a></li>
        <li class="items"><a href="contact.html">Contact</a></li>
        <li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
      </ul>
    </nav>
  </header>

Upvotes: 0

Views: 60

Answers (1)

Niteesh
Niteesh

Reputation: 3150

$(document).ready(function() {
  $('.btn').click(function() {
    $('.items').toggleClass("show");
    $('ul li').toggleClass("hide");
  })
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat', sans-serif;
}

body {
  background: white;
  min-height: 200vh;
}

nav {
  background: #00bfff;
  padding: 5px 40px;
}

nav {
  position: fixed;
  top: 0;
  /*left: 0;*/
  width: 100%;
  /*justify-content: space-between;*/
  align-items: center;
  transition: 0.6s;
  z-index: 100000;
  opacity: 1;
}

nav.sticky {
  padding: 20px 100px;
  background: /*#235d63*/
  #00bfff;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

nav ul li {
  padding: 2px 0;
}

nav ul li.items {
  position: relative;
  width: auto;
  margin: 0 16px;
  text-align: center;
  order: 3;
}

nav ul li.items::after {
  position: absolute;
  content: '';
  left: 0;
  bottom: 5px;
  height: 2px;
  width: 100%;
  background-color: pink;
  opacity: 0;
}

nav ul li.items:hover::after {
  opacity: 1;
  bottom: 8px;
}

nav ul li.logo {
  flex: 1;
  color: pink;
  font-size: 1.4375rem;
  font-weight: 600;
  transition: .4s;
}
nav ul li.logo > img{
  height:50px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 1.125rem;
}

nav ul li:hover a {
  color: pink;
}

nav ul li i {
  font-size: 23px;
}

nav ul li.btn {
  display: none;
  color: pink;
}

nav ul li.btn.show i::before {
  content: '\f00d';
}


/*Responsive Navigation Menu Starts Here*/

@media all and (max-width: 900px) {
  nav {
    padding: 5px 30px
  }
  nav ul li.items {
    width: 100%;
    display: none;
  }
  nav ul li.items.show {
    display: block;
  }
  nav ul li.btn {
    display: block;
  }
  nav ul li.items:hover {
    border-radius: 5px;
    box-shadow: inset 0 0 5px pink;
    box-shadow: inset 0 0 10px rgb(247, 167, 180);
  }
  nav ul li.items:hover::after {
    opacity: 0;
  }
}


/*Responsive Navigation Menu Ends Here*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="contact.css">
  <script src="http://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
  <header>
    <nav>
      <ul>
        <li class="logo"><img src="https://static.rfstat.com/renderforest/images/v2/logo-homepage/gradient_2.png"></li>
        <li class="items"><a class="active" href="index.html">Home</a></li>
        <li class="items"><a href="updates.html">Updates</a></li>
        <li class="items"><a href="testimonials.html">Testimonials</a></li>
        <li class="items"><a href="gallery.html">Gallery</a></li>
        <li class="items"><a href="contact.html">Contact</a></li>
        <li class="btn"><a href="#"><i class="fas fa-bars"></i></a></li>
      </ul>
    </nav>
  </header>

Upvotes: 1

Related Questions