EVOLUTION-NINJA

Edit File: header.php

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jayblues</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

/* header  desktop */
    .headnavlinks {
        max-width: 70%;
        display: flex;
        justify-content: space-between;

}

.clp {
        max-width: 50%;
        margin-left: auto;

}

.navbar {
        padding-bottom: 2.5rem;
    }

.jayheader {
        background-image: url("<?php echo base_url('public/assets/images/Vector 1.png') ?>");
        width: 100%;
        background-repeat: no-repeat;
        background-position: right;
        /* background-size: 65%; */
        /* background-size: ; */

}

.pagetabslink>a {
        color: white;
        font-size: 18px;

}

.logintojayblues {
        border: none;
        outline: none;
        border-radius: 41px;
        background-color: white;
        width: 101px;
        padding: 7px;
        color: #001740;
        font-weight: 500;
        font-size: 17px;

}

.navbar-collapse {
        justify-content: space-evenly;
        margin-right: 103px;
    }

.jaylogo {
        margin-left: 162px;
        /* animation:logoslide 1s  ; */
    }

/* header  desktop end */

/* goup  block style  */
#goup {
    position: fixed;
    top: 85%;
    right: 15px;
    z-index: 1111 !important;
    border-radius: 60%;
    width: 50px;
    height: 50px;
    background-color: white;
  
  }

.gotoup {
    /* font-size: 50px; */
    z-index: 10000;
    position: relative !important;
    width: 100%;

}
  /* goup  block style  end */

@media (min-width:1001px) and (max-width:1356px) {

/* header  */
        .clp {
            max-width: 74% !important;
        }

.jaylogo {
            margin-left: 3px !important;
        }

.jayheader {
            background-size: contain;
        }

.navbar-collapse {
            justify-content: space-evenly;
            margin-right: 1px !important;
        }

/* header  */
    }

@media (min-width:629px) and (max-width:1000px) {

/* header  */
        .jaylogo {
            margin-left: 36px !important;
        }

.clp {
            max-width: 74% !important;
        }

.navbar {
            padding-bottom: initial !important;
        }

.jayheader {
            background-size: contain;
        }

.navbar-collapse {
            position: absolute;

}

.navbar-collapse {
            background-color: black;
            z-index: 11111;
            position: absolute;
            width: 100%;
            top: 120%;
            left: 1px;
            padding: 27px;
            transition: all 0.5s;
            margin-right: initial;
        }

.logintojayblues {
            margin-top: 31px;
        }

/* header   end*/

}

@media only screen and (max-width:628px) {

/* header   */
        .jayheader {
            background-position: right;
            background-size: 69% 123px;
        }

.jaylogo {
            margin-left: 9px !important;
        }

.navbar-collapse {
            background-color: black;
            z-index: 11111;
            position: absolute;
            width: 100%;
            top: 81%;
            left: 0px;
            padding: 27px;
            transition: all 0.5s;
            margin-right: initial;
        }

.clp {

max-width: 100% !important;
            margin-left: auto;

}

.logintojayblues {
            margin-top: 31px;
        }

/* header end  */
    }

/* logo animation  */
    /* @keyframes logoslide {
        0%{
            transform: translateX(-500px);
            opacity: 0;
        }
        50%{
            transform: translateX(50px) ;
            opacity: 0.8;

}
        100%{
            transform: translateX(0px);
            opacity: 1;

}
        
    } */
</style>

<body>

<header class="jayheader">
        <nav class="navbar navbar-expand-lg">
            <img class="navbar-brand jaylogo" src="<?php echo base_url('public/assets/images/Jay Blues logo 1.png');?>"
                alt="jayblues logo">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-bars" aria-hidden="true"></i>
            </button>

<div class="collapse clp navbar-collapse" id="navbarNav">
                <div class=" headnavlinks">
                    <ul class="navbar-nav">
                        <li class="nav-item active pagetabslink">
                            <a class="nav-link " href="<?php echo base_url('/') ?>">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item pagetabslink">
                            <a class="nav-link" href="<?php echo base_url('about-us') ?>">About</a>
                        </li>
                        
                        <li class="nav-item dropdown pagetabslink">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Products
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="<?php echo base_url('Educational-portal') ?>">Nparrots [Online Education Portal]</a>
                                <a class="dropdown-item" href="<?php echo base_url('clinic-management') ?>">Clinic Management System (CMS)</a>
                                <a class="dropdown-item" href="<?php echo base_url('J-fiber') ?>">J-Fiber Soft</a>
                                <a class="dropdown-item" href="<?php echo base_url('JAY-CRM')?>">JAY CRM [Custom Relationship Management]</a>
                                <a class="dropdown-item" href="<?php echo base_url('JAY-ERP')?>">JAYERP [Enterprise Resource Planning]</a>
                                <a class="dropdown-item" href="<?php echo base_url('Conference')?>">Conference Application </a>
                                <a class="dropdown-item" href="<?php echo base_url('Jay-Diagnostics-Soft')?>">JAY Diagnostics Soft [Complete Diagnostics & Lab
                                    Software Solution]</a>
                                <a class="dropdown-item" href="<?php echo base_url('Jay-Realty-Software')?>">JAYRealty Soft [Complete Real Estate Software
                                    Solution]</a>
                            </div>
                        </li>
                        
                        <li class="nav-item dropdown pagetabslink">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Services
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <a class="dropdown-item" href="#">Software Development</a>
                                <a class="dropdown-item" href="<?php echo base_url('mobile-App-development') ?>">Mobile App Development</a>
                                <a class="dropdown-item" href="<?php echo base_url('Social-media-management') ?>">Social Media Management</a>
                                <a class="dropdown-item" href="<?php echo base_url('web-development') ?>">Web Development</a>
                                <a class="dropdown-item" href="<?php echo base_url('search-engine-optimization') ?>">Search Engine Optimization</a>
                                <a class="dropdown-item" href="<?php echo base_url('mobile-development') ?>">Business analysis </a>
                                
                            </div>
                        </li>
                        <li class="nav-item pagetabslink">
                            <a class="nav-link" href="<?php echo base_url('career') ?>">Career</a>
                        </li>
                        <li class="nav-item pagetabslink">
                            <a class="nav-link " href="<?php echo base_url('Contact-Us')?>"> Contact Us</a>
                        </li>
                    </ul>

</div>
                <button class="logintojayblues">Login</button>
            </div>
        </nav>
    </header>

<div id="goup">
    
    <img src="<?php echo base_url('public/assets/images/up-arrow (2).png')?>" alt="Go to top" class="gotoup">
  </div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
      let goupbutton = document.getElementById("goup");

// Initially hide the button
      goupbutton.style.display = "none";

goupbutton.addEventListener("click", function () {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    });
  </script>