The Weglot country selector is not properly aligned with the rest of the content and its hover

Our Woocommerce store is now multilingual thanks to the weglot plugin. In the desktop view, we have integrated the country selector next to the shopping cart. For mobile view, we placed the HTML Widget in the header with some surrounding code:

<div class="only-mobile">
  <center>
    <small>
      <div id="weglot_here"></div>
    </small>
  </center>
</div>

.only-mobile has specific code to only display in mobile mode and not in desktop mode:

@media (min-width: 768px) { 
.only-mobile{
         display: none !important;
    }

Question 1 The ul element for the second language appears slightly lower than the first one. I tried adjusting margins, vertical alignment, and display properties directly in the code, but nothing worked due to the numerous classes. Any suggestions?

Question 2 We want to remove the blue underline hover effect on the second element. I attempted to address this with the following CSS:

.a:hover {
text-decoration: none;
color: black;
}

I applied this to .country-selector and .only-mobile with and without :hover, but the changes did not take effect. Any ideas?

htmlcsswordpresswoocommercetranslation

Answer №1

Solution for query #2

a:hover {
text-decoration: none;
color: black;
}

It is important to note that you don't include the . because you are customizing an HTML element, not a class. If you were to assign a class name to an a tag, then you would use .classname.

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

Retrieving input data from FormSubmit command

I have implemented Formsubmit to manage forms on my websites, but I do not want users to be redirected to another page when submitting the form. My website is hosted on Netlify and when I tested the forms, I did not receive the information in my email. I a ...

htmlformspostform-submitcontact-form

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

htmlcsscss-selectorshover

Issue with fluid layout in CSS - Unable to specify height in pixels and minimum height property not functioning as expected

While working on a liquid layout, I have set all my width and height values in percentages. However, during the design process, I needed to check how my CSS was rendering so I temporarily set the height in pixels. Eventually, the height in percentage wil ...

css-floatcss

Saving sortable portlet items to a database using JQuery AJAX

I've searched through numerous resources to find a solution to my problem, but none of them have been successful. Here is the code I am working with: http://plnkr.co/edit/pcfz33lzHz4wdehjGEuQ I am trying to utilize AJAX to save the order of two port ...

jqueryajaxhtmlportletjquery-ui-sortable

Using jQuery to properly align two tables

My challenge involves managing a large gridview within a scrolling container that has a fixed height. To prevent the header from scrolling along with the content, I placed the header in a separate section. This setup results in two tables - one inside the ...

jqueryasp.nethtmlcss

Ways to rejuvenate an Angular element

Last month, I was called in to rescue a website that was in chaos. After sorting out the major issues, I am now left with fixing some additional features. One of these tasks involves troubleshooting an angular code related to videos and quizzes on certain ...

javascriptjqueryhtmlangularjscanvas

What is the best way to display sanitized text on a webpage?

I have implemented express-validator in my project to sanitize and escape user input before saving it to my MongoDB database. However, when I try to store a URL in the database after sanitizing it, it gets stored as: https:&#x2F;&#x2F;www.youtube. ...

htmlnode.jsexpressexpress-validator

Employing jQuery to append a fresh hierarchy of parent divs

I'm just starting to learn jquery and I have a question about this scenario, <div id="parent"> <div class="child1">Child 1 Contents</div> <div class="child2">Child 2 Contents</div> </div> I am trying to crea ...

jqueryhtml

Having trouble with compiling SCSS code

While diving into the world of SCSS, I decided to compile my SCSS into CSS using npm. So I entered npm run compile: sass as defined in my package.json as follows: "scripts": { "compile:sass": "node-sass sass/main.scss css/style ...

cssjsonnpmcmdsass

Implementing Checkbox Functionality within a Dropdown Menu using AngularJS or JavaScript

I am interested in finding a multi-select checkbox solution similar to the one demonstrated here: Instead of using jQuery, I would prefer options in AngularJS or pure JavaScript. Does such a solution already exist in these frameworks, or is there guidance ...

javascripthtmlangularjscheckboxcheckboxlist

When I try to call jQuery's getScript function, the callback does not execute as expected within

When I invoke the script in a function at runtime function CheckOutMyFace() { $.getScript("/scripts/jtimers.js", function (data) { }); }; I notice in Firebug that the script is being called every time the function is invoked, but for some reason the ...

htmlcss

Tips on elevating a dragged div above all other elements when utilizing two scrollbars

Currently, I have two horizontal scrollers where I need to drag a div from the upper scroller to the lower scroller. While this functionality is working properly, there is an issue with the dragged div getting lost under the borders of the scroller during ...

javascriptjqueryhtmlcssscroller

The navigation bar on the web app is functioning properly on Android devices but experiencing a CSS problem on

My Nextjs web app includes a navbar with a hamburger menu, logo, and avatar. The navbar functions perfectly on desktop in Chrome, Mozilla, Brave (in developer tools mobile mode), and on Android phones using Chrome. However, when accessed from an iPhone X, ...

htmlcssiosreactjsnext.js

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

Transform the prototype method into jQuery functionality

After finding this function online and testing it, I realized that it works fine on its own. However, the rest of my document consists of jQuery functions, so I would like to convert this one to jQuery as well. Additionally, I have encountered errors when ...

jqueryfunctionprototypejstranslation

Create a dynamic menu dropdown with absolute positioning using React

I recently made the transition to React and now I am in the process of converting my old vanillaJS website into ReactJS. One issue I am facing is with a button that is supposed to trigger the opening of a dropdown menu. <button type="button&qu ...

javascriptcssreactjsnext.js

What could be causing my "onChange" function to not work as expected?

export function UpdateData(props){ return( <div> <div className='updateForm'> <form> <div className="form-group"> <label>Your ID:& ...

javascripthtmlreactjs

Alert appearing before the user navigates back using the browser button

Is there a way to display a message to the user before they navigate away from the app by clicking the back button in their browser? In my app, I've disabled the ability for users to go back using the browser's buttons and instead provided intern ...

htmlangularnavigation

Puzzling blank area found beneath the form component

There seems to be some extra space at the bottom of a form when it's placed inside a div. How can we remove that unwanted space? In examples from stack overflow, the extra space is not visible in the code snippets provided. However, it appears elsewh ...

htmlcssformsspacing

Utilizing two distinct CSS frameworks within a single Rails application

At the moment, I have an application with its frontend built using Bootstrap 3 (leveraging the bootstrap-rails gem). Now, I am looking to incorporate the Materialize.css framework into the same app. After downloading the Materialize.css stylesheet, my conc ...

htmlcssruby-on-railstwitter-bootstrapasset-pipeline