How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding another class.

Below is the code snippet:

<a class="navbar-brand py-2 anti-white" href="<?= esc_url(home_url('/')); ?>">TES</a>
<!-- The class "anti-white" is defined in style.css and cannot be accessed -->
function add_theme_scripts()
{
    wp_enqueue_style( 'style', get_stylesheet_uri() );
    wp_enqueue_style('bootstrap.min.css', get_template_directory_uri() . '/assets/css/framework/bootstrap/css/bootstrap.min.css', array( 'style'), '1.7', 'all');

    wp_enqueue_script('bootstrap.bundle.min.js', get_template_directory_uri() . '/assets/css/framework/bootstrap/js/bootstrap.bundle.min.js', array('jquery'), 1.1, true);
}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

Answer №1

Issue resolved by incorporating the use of !important in CSS.

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

What is the best way to ensure a specific section of a website remains visible and fixed at the bottom of the page

I want to set up a simple toolbar with divs and uls containing both anchors and tabs. The position of the toolbar needs to be fixed at the bottom of the page. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

Vertical centering not functioning as expected due to issues with margin-top and margin-bottom

I'm having trouble centering my red block in the middle of the webpage, with the footer block at the bottom and the white block between them. Oddly enough, margin-top doesn't seem to be working for me, but left and right are functioning fine. Al ...

Positioning absolute elements negatively in Firefox may cause unexpected behavior

I attempted to position an absolute element with a negative value, and it works perfectly in every browser except for Firefox. In Chrome, IE, or Safari, the blue handler box is correctly positioned in the middle of the top border. Is there a workaround to ...

The issue of a jQuery slider malfunctioning when using an https URL on a Wordpress website

My WowSlider is experiencing issues on the main page of my Wordpress website with https. The images in the slider are stacked statically one after another. However, when the site is accessed with http, the slider works perfectly with the expected transitio ...

Tips for rearranging the icon placement of the parent menu item on Bootstrap Navigation Bar for mobile display

I need assistance with adjusting the position of the bootstrap navigation menu bar parent menu icon, in mobile view. Currently, the menu header displays a right-arrow-down icon at the end of the header name as shown below. https://i.sstatic.net/kv4T2.png ...

"Implementing CSS inline styles for improved appearance on a Safari browser when visiting

Having some trouble using CSS to create rounded corners on my Facebook fan page. Everything works fine except for Safari browser. I've tried inline styles and a separate stylesheet, but no luck. Any help would be appreciated. My CSS for rounded corne ...

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

Bony Scaffold - halting the motion of specific components

Currently, I am utilizing skeleton to create a fluid layout, which is functioning effectively for the most part. However, I have encountered an issue specifically with the 2 column layout on Magento at this URL: In this setup, the navigation on the left s ...

The width of the menubar dynamically adjusts upon mouse hover using CSS

I encountered a problem with my menu and submenu. When I hover over the list elements in the main menu, the width of the menu items changes abruptly which looks confusing. I tried fixing the width, but then there is too much space between the menu items. ...

When the width is reduced to a certain point, the display will change to inline-block, preserving the layout structure

My goal is to maintain a two-column layout for my container boxes, even when the browser width is minimized to 600px in my fiddle. The issue arises with the CSS rule display: inline-block causing the boxes to stack into a single column. Important point: I ...

bottom of the page contains the solution

I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

Do css classes consistently provide a solution to issues with style overrides?

Would it be more beneficial to utilize css .class instead of #id to avoid issues with style overriding and importance? #content ul li a {font-size:10px} #content .demo ul li a {font-size:15px} ...

Incorporating React State into CSS Styles

Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The ...

How to minimize the amount of typing needed when specifying grid positions in CSS Grid layout?

(I am currently in the process of upgrading the design of this data entry page from a basic CSS/HTML table layout to something more advanced, utilizing CSS Grid layout). Following common conventions, I have structured it into 12 columns. Each entry field ...

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

Here's how you can combine two individual LESS files using grunt-recess

Hey there! I'm working on compiling 2 separate files using grunt recess: recess: { dist: { options: { compile: true }, files: { 'path/css/custom. ...

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

Top Tip for conditionally rendering a styled component inside or outside a wrapper, depending on the screen width

Can anyone help me with this coding question? I'm currently trying to determine the most efficient way to conditionally place the code inside or outside of the wrapper. However, I am unsure what the best practice for this would be. This process seems ...