Recently, I created a webpage with just one navbar. Everything seemed to be working perfectly when I tested it on my computer using PHPStorm. However, once I uploaded it to my hosting server, the navbar started acting up.
It began changing the colors I had assigned to it and mixing them together.
Additionally, the flexbox alignment that I set up to have the menu centered while still aligning to the right was not being maintained.
Even the hover effect that I carefully designed kept getting overridden by the default settings.
Most frustratingly, many of the CSS styles I applied were being ignored altogether, and the ones that did work appeared broken or incomplete. Strangely, none of these issues occurred when running the website on my local server with XAMPP or through PHPStorm.
Below is a snippet of the code I used:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #e8e8e8;
color: #242424;
}
.wrapper {
width: 100%;
}
/*****navbar****/
ul {
direction: rtl;
}
ul li {
padding: 0 10px;
}
.bg-dark {
background-color: #242424 !important;
}
.nav-a {
text-decoration: none;
direction: rtl;
justify-content: right;
border-bottom: solid transparent 3px;
transition: all ease-in 0.3s;
color: #e8e8e8;
}
.nav-a:hover {
border-bottom: solid rgb(80, 80, 80) 3px;
}
.navbar-me {
color: #e8e8e8;
justify-content: space-between;
text-align: center;
min-height: 10vh;
height: auto;
}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--STYLE LINKS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">
<link rel="stylesheet" href="main.css">
<title style="direction: rtl"> </title>
</head>
<body>
<!--start Wrapper-->
<div class="wrapper">
<!--navbar START-->
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-me">
<!------------------n--------NAVToglle---------------------------------------->
<a class="navbar-brand" style="font-family:monoton,sans-serif; font-size: 1.6rem; color: #e8e8e8;">Technotron</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 m-auto" id="navbarSupportedContent">
<!--Unordered list----->
<ul class="navbar-nav m-auto " style="justify-content: right; text-align: right;">
<li class="nav-item active"><a class="nav-link nav-a" href="#">خانه</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">محصولات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">خدمات</a></li>
<li class="nav-item"><a class="nav-link nav-a" href="#">تماس با ما</a></li>
</ul>
<a style=" display: inline-block; padding: 10px; background: #e8e8e8; color: #242424; text-decoration: none;" href="#"><span> فروشگاه <img src="Mainpage/pic/cart.jpg" style="width: 30px;" alt=""></span></a>
</div>
</nav>
<!--navbar STOP-->
</div>
<!--END Wrapper-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>