AdBlock causing image display issue in Firefox with bootstrap and Wordpress

My Wordpress + Bootstrap code is not displaying images in Firefox, despite working fine in other browsers. I tried disabling ad-block as suggested on SO, but it didn't help. I'm stuck.

Here's the HTML snippet:

<div class="navbar-collapse collapse ">
  <ul class="nav navbar-nav">
    <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-12 active"><a title="Home" href="/">Home</a>
    </li>
    <li id="menu-item-87" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-87"><a title="Carriers" href="/our-carriers/">Carriers</a>
    </li>
    <li id="menu-item-86" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-86"><a title="Our Story" href="/our-story/">Our Story</a>
    </li>
    <li id="menu-item-121" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-121"><a title="Employees" href="/employees/">Employees</a>
    </li>
    <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a title="Contact Us" href="/contact-us/">Contact Us</a>
    </li>
    <li class="menu-item">
      <div class="col-fb">
        <a href="https://www.facebook.com/pages/xxxxx">
          <img class="like_us" src="xxxxx/wp-content/themes/xxx_Theme/images/fb_like.png" alt="Like AIG on Facebook" />
        </a>
      </div>
    </li>
  </ul>
</div>

I've also added CSS to try and force display of the images with no success. Here's the relevant CSS:

.navbar-brand {
  line-height: 1px !important;
  margin: 0 !important;
  padding: 3px 15px
}
#nav,
.navbar {
  border: 0;
  position: relative;
  height: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 24px;
}
.nav-header ul {
  min-height: 300px;
  background: #3f4646;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
... //CSS continues here

The inspector in Firefox shows a random class added to the image instead of the expected 'fb_like' class: cprflzcqqyowaemjgtdl

Any suggestions for fixing this issue or overriding the AdBlock problem?

EDIT: It seems to be caused by AdBlock, so I need a solution that doesn't involve disabling it.

htmlcsswordpressfirefoxtwitter-bootstrap-3

Answer №1

After some trial and error, I managed to find the solution on my own.

I decided to tackle the issue by replacing all elements related to Facebook, starting with the link where I used a bit.ly redirection. However, that didn't solve the problem. Next, I changed the alt attribute, but still no luck. Finally, I swapped every occurrence of fb* with fk*, and voila!, AdBlock failed to block it, allowing the image to display correctly. For those facing a similar predicament, here is the modified code snippet involving WP Nav Walker and Bootstrap:

<?php
$fblike = get_template_directory_uri();
wp_nav_menu( array(
'menu'              => 'primary',
'depth'             => 2,
'container'         => 'div',
'container_class'   => 'navbar-collapse collapse ',
'items_wrap'        => '<ul class="nav navbar-nav">%3$s<li class="menu-item"><div class="col-fk"><a href="http://on.fb.me/xxxxxx"><img class="like_us" src="'.$fblike.'/images/fk_like.png" alt="" /></a></div></li></ul>',
'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
'walker'            => new wp_bootstrap_navwalker())
);
?>

It may seem like a trivial workaround, but sometimes these unconventional methods are what get the job done. Hopefully, this solution proves helpful to others encountering the same issue.

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

Tips on applying a class to a host element using @hostbinding in Angular 2

I've been wanting to assign a class to the host element of my component, and initially I used the host property in this manner: @Component({ selector: 'left-bar', host: { 'class': 'left-bar' }, templateUrl: 'a ...

csstypescriptangular

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

I need assistance with my code. I'm trying to draw an image on the canvas while maintaining its quality. const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); canvas.width = 360px; canvas.height = 360px; const img ...

javascripthtmlcsscanvas

Tips for customizing the appearance of a jQuery sortable target list prior to dropping items

When using jquery sortable, I am able to customize a placeholder inside a connected list specified in the connectWith option to visualize where the content will be dropped. However, I am struggling to find a way to style the actual list that contains the p ...

javascriptjqueryhtmlcssjquery-ui-sortable

Challenges arise when utilizing CSS3 animations in conjunction with transitions triggered by toggling a JavaScript class

Struggling to activate an animation while updating a class using JavaScript for a PhoneGap app. Planning on utilizing -webkit- prefixes for compatibility. However, the animations are currently unresponsive in Chrome during testing, both when applied to th ...

javascripthtmlcsscordova

Integrating CSS with Material-UI in a React project: A step-by-step guide

I am currently developing a project using React (along with TypeScript) and the Material-UI library. One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came acr ...

javascriptcssreactjsmaterial-ui

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

jqueryhtmlcss

Using Jquery to Bind Multiple Events

As a novice in jquery, I have been trying to develop a search function that functions properly without any issues, until I introduced the select element. Can you please help me identify where I might be going wrong? $(function () { $('#keresomezo&apo ...

jqueryhtml

Creating a border with tabs and a triangle using CSS

I'm having trouble getting my HTML/CSS tabs to look like the ones in the image. I've experimented with border-radius but haven't been able to achieve the desired result. Can anyone provide guidance on how to replicate these tabs using only ...

cssbordercss-shapes

Unforeseen rotation happening in CSS animation

I find myself struggling with my math skills from junior high. My goal is to rotate two divs around the Y axis in opposite directions. I have set up two animations for this purpose: @-webkit-keyframes first{ 0% { -webkit-transform: rotateY(0); } ...

csscss-animations

Randomly switch out the wordpress header image at designated intervals

I have a custom header image on my website that displays 6 random images each time the site is visited. I am attempting to change this group of images while the user is browsing my site. Here is the code I am using: function show_banner(){ document.ge ...

javascriptphphtmlcsswordpress

HTML - Table Layout Overlap

I'm struggling with a table layout issue in HTML and could use some assistance. The table below is displaying as overlapping in IE (please refer to the image), but it appears correctly in FF. Can anyone offer some guidance? <div> <table> ...

htmlcss

Applying a CSS style to a division element

Can I modify the style attribute of a div element using JavaScript? <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div> I am interested in achieving the following: Changing th ...

javascripthtml

width restriction to only accommodate on two lines

Whether my text is short or long, I always want to ensure that it remains within two lines by defining the width of my div. Short Text +-------------------------+ | Short text goes here | | Short text goes here | +---------------------- ...

jquerycss

Video player for Angular 2

Hey there! I am currently exploring Angular 2 and attempting to create a video playlist feature. My goal is to showcase my favorite videos in a table layout, where clicking on a row will lead to the playback of the selected video. Right now, I am passing t ...

javascripthtmlangular

Can HTML tags be utilized in swipeable pages?

Currently, I am developing an Android app that incorporates swipe screen functionality. To achieve this, I followed a tutorial which can be found at the following link: http://developer.android.com/training/animation/screen-slide.html#fragment My goal is ...

androidhtmlandroid-fragmentsandroid-viewpager

Resetting the "clear: both" property for the nth-child element when multiple nth-child elements are being inherited

Currently utilizing CSS (specifically SCSS) to style the same element on various media sizes - A, B, and C. Utilizing the following for A: &:nth-of-type(2n+1) { clear: both; } For B: &:nth-of-type(3n+1) { clear: both; } Finally, for C: ...

csssasscss-selectors

Achieving a function call within a Backbone view in Backbone.js

Is it possible to call the plotPort function from the plotLoc function using this.plotPort() instead of self.plotPort()? It seems to not work for Internet Explorer when using self.plotPort(). As a workaround, I added an event to lLoca upon reset to call ...

javascriptjqueryhtmlbackbone.js

Navigating Struts - The art of breaking free from encoded symbols in a text field

I'm having trouble displaying the trademark symbol in a default text within a Struts text field. Despite trying various methods, the symbol does not appear and only outputs the code instead. Can someone please provide guidance on how to properly displ ...

htmlstruts2placeholderhtml-escape-characters

Trouble getting CSS and Javascript to bind when dynamically appending HTML elements

Attempting to dynamically bind HTML from an Angular controller SkillsApp.controller('homeController', function ($scope, $http, $q, $timeout) { $scope.getAllCategories = function () { $http({ url: "/Categories/GetAllCategories", ...

javascriptjqueryhtmlcssangularjs

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

htmlcssbootstrap-4thymeleaf