I've been troubleshooting a sleek menu design, and I'm puzzled by why it's not working on my localhost. It functioned perfectly when tested on this Codepen. However, after transferring the code to my localhost, it stopped functioning. I'm seeking assistance in identifying the reason for this issue. Please refer to the images below to view the current output. (UPDATED---from this image output: https://i.sstatic.net/n6RXd.jpg
Here's what I'm currently observing. Since it was working fine on your end, I suspect it might be related to the placement of my external codes. Although the animation functions to some extent (when hovered), it appears that the project category content is not being fetched correctly. Could this be due to how I've positioned my declarations or could it be something else? https://i.sstatic.net/1tzMD.jpg
Below is the code I'm using
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Stylish Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Our Brands</h2>
<div id="projectsApp">
<div class="projects" :id="project.ID" v-for="project in projects" :style="{ backgroundImage: 'url(' + project.bImage + ')' }" v-on:click="selectProjects(project.ID)">
<h3 class="beforeTitle"> {{ project.category }}</h3>
<div class="info">
<h1 class="fadeTitle"> {{ project.category }}</h1>
<hr>
</div>
<p class="backArrow"><i class="fa fa-angle-double-left" aria-hidden="true"></i></p>
</div>
<div class="selectedArea">
<h1 :style="{ backgroundImage: 'url(' + highlightedContent.bImage + ')' }"><span>{{ highlightedContent.category }}</span></h1>
<div v-html="highlightedContent.copy" class="copyArea fadeIn"></div>
</div>
</div>
</body>
</html>
style.css
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
box-sizing: border-box !important;
font-family: 'Open Sans', sans-serif; }
::-webkit-scrollbar {
width: 12px !important;
height: 10px;
background-color: #ffffff;
border-top: 1px solid #090909; }
::-webkit-scrollbar-thumb {
background-color: #976734;
height: 5px; }
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0; }
h2 {
text-transform: uppercase;
font-weight: 100;
letter-spacing: 50px;
float: left;
text-align: center;
width: 100%; }
...
main.js
...