Here is a simple piece of HTML code that I have created:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.:Home Page:. The Indian Sentinel</title>
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="assets/css/fontawesome/font-awesome.css" type="text/css" />
<link rel="stylesheet" href="assets/css/genxcoders.css" type="text/css" />
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="top-bar-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<script>
<!-- Current Date -->
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")
document.write(dayarray[day]+", "+montharray[month]+" "+daym+", "+year)
<!-- Current Date -->
</script>
</div>
<div class="col-md-6">
<ul class="login">
<a class="login-anchor" href="#"><li><i class="fa fa-user"></i> Sign In</li></a>
<a class="login-anchor" href="#"><li><i class="fa fa-edit"></i> Register</li></a>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Top Bar -->
<div class="ptop-20"></div>
<!-- Header -->
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="assets/images/logo/header-logo.png" class="header-logo" />
</div>
<div class="col-md-8">
<img src="assets/images/advt/header850x120.png" class="header-advt" />
</div>
</div>
</div>
</div>
<!-- Header -->
<div class="ptop-30"></div>
<!-- Navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-md hidden-lg" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Navbar -->
<!-- Script -->
<script src="assets/js/jquery213.min.js" type="text/javacript"></script>
<script src="assets/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script>
<!-- Navbar Scroll to Top and Fix -->
<!-- Navbar Scroll to Top and Fix -->
</script>
<!-- Script -->
</body>
</html>
I have also defined some user-defined CSS classes for styling purposes. Here is the code:
/*@import url('https://fonts.googleapis.com/css?family=Raleway');*/
@charset "utf-8";
body {
margin: 0px;
padding: 0px;
font-family: 'Raleway', sans-serif;
line-height: 16px;
color: #212121;
height: 1500px;
}
/* Spacing */
.ptop-5 {
padding-top: 5px;
}
.ptop-10 {
padding-top: 10px;
}
.ptop-20 {
padding-top: 20px;
}
.ptop-30 {
padding-top: 30px;
}
.ptop-40 {
padding-top: 40px;
}
.ptop-50 {
padding-top: 50px;
}
/* Spacing */
/* Containers */
.top-bar {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #3498db;
}
.header {
width: 100%;
min-height: 1%;
overflow: hidden;
}
/* Containers */
/* Top-Bar */
.top-bar > .top-bar-content {
width: 90%;
height: auto;
margin: 0px auto;
line-height: inherit;
color: #ffffff;
}
/* Login */
ul.login {
list-style: none;
text-align: right;
margin-left: -40px;
}
ul.login > a.login-anchor > li {
text-decoration: none;
display: inline-block;
color: #ffffff;
margin: 0px 10px;
transition: all 0.3s ease;
}
ul.login > a.login-anchor:hover > li {
color: rgba(33, 33, 33, 0.5);
transition: all 0.3s ease;
}
/* Login */
/* Top-Bar */
/* Header */
img.header-logo {
width: 400px;
margin: 0px auto;
display: block;
}
.header-advt {
width: 98%;
}
/* Header */
/* Navbar */
.navbar-static-top {
border-top-width: 1px;
border-bottom-width: 1px;
}
/* Navbar */
/* Media Queries */
@media (min-width: 320px) and (max-width: 360px) {
.top-bar {
text-align: center !important;
height: auto;
}
ul.login {
text-align: center;
}
img.header-logo {
width: 90%;
margin-bottom: 20px;
}
img.header-advt {
width: 95%;
height: 60px;
margin: 0px auto 20px;
display: block;
}
}
@media (min-width: 480px) and (max-width: 640px) {
.top-bar {
text-align: center !important;
height: auto;
}
ul.login {
text-align: center;
}
img.header-logo {
width: 90%;
margin-bottom: 20px;
}
img.header-advt {
width: 90%;
height: 60px;
margin: 0px auto 20px;
display: block;
}
}
/* Media Queries */
All necessary Bootstrap, Fontawesome, and jQuery files have been included in the code. However, there seems to be an issue with the dropdown functionality of the navbar and fixing it at the top while scrolling. If you have any insights or suggestions on how to troubleshoot these problems, please let me know. Your help would be greatly appreciated.
P.S.: Despite multiple attempts, I am unable to resolve these issues. It could be due to work pressure affecting my concentration. Any assistance would be valuable in overcoming these challenges.