Revamping the navbar hover effect icon

Question

Revamping the navbar hover effect icon

I am currently working on customizing the navigation bar on my website. I have created a code snippet that adds a small '+' sign next to any link that has sub-options. When the user hovers over the link, the '+' sign changes to a '-' and reveals the sub-options in a dropdown menu. However, I want to change this functionality to display a static yellow 'v' shape next to the link, regardless of whether the user hovers over it or not. I am not sure how to achieve this.

The code snippet I have is quite lengthy, and I believe the key lies in the a:before and a:after sections of the CSS. I am uncertain about the specific changes I need to make. Any guidance or assistance on this matter would be greatly appreciated.

html css

Answer 1

Answer №1

What appears to be a + or - symbol is actually a visual illusion created by overlaying two slim lines, one vertical and one horizontal. The code responsible for this effect is as follows:

#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

To resolve this issue, you should update the code to something like this:

#cssmenu > ul > li.has-sub > a:after {
   /*you don't need this style anymore */
}
#cssmenu > ul > li.has-sub > a:before {
      position: absolute;
      top: 19px;
      right: 14px;
      display: block;
      width: 16px;
      height: 16px;
      background: url([insert path to your yellow triangle icon image]) no-repeat;
      content: '';
    }

Additionally, you should remove the dynamic behavior mentioned, which seems to be on line 91 of your code example.

Answer 2

What appears to be a + or - symbol is actually a visual illusion created by overlaying two slim lines, one vertical and one horizontal. The code responsible for this effect is as follows:

#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}

To resolve this issue, you should update the code to something like this:

#cssmenu > ul > li.has-sub > a:after {
   /*you don't need this style anymore */
}
#cssmenu > ul > li.has-sub > a:before {
      position: absolute;
      top: 19px;
      right: 14px;
      display: block;
      width: 16px;
      height: 16px;
      background: url([insert path to your yellow triangle icon image]) no-repeat;
      content: '';
    }

Additionally, you should remove the dynamic behavior mentioned, which seems to be on line 91 of your code example.

Revamping the navbar hover effect icon

Answer №1

Similar questions

Interpolation problem with AngularJS translation service

What might be causing the jQuery UI Spinner arrow buttons to not appear?

Inserting Multiple Inputs

Tips for positioning elements within an ng-repeat list using absolute positioning?

Creating an HTML table with multiple styled images is a simple process that can greatly enhance the

"Animating a card to slide in from the left side upon clicking a button in a React app

excess margin running along the left side of each page

HTML 5 functions properly when loaded directly as a .html file, but encounters issues when hosted on either a Django or Node

Stop the button event from triggering

Every time I try to access my website, all I see is the WordPress installation process page

How can we prevent the text from shifting when the border width is adjusted

The concept of CSS Parent Elements refers to the relationship

Adjusting the arrangement of div elements based on screen dimensions or orientation within an Ionic grid system

What is the best way to download a modified canvas with filters using the solutions from stackoverflow?

Is there a way to view an HTML file in a separate window for preview?

The height and alignment of the <a> tag and <p> element vary within a flex container

What is the best way to display three arrays in a single table, with each array occupying its own column?

When working with TextareaAutosize component in MUI, an issue surfaces where you need to click on the textarea again after entering each character

Activating events with Jquery

Trouble with Displaying Table Outside of Div in Internet Explorer