Tips for resolving the issue with NavbarCollapse class modifying my URLs

I have a customized version of the PIXMA template for WordPress (from wrapbootstrap) and after checking Google Webmaster Tools, I noticed errors related to the .navbar-collapse class being appended to our URL. Currently, this is the line of code responsible for displaying our mobile menu:

<!-- Mobile Menu Start -->
<div class="mobile navbar-header">
   <a class="navbar-toggle" data-toggle="collapse" href=".navbar-collapse">
   <i class="fa fa-bars fa-2x"></i>
   </a> 
</div>
<!-- Mobile Menu End -->

I attempted to use "#" in the href attribute to mitigate the issue, but it caused functionality problems with the navbar on mobile devices. Does anyone have any suggestions on how to resolve this issue? The URLs on my blog posts are showing something like this:

cctv-security-surveillance-articles/monitor-employees/.navbar-collapse
htmlcsswordpresstwitter-bootstrap

Answer №1

Consider updating the href attribute to data-target in the following manner: 

<!-- Menu for Mobile Devices -->
<div class="mobile nav-header">
   <a class="nav-toggle" data-toggle="collapse" data-target=".nav-collapse">
   <i class="fa fa-bars fa-2x"></i>
   </a> 
</div>
<!-- End of Mobile Menu -->

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

Incorrect horizontal scrolling within a jQuery div container

I have implemented a plugin for horizontal scrolling on my website. You can check out the plugin here. Here is the demo link showcasing the plugin in action: However, I am encountering an issue where the pages do not scroll when the link to scroll is pla ...

javascriptjqueryhtmlcss

Regular expression to match only alphanumeric characters without any numbers at the start or end

Creating a regex pattern that only matches letters and numbers, not allowing numbers at the beginning or end: johnDoe123 is acceptable 4janeDoe is not acceptable johndoe5 is not acceptable john_doe is not acceptable Attempted solution: [a-z0-9_] Unfortu ...

javascripthtmlcssregex

What is the best way to keep a checkbox unchecked after clicking cancel?

I'm working on a bootbox script that triggers a customized alert. I need the checkbox that triggers the alert to be unchecked when the user clicks cancel. Here is the checkbox when it's checked <div class="checkbox"> <label> ...

javascriptjqueryhtmlcheckbox

The radio button is unable to be deselected within the radiogroup due to the presence of a

I have developed a customized radio button component and want to group them together. However, when I utilize a v-for loop to display multiple radio buttons, they do not deselect when another option is selected. This is the code template for my radio butt ...

htmlvue.jspug

The functionality of Jquery-chosen appears to be malfunctioning when applied to a select element

I am encountering an unusual issue with Jquery-Chosen. There is a multi-select box within a pop-up where the options are populated using an ajax call. Strangely, Jquery-Chosen does not seem to work on it. However, if I use a static multi-select box in the ...

javascriptjqueryhtmlajaxjquery-chosen

Positioning of text and links in Bootstrap 4.3.1

My content doesn't fully align within the div, and the link appears on the right instead of centered at the bottom as shown in the previous example. How can I resolve this? The non-functional section: <section class="row"> ...

htmlcsstwitter-bootstrapbootstrap-4

Detecting hidden child divs due to overflow: hidden in Angular6

Below is the particular issue I am aiming to address. <div class="row" style="overflow:hidden;"> <app-car *ngFor="let car of cars; trackBy: trackByFunction" [car]="car" > </app-car> </div> <button> ...

javascriptjquerycssangular

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...

htmlcssbootstrap-5

"Using the d-flex class with Bootstrap 4 tables does not allow them to expand to

Since the latest version of Bootstrap 4, it has become more challenging to apply classes like col-md-2 directly to the tr or td elements of a table. A possible solution is to use class="d-flex" in the parent element: <tr class="d-flex"> However, w ...

htmlcssbootstrap-4widthcolumn-width

Bugs in resizing and calculating height

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

javascriptjquerycsscross-browser

Trouble accessing Angular page after resource call was made

Seeking assistance with creating a Dispatchsystem for the local taxi company using Angular. While not an expert in Angular and its functionalities, I encountered an issue after setting up angular-route to inject html pages into the main html document and e ...

javascripthtmlangularjs

What is the method for superimposing a div with a see-through input field?

I am currently designing a compact upload feature. It consists of a responsive element (actually a vue/quasar card) that adjusts in size according to the window dimensions and viewport. Within this element, there is a form containing an input field and a ...

csshtml

Is it possible to use font-face in CSS3 to switch fonts for different languages?

Can I replace an Arabic font with a custom one using font-face in CSS3? I've successfully done it with English but I'm not sure if it's the same for foreign languages, so I wanted to check. Also, I feel silly asking this question, but I&apos ...

htmlcssfont-face

Updating a view based on a value entered prior to submitting the form in MVC/C# - a complete guide

I'm working on a simple view that displays start and end dates. My goal is to show a "Half Day" checkbox only if the start date matches the end date. So far, I've attempted to implement this feature, but the view isn't refreshing as desired ...

c#htmlasp.net-mvcmodel-view-controller

Ways to modify HTML tag content using Java

Is there a way to update HTML content within a tag using Java? Take the following example: Before: <html> <head> </head> <body> <div>text<div>**text**</div>text</div> </body> & ...

javahtmltagsjtidy

Turn off the bootstrap wysihtml5 function while utilizing sortable.js

I am facing an issue with my sortable divs that contain text areas enabled with Bootstrap WYSIHTML5. Everything works fine until I try to sort them, which results in losing the textarea contents. To solve this problem, I plan to disable the WYSIWYG on the ...

javascriptjquerytwitter-bootstrapjquery-ui-sortablewysihtml5

Implement a single CSS menu across various HTML pages

I'm currently working on developing a website. All of my pages have a common menu bar that I would like to include from a separate HTML file. Is there a way to include HTML files in order to address this concern? If so, what is the syntax for imple ...

htmlcss

Is there a way to remove a certain child category post from appearing in a parent category?

I'm having trouble with displaying related posts by category while excluding a specific category. I've tried different methods but none seem to work, and I'm not sure how else to approach this issue. <?php $categories = get_the_terms ...

javascriptphpjquerywordpress

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

javascriptjqueryhtmlcssjson

Signs that indicate you have reached the bottom of the page

Wondering how they achieve that cool effect on where the top line appears with a new logo when you scroll down? Is it done using a jQuery trick? How can you determine when a person has scrolled down a certain amount of pixels and then show them new HTML ...

javascriptjqueryhtmlcss