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

CSS styling not functioning properly

Redirecting files from the file system to the emulator is not functioning properly

Validating HTML Forms Using PHP

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

Decrease the gap between rows in CSS Grid

The intricate dance between JAVA and HTML

Troubleshooting Compatibility Issues: JavaScript Function Works in Chrome but not in Internet

When the mouse hovers over the slider, the final image jumps into view

displaying the information when we mouse over a specific row in the table

Unable to conceal HTML5 video in mobile devices through media query

Adjust the color of the active link on the page using Angular and CSS

Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

The landscape orientation media query does not adhere to the specified maximum width

css Repaint the CSS by filtering out list items with odd indexes

The Material UI - makeStyles function is having difficulties generating the intended styles

Adjust link when scrolling through the webpage

Is it possible for Penthouse to retrieve critical CSS while using javascript?

The straightforward use of XMLHttpRequest to retrieve the response xhttp.responseText is not functioning properly

Executing Python code through a website using PHP - is there a way to deactivate the button once it has been clicked?

The Ultimate WordPress AJAX Plugin Boilerplate