Why are all links broken and the mobile menu disappeared after installing featherbox gallery?

If you want to see for yourself, here is the link.

I can't figure out why my website has suddenly lost functionality on this specific page.

None of the links work, except for the home and contact (the non-expandable ones).

The navigation menu seems to have disappeared too.

Any assistance would be greatly appreciated!

Answer №1

Your website is currently loading two versions of jQuery (1.7 and 1.11), causing an error in the order of your config.js loading. To fix this issue, first remove the outdated version of jQuery. Then, rearrange all your scripts to be placed at the bottom of the page in the following order:

 <script src="js/jquery.min.js"></script>
 <script src="js/jquery.dropotron.min.js"></script>
 <script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="featherlight.js" type="text/javascript" charset="utf-8"></script>
<script src="featherlight.gallery.js" type="text/javascript" charset="utf-8"></script> 
  <script src="js/config.js"></script>
<script>
        $(document).ready(function(){
            $('.gallery').featherlightGallery({
                gallery: {
                    fadeIn: 300,
                    fadeOut: 300
                },
                openSpeed:    300,
                closeSpeed:   300
            });
            $('.gallery2').featherlightGallery({
                gallery: {
                    next: 'next »',
                    previous: '« previous'
                },
                variant: 'featherlight-gallery2'
            });
        });

        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//stats.g.doubleclick.net/dc.js','ga');
    </script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Add an element to the input field

Two input buttons are available for users to upload files. <input type="file" id="fileUpload" name="files" multiple><br/> <div id="selectedFiles"></div> The selected files will be appende ...

Utilizing JSON with ASP.NET WebForms

Is it recommended to use JSON, JQuery & ASP.NET 2.0 webforms together or is it better suited for MVC with ASP.NET 3.5 & 4.0? When incorporating JSON, should I utilize gridviews and repeaters controls for binding JSON data or should I create custom tables f ...

Finding tool for locating object names in JSON

JSON data: [ { "destination": "Hawaii", "Country": "U.S.A", "description": "...and so forth", "images": { "image": [ "hawaii1.jpg", "hawaii2.jpg", ...

The form features a "Select all" button alongside a series of checkboxes for multiple-choice options

I am facing difficulties trying to get the "Select all" and "Remove all" buttons to function properly within my form. Whenever I remove the "[]" (array) from the name attribute of the checkboxes, the JavaScript code works perfectly fine. However, since I n ...

Techniques for incorporating a variable into the value field in JavaScript

let y = data[1]; cell1.innerHTML ='<input id="text" type="text" value= "'y'"/>' ; This snippet of code does not render any content when attempting to pass the variable, but if you provide a specific value like "h", it will displa ...

Enclosing values in JavaScript literals

I apologize for the inconvenience. I am unsure why it is not functioning properly. If I input <button type="button" onclick="document.getElementById("demo").innerHTML = Date()">click</button> the above code does not work. However, if I u ...

Creating a fieldset and form in HTML code involves using

I encountered a strange issue recently. I had set up a form in HTML to send data to my PHP script, and everything was functioning correctly. However, the design looked a bit messy without margins, so I decided to make some CSS adjustments. After applying s ...

Tips for replacing all occurrences of a specific string in HTML while preserving JavaScript attributes

Is there a way to use RegEx to replace part of an HTML document without affecting the root element or other elements like event listeners? Consider this scenario: for (; document.body.innerHTML.indexOf(/ea/) != -1;) { document.body.innerHTML = docu ...

What is the process for extracting a numerical value from a text box and using it to update a database?

Trying to figure out how to add a numerical value entered into a text box to a value in a database table when the submit button is clicked. Let's say there's a table called customers in the database, with columns for name and balance. The goal i ...

Tap on the splashscreen image to start watching the embedded YouTube video

Is there a way to create the following: I would like to include an image that serves as a splash screen. When users click on this image, it will play a YouTube video in the same location (without showing the embedded player directly, but starting with a c ...

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

Performing an AJAX call in Rails 4 to update a particular value

I have a voting button on my website that displays the number of votes and adds an extra vote when clicked. I want to implement Ajax so that the page doesn't need to refresh every time a user votes. However, I am new to using Ajax with Rails and not s ...

What is the best way to position a div at the bottom of the main div?

How can I position a div with the class "boxLinks" at the bottom of the main box with the class "main-box"? Here's my idea: The main class has a width of 1200px; within this main class, there are 5 divs with each div having a width of 25%. .main- ...

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. Specifically, I included this property within the 'dat ...

``Change the color of the sections in a 3D pie chart on a Highcharts

I am looking to create a custom pie chart with two different colors: one for the main surface and another for the sides. Currently, I can only configure the lighter blue color for the main surface, but I would like to also change the darker blue color for ...

Incorrect height of div on iPhone 6 and 7 is observed when utilizing flexbox and setting the height to 100% dimensions

I'm experiencing an issue with the display on iOS devices, specifically iPhone 6 and 7. I am creating a news card layout where I set the content height to 100%. However, on these specific iPhone models, the height is being displayed incorrectly (as se ...

Ways to eliminate gaps between div elements with CSS

I am currently working on a webpage that consists of one main div housing two inner divs (left_menu and content), along with an additional footer div outside the main container. When viewing the page, there seems to be a noticeable gap between the footer ...

Steps to position images and text side by side in a grid layout

Trying to create a grid layout with profile images and text aligned next to each other, but struggling with CSS. If anyone could provide some guidance, that would be greatly appreciated! Here is the HTML code snippet: <div class="col-sm-3" ...

What is the best method for extracting one specific data point from a database table?

Currently, I am faced with a challenge in fetching data from one database table to another. Despite successfully utilizing SQL's JOIN feature for this task, I still struggle with isolating a single result from the database and showcasing it on the res ...

When using jQuery and AJAX, the functions each, if, post, and .html work properly but occasionally erase data inexplicably

I have a PHP page containing FedEx and UPS tracking numbers stored in a MySQL database, which are displayed within DIVs with the class "trackingnumber". Using JavaScript, I loop through these divs to retrieve the ID and then send it to a PHP page that fetc ...