Responsive Navbar with Social Media share icons in HTML CSS & JavaScript

Hello friends, in this blog today you will learn how to create a Responsive Navbar with Social Media share icons with the help of HTML CSS and JAVA-SCRIPT. Earlier we have shared the navigation bar and drop down navbar on the blog which you can read by clicking on the link, now it is time to create social media share icons along with the navbar which has been created in Responsive

You must know that the navbar is used in the template of the website and blog which has a menu inside it, which has a link to the page of the website, which when clicked, we can easily reach that page.

You can easily view this navbar on any device. This navbar can be seen in a device like laptop tab and mobile which is designed with height and width @media screen if you need JavaScript or python If it comes, then you can put this navbar in your website and blog. This navbar is the responsibility of every device.

As you can see in this image, it is a Responsive Navbar with Social Media share icons designed in html CSS and JavaScript. You can see this navbar in different devices, which you are seeing, this social icon of navbar has also been added, which is used to share on social media, which you will easily learn to create in this blog.

If you are having difficulty in understanding this (Responsive Navbar with Social Media share icons) then you can understand this by watching this navbar tutorial which has been given as below link, you can click on this link and see

Video Tutorial of Responsive Navbar with Social Media share icons

I hope you have understood by watching the video tutorial of this Responsive Navbar with Social Media share icons which you would have come to know about the source code of this navbar, how the code has been used in this navbar In the beginning, it is very important for you to learn this navbar, which you will learn in this blog.

If you like this Responsive Navbar with Social Media share icons or you want to get the source code of this, then you can get the sores code of this navbar which has been given below two files to get the source by copying these two files. Paste it in your file, which will help you to understand.

Responsive Navbar with Social Media share icons Source Codes

With this Responsive Navbar with Social Media share icons, we know about the source code. First we know about the code of html. We have taken the nav tag inside the body tag of html. Let's use the first label tag inside this nav tag whose class name is taken toggle This label tag has the tag of font awesome icons written inside this class name is fa fa-bars

And below this lable tag we have taken the ul tag inside which seven <li> tag is taken li tag name is list item which is used as list and inside the li tag a <a> tag is taken. In which href = '#' is written, it is used for the link. You can also use a link on the # of this space, but # is used for this if you click on the link. Do not access any new page, so menu name is written inside this <a>

Below the tag, we have taken a div tag whose class name is socialtop, inside this div, the tag of social media icons is written, another div tag has been taken inside the socialtop, which is named top-social and this top- Inside social we have written five <a> tags i.e. anchor tag which is written inside the tag tag of social media which is written with <i> (<i class = 'fa fa-facebook'> </i>)

In the css code file, first we zeroed the margin and padding and border-boxed the box-sizing, then colored the body and wrote the name of the font-family. Its bar gave background-color, width and height to nav and after nav tag the display to style the class toggle color font-size float etc. @ Media of this toggle will block the display inside the screen.

After this the ul is float left and the socialtop is float right, both of them are given in margin and li is blocked inline display and a is given padding margin text-decoration font-size color. Social media icons have also been styled and hover in the same way as li is hovered inside.

Now we know about the tag of @media screen of this navbar, we use @media screen to use it as a different device, so we know about its tag firstly @media screen and (max- width: 1052px) and within this screen the tag is designed according to the screen which we can easily see on the 1052px screen. And then we took in @media screen and (max-width: 500px) and designed according to this screen that this screen can also be seen as a mobile

Get the source code of this Responsive Navbar with Social Media share icons by copying from it and pasting it into your file.

HTML CODE FILE :

<!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 href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <nav>
        <label class="toggle">
            <i class="fa fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href='#'>Home</a></li>
            <li><a href='#'>Download</a></li>
            <li><a href='#'>Social</a></li>
            <li><a href='#'>Features</a></li>
            <li><a href='#'>Entertainment</a></li>
            <li><a href='#'>Travelling</a></li>
            <li><a href='#'>Contact</a></li>
        </ul>
        <div class="socialtop">
            <div class='top-social'>
                <a href='#'><i class='fa fa-facebook'></i></a>
                <a href='#'><i class='fa fa-twitter'></i></a>
                <a href='#'><i class='fa fa-instagram'></i></a>
                <a href='#'><i class='fa fa-pinterest'></i></a>
                <a href="#"><i class='fa fa-youtube'></i></a>
            </div>
        </div>
    </nav>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        $('.toggle i').click(function () {
            $('ul').toggleClass("show");
        });
    </script>
    <section></section>
</body>

</html>

CSS CODE FILE :

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
}

.toggle {
  font-size: 30px;
  color: white;
  float: left;
  line-height: 45px;
  margin-left: 5%;
  cursor: pointer;
  display: none;
}

nav {
  background: #000000;
  height: 45px;
  width: 100%;
}

ul {
  float: left;
  margin-left: 5%;
}

.socialtop {
  float: right;
  margin-right: 5%;
}

ul li {
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
  font-size: 16px;
}

ul a {
  font-weight: 400;
  padding: 15px;
  line-height: 45px;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

ul li:first-child {
  background: #FF7D00;
}

ul li:hover {
  background: #FF7D00;
  color: #fff;
}

ul li a:hover {
  color: #fff;
}

.top-social a {
  padding: 13px;
  color: #fff;
}

.top-social {
  padding: 14px 15px;
}

.top-social a:hover {
  color: #FF7D00;
}

@media screen and (max-width: 1052px) {
  .toggle {
    display: block;
  }

  ul {
    z-index: -1;
    margin-top: -15px;
    position: fixed;
    top: -400px;
    right: 0;
    left: 0;
    width: 200px;
    background: #222222;
    display: inline-block;
    transition: top .4s;
    margin-left: 0;
  }

  ul.show {
    top: 60px;
  }

  ul li {
    top: 0;
    width: 100%;
    float: left;
    text-align: center;
  }
}

@media screen and (max-width:500px) {
  ul {
    width: 100%;
  }

}