Add underline to dropdown menu in desktop view.

This topic has 3 replies, 2 voices, and was last updated 2 years, 1 month ago by amrobertson86.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
September 25, 2022 at 7:51 am #311308

amrobertson86
Member

If you hover over “Portfolios” it has two sub pages. I would like to improve the look of the grey drop down box and add a hover underline when “Brand Portfolio” or “Portraiture Portfolio” are hovered over.

You assisted before in providing the following CSS code, which is a great help but does not give me the same thickness and colour as the other menu underlines.

@media only screen and (min-width: 75em) {

.navigation-classic .main-navigation ul ul a:hover,

.navigation-classic .main-navigation ul ul a:focus {

text-decoration: underline; }

}

For the menu underline CSS, how can I get the same thickness and colour as the other menu underlines?

text-decoration-thickness and text-decoration-color?

Hex colour is: #e54d39

September 25, 2022 at 10:49 am #311315

tikaram
Participant

@amrobertson86 : I will check for the solution and get back to you soon.

Regards,
Tikaram

September 26, 2022 at 2:12 am #311329
tikaram
Participant
@amrobertson86 : Please try adding the following additional css and let me know if it works or not.
```
.main-navigation .sub-menu a {
  display: inline-block;
  margin: 7px 0;
  max-width: max-content;
  padding: 3px 0;
  position: relative;
}
.main-navigation .sub-menu a:before {
  background-color: #E54D39;
  content: '';
  height: 2px;
  left: 0;
  position: absolute;
  top: 100%;
  transition: all 0.4s;
  width: 0%;
}
.main-navigation .sub-menu a:hover:before {
  width: 100%
}
.navigation-classic .main-navigation ul ul.sub-menu li a:hover,
.navigation-classic .main-navigation ul ul.sub-menu li a:focus {
  text-decoration: none;
}
```
Regards,
Tikaram
September 26, 2022 at 5:24 am #311337

amrobertson86
Member

@tikaram – This works perfectly. Thank you!
Author

Posts