Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #311308
    amrobertson86
    Participant

    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

    #311315
    tikaram
    Keymaster

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

    Regards,
    Tikaram

    #311329
    tikaram
    Keymaster

    @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

    #311337
    amrobertson86
    Participant

    @tikaram – This works perfectly. Thank you!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.