Home Forums Basel support forum underline/border text on menu hover?

underline/border text on menu hover?

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #3906

    asanches
    Participant

    Hi,

    How can I underline or put a border (like 2px) when I hover the header menu? I didn’t find the menu hover customization.

    #3921

    Artem Temos
    Keymaster

    Hello,

    Thank you for your question.

    Try to add the following code snippet to the Custom CSS section in Theme Settings to add borders to your menu items

    .main-nav .menu > li > a:before {
        content: "";
        position: absolute;
        top: 60%;
        left: 13px;
        right: 13px;
        height: 2px;
        background: black;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    
    .main-nav .menu > li:hover > a:before {
        opacity: 1;
        visibility: visible;    
    }
    #4035

    asanches
    Participant

    Hi,

    unfortunately, it didn’t change anything 🙁

    #4036

    asanches
    Participant

    Can I just underline the menu when it’s hovered?

    #4041

    Artem Temos
    Keymaster

    Could you please provide your web-site link so we could take a look and see why this code isn’t working? It is difficult to help without access to your web-site.

    #4069

    asanches
    Participant

    Sure, follow the link below

    #4076

    Artem Temos
    Keymaster

    We just visited your web-site and it works for us. Could you specify what browser do you use?

    #4150

    asanches
    Participant

    Oh, sorry. It wasn’t before (i don’t know why) but now it’s working perfectly! Thank you so much! 🙂

    How can I add the same thing to the submenu?

    #4165

    Artem Temos
    Keymaster

    Try this code also

    .main-nav .menu > li > a:before,
    .main-nav .menu > li.menu-item-design-default ul li a:before {
        content: "";
        position: absolute;
        top: 60%;
        left: 13px;
        right: 13px;
        height: 2px;
        background: black;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
    .main-nav .menu > li.menu-item-design-default ul li a {
        position:relative;
    }
    .main-nav .menu > li.menu-item-design-default ul li a:before {
        top: 80%;
        left: 15px;
        right: 15px;    
    }
    .main-nav .menu > li:hover > a:before,
    .main-nav .menu > li.menu-item-design-default ul li:hover a:before {
        opacity: 1;
        visibility: visible;    
    }
    #4169

    asanches
    Participant

    Hi,

    Isn’t work this time 🙁

    I’ve tried w/ chrome and microsoft edge.

    #4176

    Artem Temos
    Keymaster

    We found that code doesn’t look as we sent it to you, please check

    #4185

    asanches
    Participant

    Oh sorry. Probably it was my mail client that changed the “>”.

    Now it’s working perfectly! Thanks again guys! You rock!!

    #4191

    Artem Temos
    Keymaster

    You are welcome, we are always happy to help you, write us when you have any difficulties or issues with our theme.

    And we would be glad if you will rate our theme with 5 stars on themeforest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

    Thank you in advance 🙂

Tagged: ,

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

The topic ‘underline/border text on menu hover?’ is closed to new replies.