choose exclusively the text within the elementor navigation menu

Question

choose exclusively the text within the elementor navigation menu

I've been tinkering with this issue for a few hours now.

I have a vertical Elementor navigation menu and I'd like to add a hover effect to it. So far, I can only select the entire column and apply the effect to that, not just the length of the text.

Here is how it currently looks, with the closing "brackets" always at the same width at the end of the column:

Example 1:

Example 2:

What I want is for the effect to be at the end of each menu item's text, which varies in length.

Like This:

My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - I also tried using "a" but that didn't work at all.

Thank you.

Max

html css wordpress elementor

Answer 1

Answer №1

You are unable to select only text content. The text must be contained within an HTML tag.

For instance:

div {
  color: green;
}

p {
  color: red;
}

span {
  color: blue;
}

<div>
  <p>I can be selected with p {  }</p>
  I cannot be selected as I am a text node of the root div tag.
  <span>However, I can be selected since I am enclosed in a span tag.</span>
<div>

Answer 2

You are unable to select only text content. The text must be contained within an HTML tag.

For instance:

div {
  color: green;
}

p {
  color: red;
}

span {
  color: blue;
}

<div>
  <p>I can be selected with p {  }</p>
  I cannot be selected as I am a text node of the root div tag.
  <span>However, I can be selected since I am enclosed in a span tag.</span>
<div>

Answer 3

Answer №2

A helpful addition would be a hyperlink to the corresponding website.

The issue at hand may stem from the element being styled as "display: block" or something similar, causing it to take up the full width of its container.

You could try adjusting the styling of the link to "display: inline" or "display: inline-block" so that it only takes up the necessary width, rather than stretching across the entire parent div.

Another approach could involve targeting each link as the "nth" element in a list, although a visual inspection of the webpage would likely be required since Elementor is often more complex than just being labeled as "Elementor". Your theme and any additional plugins can also impact how this should be approached.

Answer 4

A helpful addition would be a hyperlink to the corresponding website.

The issue at hand may stem from the element being styled as "display: block" or something similar, causing it to take up the full width of its container.

You could try adjusting the styling of the link to "display: inline" or "display: inline-block" so that it only takes up the necessary width, rather than stretching across the entire parent div.

Another approach could involve targeting each link as the "nth" element in a list, although a visual inspection of the webpage would likely be required since Elementor is often more complex than just being labeled as "Elementor". Your theme and any additional plugins can also impact how this should be approached.

choose exclusively the text within the elementor navigation menu

Answer №1

Answer №2

Similar questions

JavaScript: Locate the HTML Attribute that Matches an ID

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

iterative outcomes with ajax and jquery scripting in javascript

Interacting with HTML5 canvas using object events

Convert JSON data from jQuery into a modal form within a div element

Inherit margins from child elements with fixed positions

Controlling the Flow of Events in JavaScript Documents

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

What is the proper way to incorporate a hashtag (#) into a PHP parameter within a URL

Automatically switch tabs upon pressing/scanning the Return key (using PHP, MySQL, and JavaScript)

In HTML, the size and position of an <a> element cannot be altered or adjusted

Learn the technique of hovering over an image to see it blur and reveal overlay text

What is the most efficient way to convert an entire HTML page into a different language using Django?

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

failure in data transmission causing upload issues

Enable automatic scrolling when a button on the previous page has been clicked

Intermittent functionality observed with jQuery mobile swipe feature

Exploring front-end AJAX functionality within a WordPress plugin

How can I prevent the jQuery animation from moving elements by adjusting the border?

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?