• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Hiding dropdown menu item

XenStyle

Active member
#1
What class or ID would I use to hide a navigation item under the responsive menu? For example, if I wanted to display:none "Resources" :

Screen Shot 2014-07-23 at 1.36.20 PM.png
 

Steve F

Well-known member
#2
There isn't a selector for the <li> in responsive. Is this something that is hidden in default view as well or only for responsive?
 

katsulynx

Well-known member
#3
There isn't a selector for the <li> in responsive. Is this something that is hidden in default view as well or only for responsive?
There is a selector for everything as long as it is an html-object, even though it may not be a perfect update-proof solution in every case.
 

XenStyle

Active member
#5
You can use this to remove the link

Code:
#NavigationHiddenMenu li:nth-child(2) { display: none; }
Change the number in red to which link you want removed. 2 = 2nd link.
This was a good suggestion, thank you! Unfortunately this won't work, as the 2nd link would be different depending on the screen width.
 

Steve F

Well-known member
#7
This was a good suggestion, thank you! Unfortunately this won't work, as the 2nd link would be different depending on the screen width.
Yea, true but there are ways :)

Code:
@media (max-width:@maxResponsiveWideWidth)
{       
        #NavigationHiddenMenu li:nth-child(4) { display: none; }
}

@media (max-width:@maxResponsiveMediumWidth)
{
        #NavigationHiddenMenu li:nth-child(3) { display: none; }
}

@media (max-width:@maxResponsiveNarrowWidth)
{
        #NavigationHiddenMenu li:nth-child(2) { display: none; }
}
Or your best bet would be to just edit the template or even the template modification adding the link.
 

XenStyle

Active member
#8
That works, but the menu order will be different depending on what page I am on. How could I edit the template for this if they are considered extra tabs? /headache