Return to previous page

Line under Menu behind text - by Esbyz - on WordPress WooCommerce support

This topic has 4 replies, 3 voices, and was last updated 4 years, 2 months ago ago by Olga Barlow

  • Avatar: Esbyz
    Esbyz
    Participant
    August 26, 2020 at 14:24

    Hello,
    is it possible to move the line behind the text and make it like this: https://prnt.sc/u68bpp

    Right now it looks like this: https://prnt.sc/u68bxl

    Hope for an answer. Thanks!

    #249434 Copied Theme version: 6.3.9 WooCommerce version: latest
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    August 26, 2020 at 14:30

    Hello,

    Try to add the next code in Theme Options > Theme Custom CSS:

    .menu-items-underline .menu>li>a:before {
    bottom: 9px;
    height: 3px;
    opacity: .5;
}

    Regards

    #249437 Copied
    Avatar: Esbyz
    Esbyz
    Participant
    August 26, 2020 at 15:01

    Thank you for your answer Rose, but i want the line behind the text, not with opacity. That does not seem to look good with the method you provided. Any solution?

    Thanks.

    #249444 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    August 26, 2020 at 17:52

    Hello,

    Then try the code below

    .header-main-menu.et_element-top-level .menu > .current-menu-item > a:after, 
.menu-items-underline .menu>li>a:hover:after {
    border-top: 4px solid #b2f2f9;
    content: "";
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    width: 95%;
    z-index: -1;
}
.header-main-menu.et_element-top-level .menu > li > a {
    z-index: 1;
}
.menu-items-underline .menu>li>a:before {
    display:none;
}

    Regards

    #249492 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Classic Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WordPress WooCommerce Theme
lazy-placeholder
Niche Market 02 – Multivendor WP WooCommerce Theme
lazy-placeholder
Organic Store – WordPress WooCommerce Theme
lazy-placeholder
Marseille 02 – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 02 – WordPress WooCommerce Theme
lazy-placeholder
Furniture Store – WooCommerce Theme
lazy-placeholder
Rental Car – WordPress WooCommerce Theme
lazy-placeholder
Handmade Store – WordPress WooCommerce Theme
lazy-placeholder
Corporate – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.