<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="topheader"> <div class="container"> <div class="row d-flex align-item-center justify-content-center"> <div class="col-md-8 col-6"> <marquee width="100%">THIS IS SHIVAPURI SECONDARY SCHOOL PAGE!!!</marquee> </div> </div> </div> </section> <section id="header"> <nav class="navbar navbar-expand-lg bg-white"> <a class="" href="index.php"> <img class="logo-image header-logo" src="https://www.collegenp.com/uploads/2018/08/Shivapuri-Secondary-School-Jajarkot.jpg"> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse justify-content-end navbar-content" style="margin-top:0rem;" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="index.php">HOME <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown programs-offered nav-list"> <a class="nav-link nav-list-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> ABOUT US<img class="nav-dd-image ml-2" src=""> </a> <div class="dropdown-menu programs-offered-dd" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item programs-offered-dd-items" href="#">Action</a> <a class="dropdown-item programs-offered-dd-items" href="#">Another action</a> <a class="dropdown-item programs-offered-dd-items" href="#">Something else here</a> </div> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="#">EVENTS</a> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="#">FACILITIES</a> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="#">GALLERY</a> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="#">BLOG</a> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link" href="#">CALENDER</a> </li> <li class="nav-item nav-list"> <a class="nav-link nav-list-link contact-us-link" href="#">CONTACT US</a> </li> <li class="nav-item dropdown programs-offered nav-list"> <a class="nav-link nav-list-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> MORE<img class="nav-dd-image ml-2" src=""> </a> <div class="dropdown-menu programs-offered-dd" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item programs-offered-dd-items" href="bbs.php">BBS</a> <a class="dropdown-item programs-offered-dd-items" href="bed.php">B.ED</a> </div> </li> </ul> </div> </nav> </section>

#topheader{ background-color: black; color:white; } #header{ background-color: yellow; border-bottom:solid black 2px; } .header-logo { margin-top: -0.5rem; margin-left: 2rem; width: 7rem; height: 6rem; } @media only screen and (max-width:1100px) { .header-logo { width: 100px; height: 70px; } } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30, 29, 96, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } .navbar-content { margin-right: 2.8rem; margin-top: 1rem; color: white !important; } @media only screen and (max-width:1100px) { .navbar-content:after { width: 65%; margin-left: 5.2rem; } .nav-list { padding: 0rem !important; margin: 0rem; } .nav-list-link { font-size: 0.2rem; padding: 0rem; margin: 0rem; } } /* @media only screen and (max-width:1133px){ .navbar-content:after{ width:70%; margin-left:2rem; } } */ @media only screen and (max-width:12px) { .navbar-content:after { width: 75%; margin-left: 0rem; } .nav-list { /* padding:0.3rem; */ margin: 0rem; padding: 0rem; } .nav-list-link { font-size: 0.7rem; color: #FED81F !important; } } @media only screen and (max-width: 991px) { .navbar-content:after { width: 0rem; } .navbar-content { margin: 0rem 0rem 0rem 0rem; padding-left: 2rem; font-size: 1rem; } } .nav-list { padding-right: 1rem; } .nav-list-link { display: inline-block; position: relative; color: #1E1D60 !important; font-family: Inter !important; font-size: 1rem; font-weight: 600; line-height: 1.5rem; letter-spacing: 0em; text-align: left; } .nav-list-link:hover { color: #1E1D60 !important } .nav-list-link:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #1E1D60 !important; transform-origin: bottom right; transition: transform 0.08s ease-out; } .nav-list-link:hover:after { transform: scaleX(1); transform-origin: bottom left; color: #1E1D60 !important; } /* @media only screen and (max-width:1312px){ } */ @media only screen and (max-width:991px) { .nav-list-link { color: #241546 !important; } } @media only screen and (max-width: 991px) { .contact-us-link { max-width: 122px; margin-left: -5px !important; padding: 8px 8px !important; color: white; } }