XF 2.2 Top Navigation Drop down hover effect

oO5 Dynasty

Well-known member
I was looking to see how can I remove the clickable dropdown list that is next to applicable links in the top navbar.
Then have it as when the user hovers their mouse over the Main nav icon, the child links just automatically show.
I am trying to clean up the Navigation to have it just show the main icons. Plus it will give me more room on the navbar.
Web capture_24-5-2022_9655_user.oo5dynasty.com.jpeg
 

nocte

Well-known member
Here you'll find the CSS for "show menu on over":


I have added removal of drop-down arrows:

CSS:
@media (min-width: (@xf-responsiveWide + 1))
{
    .p-nav-list .p-navEl-link { padding-right: 15px !important; }
    
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                    
                }
                .p-navEl-splitTrigger { pointer-events: none; display: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}
 

oO5 Dynasty

Well-known member
Here you'll find the CSS for "show menu on over":


I have added removal of drop-down arrows:

CSS:
@media (min-width: (@xf-responsiveWide + 1))
{
    .p-nav-list .p-navEl-link { padding-right: 15px !important; }
   
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                   
                }
                .p-navEl-splitTrigger { pointer-events: none; display: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}
Oh my God, you are my hero! Thank you sooooooooooo much! Now my navigation is super clean! Thank you!
Web capture_24-5-2022_102252_user.oo5dynasty.com.jpeg

I Love You Reaction GIF by Warner Bros. Deutschland
 
Top