The navigation buttons in Flexslider can't be seen when hovered over, accompanied by an orange box

Currently, I am incorporating FlexSlider 2 into a WordPress website.

I am facing an issue where the back and forth navigation buttons are not functioning properly. The back navigation button appears as just an orange box, and the forward navigation button looks strange.

You can view the problem by following this link:

The CSS code for the slider can be found here:

This is the script located in the header.php file:

<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
        // Primary Controls
            directionNav: true,
            animation: "slide",
            controlsContainer: ".flex-nav-container",
    });
  });
</script>

I am seeking assistance on how to rectify the appearance of the navigation buttons.

Answer №1

To enhance the appearance of your website, modify the class .flex-direction-nav li a in the stylesheet style.css by removing height, width, and text-indent attributes while adding padding:15px;. Next, update the class .flex-direction-nav a::before in flexslider.css to have display:block; instead of display:inline-block;. Additionally, adjust the width and height of .flex-direction-nav a to 40px in the same stylesheet. It's crucial to only reference the style.css once to prevent conflicting styles that may complicate troubleshooting your CSS issues.

Please notify me if this solution proves beneficial.

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

Is it possible to utilize ember-cli solely as a frontend tool, much like how we use JavaScript and jQuery?

Is it feasible to employ ember-cli exclusively as a front-end tool, similar to utilizing JavaScript and jQuery? I am interested in incorporating a reference to ember-cli in my .NET project solely for validation purposes. Is this a viable approach, and an ...

Modify the text field's color when it is in a disabled state

When the text field is disabled, I want to change its color. Below is the code I have written for enabled and disabled states. The style works correctly when the text field is enabled. const StyledTextField = styled(({ dir, ...other }) => <TextFiel ...

Tips for utilizing a for loop within an array extracted from a jQuery element for automation

I am looking to streamline the process using a for loop for an array containing 10 image files in the parameters of initialPreview and initialPreviewConfig. My envisioned solution involves the following code snippet: for (i = 0; i < 11; i++) { "< ...

SystemJS could not locate the root directory for RxJS

There seems to be an issue with SystemJS loading rxjs modules on Windows, as it throws a 404 Not Found error on the rxjs directory. This problem does not occur on OSX, and all modules are up to date. GET http://localhost:8080/node_modules/rxjs/ 404 (Not F ...

How to eliminate unnecessary space when the expansion panel is opened in material-ui

Is there a way to eliminate the additional space that appears when clicking on the second accordion in material UI? When I open the second accordion, it shifts downward, leaving a gap between it and the first accordion. Any suggestions on how to remove thi ...

Troubleshooting angular service jasmine test - unable to locate $http service

As I followed the tutorial at , I encountered an issue with the jasmine test provided. Despite simplifying the test to its core, it still fails to pass. Could someone point out where I might be going wrong? The service being tested is: var appServices = ...

Utilize jQuery to encase the final word of a paragraph within span tags

Greetings! Consider the following HTML snippet: <p>Phasellus sit amet auctor velit, ac egestas augue.</p> I am interested in enclosing the last word within span tags to achieve the following result: <p>Phasellus sit amet auctor velit, ...

Is it possible to transition to React without having a comprehensive understanding of JavaScript?

After building a foundation in JS, I am eager to delve into learning more about es6 and beyond. Would it be advisable for me to begin exploring React or Vue at this point? Since graduating recently, I have noticed that many companies value candidates who ...

How can a User Control in ASP.NET generate a new CSS class dynamically?

Within my UserControl, there is an AJAX modal popup extender that is causing me some trouble: <ajax:ModalPopupExtender ID="MPE" runat="server" TargetControlID="btnChangePassword" PopupControlID="pnlPasswordChanging" BackgroundCssClass="modalBackgrou ...

How to pass data/props to a dynamic page in NextJS?

Currently, I am facing a challenge in my NextJS project where I am struggling to pass data into dynamically generated pages. In this application, I fetch data from an Amazon S3 bucket and then map it. The fetching process works flawlessly, generating a se ...

Setting the height of the Angular UI modal relative to the height of the window

I am currently working on a modal that contains a significant amount of text. My main goal is to limit the height of the modal to the size of the window, while also adding a scrollbar to the content area positioned above the OK button. Check out the Plunk ...

Encountering an Uncaught TypeError in Reactjs: The property 'groupsData' of null is not readable

While working on a ReactJs component, I encountered an issue with two basic ajax calls to different APIs. Even though I am sure that the URLs are functioning and returning data, I keep getting the following error message: Uncaught TypeError: Cannot read p ...

The final value is always returned by jQuery's each method

Is there a way to prevent the .each() function from selecting the last value every time it runs? var items = ["item1", "item2", "item3"]; $("#list li").each(function() { var addedClass; if ($(this).hasClass("one")) { addedClass = "red"; } else ...

Is there a way to restrict the quantity of items that can be sorted in a sortable element (

I am facing an issue with a draggable element that is connected to multiple sortables using connectToSortable. My goal is to restrict the number of items allowed in each sortable container. While I can achieve this when dragging from one sortable to anothe ...

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

The requests I am sending to expressjs are not being processed asynchronously

const info = require('./randomfolder/info') app.get('/info', info.getInfo) app.listen(3000) // randomfolder/info: exports.getInfo = function(req, res) { setTimeout(function(){ res.send('example') }, 10000) } ...

Retrieving the newly inserted Id using nested queries in Express.js

I'm facing an issue with mysql nested queries in my express.js app where I am trying to retrieve the inserted id of all queries, but I am only getting the insertId of the global query. The error message I received is: TypeError: Cannot read property ...

What is the correct way to align my checkboxes with their corresponding labels?

I have been working with HTML to make some adjustments to a website. I recently got feedback to change the label of my checkbox, however, it is now overlapping with another checkbox. How can I resolve this issue? ...

Problem with stacking order in Internet Explorer 7

Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...

Angular method for monitoring element resizing detection

I'm having trouble with resizing using the UI-Calendar directive for Full Calendar. The div containing the calendar can change size based on an event, which modifies the div's class and therefore its size. However, when this occurs, the calendar ...