Subpage issue with Bootstrap dropdown menu functionality

I have utilized bootstrap to create a dropdown menu. The primary item is a link that functions properly on the homepage, but not on the subpage.

Check out my code snippet here: 

<li>
  <a href="/preview/#design-centre" class="dropdown-toggle scroll" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu">
    <li><a href="/preview/#design-centre">Overview</a></li>
    <li><a href="/preview/design-centre.php?action=video-testimonials">Video Testimonials</a></li>
    <li><a href="/preview/design-centre.php?action=meet-the-team">Meet The Team</a></li>
    <li><a href="/preview/design-centre.php?action=faq">FAQ</a></li>
    <li><a href="/preview/design-centre.php?action=contact-us">Contact Us</a></li>
  </ul>
</li>

Upon clicking on Design Centre, it does not respond on a subpage, however, it works fine on the homepage. All other links in the navigation menu function correctly except for the dropdown menus.

jquerycsstwitter-bootstrap

Answer №1

This should work perfectly fine. What you are attempting to achieve is not related to Bootstrap specifically, but rather using anchor links to navigate within a document and to fragments of another document. This is all standard HTML markup.

The fragment identifier refers to a specific location within a resource.

If the links work individually, they should work in your code without any issues.

Here are some potential factors that may cause problems:

  • If you are utilizing relative URLs, the address may change depending on the current navigation level. However, since you are starting the href address with a slash, this does not seem to be the case for you.

  • You can attempt to modify the following line:

    <li><a href="/preview/#design-centre">Overview</a></li>

    To this (assuming your root page is index.html):

    <li><a href="/preview/index.html#design-centre">Overview</a></li>

    Although the page might be inferred by your asset pipeline, being explicit is usually more reliable.

Check out a functional example in plunker

And here's an active version showcasing a main page and subpage with operational fragments

If the issue persists, additional information would be necessary for further diagnosis. If the problem persists, consider forking the plunker and incorporating any changes that illustrate the issue clearly.

Answer №2

