Tagged: 

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

    Hello,

    I’m trying to replicate the same behaviour of the main menu in my sub-menus..I’d like to have sub-menu items red underlined when I pass hover with mouse and color changed when clicked and active.

    This way I always know the pages where I stand-by without having to add breadcrumbs (since I have a top banner the visibility area with breadcrumbs would be too narrow).

    Any suggestions ?

    Hope to have been clear :)

    Thanks a lot,
    Mauro

    #566666

    Hey mirtao64!

    Send us a link to your page and we’ll take a look to see if there is some CSS we can give you or not.

    Cheers!
    Elliott

    #567152

    Hi Elliott,

    you can use this link to understand what I’m saying:

    if you see the submenu (the full-width menu under the banner “IL NOSTRO
    MONDO IN UN BICCHIERE”) you cannot know which page you are.

    I don’t want breadcrumbs because they narrow even more the visibility
    area, but I’d like to have the active submenu title highlighted…In
    this case it should be “*Dalla vite al vino*”

    If you see at the main menu on top of the page you can see the item
    “*Vini*” highlighted, I’d like the same behaviour on the full-width submenu.

    I hope to have been clear.

    Thanks a lot,
    Mauro

    #567156

    Hi!

    Can you please post the link to your page?

    Best regards,
    Yigit

    #567222

    Hi Yigit,

    I’ve already posted:

    http://www.heart-of-italy.com

    Regards,
    Mauro

    #567825

    Hi!

    Please add the below css in quick css

    #top .header_color .main_menu .menu ul li.current_page_item>a, #top .header_color .main_menu .menu ul li>a:hover {
        border-bottom: 1px solid red;
    }
    

    Best regards,
    Vinay

    #567840

    Hi Vinay,

    I’m sorry but it doesn’t work :(

    Mauro

    #567849

    Hi!

    Please add following code to Quick CSS

    ul.sub-menu li.current-menu-item > a > .avia-menu-text {
        color: red;
    }
    ul.sub-menu > li > a:hover > .avia-menu-text {
        border-bottom: 1px solid red;
    }

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Cheers!
    Yigit

    #568437

    Hi Ygit,

    it works only on the dropdown menu but not in the full-width menu that is always visible on top of the page…

    you can have a look at:

    Thanks a lot,
    Mauro

    #569066

    Hi!

    Please add following code to Quick CSS as well

    .av-submenu-container .current-menu-item .avia-menu-text {
        border-bottom: 1px solid red;
    }

    Cheers!
    Yigit

    #569393

    Hi Yigit!

    Now it works! I noticed that the selected item of the submenu is now red underlined…it would even better if I could have the same behaviour of the main menu, where the selected item is brown highlighted …But it is already sufficient to give the idea of the page where you stay.

    If it’s possible to have the same behaviour of the main menu just let me know…here is the web address for your check:

    http://www.heart-of-italy.com

    Thanks a lot,
    Mauro

    #569492

    Hey!

    Please add following code to Quick CSS as well

    .av-submenu-container .current-menu-item .avia-menu-text {
    color: #7c6853 !important; 
    }

    Regards,
    Yigit

    #571178

    Thank you Yigit!

    Now it works!!!

    Mauro

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Sub-menu underline and active items’ is closed to new replies.