Before troubleshooting further, ensure that the source code of the malfunctioning page contains an element with the id "design-centre". This element is typically represented by an anchor tag <a>, sometimes accompanied by the name attribute. However, it is likely that this element is missing on the problematic page but present on the homepage. The purpose of this element is to enable in-page navigation. When a link with a hash (#) at the end is clicked, the browser locates an element with a corresponding id and scrolls the viewport to bring it into view.

Answer №3

check out this jsfiddle link

<li class="dropdown">
    <a href="/preview/#design-centre" class="dropdown-toggle disabled" 
 data-toggle="dropdown" data-hover="dropdown">
Design Centre <i class="fa fa-angle-down"></i>
</a>
<ul class="menulist dropdown-menu" role="menu">
<li><a href="/preview/#design-centre">Overview</a></li>  
</ul>
</li>

Answer №4

When dealing with a dropdown menu, it is not necessary to include an href attribute in the anchor tag.

You can simply use a # as the value for the href attribute.

Here is the revised code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul style="position:relative">
<li>
  <a href="#" class="dropdown-toggle scroll" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu">
    <li><a href="/preview/#design-centre">Overview</a></li>
    <li><a href="/preview/design-centre.php?action=video-testimonials">Video Testimonials</a></li>
    <li><a href="/preview/design-centre.php?action=meet-the-team">Meet The Team</a></li>
    <li><a href="/preview/design-centre.php?action=faq">FAQ</a></li>
    <li><a href="/preview/design-centre.php?action=contact-us">Contact Us</a></li>
  </ul>
</li></ul>

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

Adjust the div container to wrap underneath the image if the webpage width decreases

Hello there, I am currently in the process of creating my own portfolio. I have a brief introduction that I would like to display next to an image of myself, with the image positioned on the right side. I have a div called "container" which contains anoth ...

htmlcss

Is it possible to use Highcharts in AngularJs without jQuery?

Is there a way to use Highcharts without relying on the full jQuery library? The current popular option seems to require jQuery, but I'm having trouble getting it to work without it: https://github.com/pablojim/highcharts-ng Can I develop a Highchart ...

jqueryangularjshighcharts

Guide on navigating the mouse pointer to an element using Selenium and nodejs

Currently, I am developing with nodejs and have incorporated the selenium module. However, I am facing an issue where I need to click on a button by moving the mouse pointer to the element location. Can someone please advise me on how to use ActionSequence ...

jquerynode.jsseleniumselenium-webdriverselenium-rc

It is not possible to modify the appearance of visited :before pseudo-elements

After attempting to enhance the appearance of visited links with various effects, I encountered an issue. Below is the code snippet in question: It seems that only Opera browser is able to modify the content of the :before pseudo-elements successfully. O ...

csspseudo-elementcss-content

Modify Full Calendar div with jQuery after a delay of 5 seconds

I'm currently working with jQuery and have a setup with 3 calendars (using jQuery fullCalendar). My goal is to cycle through these calendars one by one every 5 seconds. I've tried various techniques within the setInterval function but haven' ...

jqueryhtmlajaxfullcalendar

Change in navigation bar appearance on scroll down

I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...

css

The size of the table and the ability to scroll cannot be adjusted

<div id="answer3" class="tab-pane"> <div class="col-md-12" style="background-color:rgba(68, 70, 79,0.4);padding-left:50px;padding-top:5px;border-radius:5px;height:100%;"> <h3>KEYBOARD SHORTCUT INFO</h3>< ...

htmlcss

Challenges encountered while using JQuery Validation for a form submission for the second time (JQuery Steps)

Currently, I am implementing JQuery Steps for the registration form on my website. The registration process involves three steps: Personal > Company > Confirm. I have configured the form to display error messages in the "placeholder" if a textbox is ...

jqueryajaxasp.net-mvcjquery-plugins

Tips for concealing overflowing CSS content

How can I prevent CSS content from overflowing? I am trying to display a price tag in the CSS element, but it is protruding out of my card. .content{ content:''; position: absolute; left: 309px; ...

htmlcss

Is it possible to incorporate personalized JavaScript alongside bootstrap?

Just recently started using bootstrap and was curious about something. Can custom JavaScript be integrated with bootstrap buttons without any additional adjustments? ...

javascripthtmlcssbootstrap-4

What is the best way to add <li> elements dynamically in an AngularJS application?

I am dealing with html code similar to this: <ul class="list"> <div ng-repeat="avis in avisData"> <li id="li"> <a class="item item-thumbnail-left" href=""><img src=data:image/jpeg;base64,{{avis.image ...

javascriptjqueryangularjsionic-framework

Menu selection without javascript

Recently, I encountered an issue with a menu containing tabs. When hovering over a tab, a list of items appears at the bottom of the tab. However, I decided that I wanted this list to transition downwards instead of simply appearing (previously set as disp ...

htmlcssmenu

Executing a $.get() request in .Net MVC without relying on a controller

In .Net MVC, if I were to utilize the JQuery .get() method for fetching a file from the server, would it still be necessary for me to create a RenderAction within a controller method to display its contents? Here's an example implementation in JQuery: ...

jqueryasp.net-mvcasp.net-mvc-4

The issue of infinite scroll functionality not functioning properly when using both Will Paginate and Masonry

I'm having trouble getting the Infinite Scroll feature to work on my website. I've successfully implemented Masonry and Will Paginate, but for some reason, the Infinite Scroll isn't functioning as expected. I suspect that the issue lies wit ...

javascriptjquerywill-paginatejquery-masonryinfinite-scroll

The height of the webpage is extended when viewed on mobile Safari

After creating a website that functions smoothly on all platforms, I encountered a problem with mobile Safari. On this browser, the page height is inexplicably stretched and the page becomes unresponsive after the first click. html,body { height:100%; ...

htmlioscssiphonemobile-safari

Using jQuery Ajax to transmit and receive an array

When trying to pass an array from main.html to test.php and receive another array back, I encountered issues. Can someone please assist me with this problem? Main.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

jqueryajaxarrays

The autocomplete attribute is not compatible with GroceryCrud functionality

I attempted to implement the autocomplete feature using an example from w3schools. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_form_autocomplete Although I used jQuery to modify the form and add autocomplete="on" to both the form and input ...

jqueryhtmlautocompletegrocery-crud

Is there a way to disable dates prior to a specific start date in the Bootstrap 4 date picker?

It's important to clarify that I am familiar with setting the startDate. My current challenge lies in trying to gray out dates prior to the selected startDate and also changing the cursor on the datepicker to a pointer. Despite hearing that bootstrap ...

jqueryhtmlbootstrap-4datepicker

GlideJS is experiencing a flashing issue on the first slide

Is anyone else experiencing a flashing issue when changing slides in the slider periodically? Specifically, the first slide flashes when transitioning from the first to the last slide. This bug seems to be isolated to Chrome only. Interestingly, I've ...

javascripthtmlcsscss-animationsglidejs

Obtaining a date and time in PHP from a JavaScript array

I am currently working on implementing a JQuery datetime picker and my goal is to save the selected date and time into a PHP variable for storage in a MySQL database. Despite browsing through various examples, none of them seem to be effective in achieving ...

javascriptphpjquerymysql