Hello everyone,
I think this issue is xslt related and hoping someone can help me figure out a solution for it please. I have built a little website for a friend and i am struggling to display navigation items that i have chosen to hide from the main nav (umbracoNaviHide) when viewing it in a mobile.
The website is still being worked on but can be viewed here http://valentinetravel.co.uk/ so you can see the issue that i am experiencing (resize your browser to mobile size). When viewing all pages that are shown in the main navigation the mobile nav works fine (see below)
but when viewing one of the pages which is not a main nav item (umbracoNaviHide) the nav breaks which i think is becuase of the logic and the class i am applying in the xslt.
The pages that are hidden from the main nav are News, Privacy Policy, Sitemap, T&C’S so when viewing these i am unable to show the current page in the nav.
Here is the xslt code that i have to display the Nav items
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="level" select="1"/>
<xsl:template match="/">
<!-- start writing XSLT -->
<nav>
<!--<h2 class="hidden">Main Navigation</h2>-->
<ul>
<li>
<xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<a title="home" href="/">
<xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
<span>home</span>
</a>
</li>
<xsl:variable name="topNode" select="$currentPage/ancestor-or-self::*[@level = $level]" />
<xsl:for-each select="$topNode/*[@isDoc][not(umbracoNaviHide = 1)]">
<li>
<xsl:if test="@id = $currentPage/ancestor-or-self::*/@id">
<xsl:attribute name="class">current</xsl:attribute>
</xsl:if>
<xsl:if test="position() = last() and @id = $currentPage/ancestor-or-self::*/@id">
<xsl:attribute name="class">last current</xsl:attribute>
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:if test="@id = $currentPage/ancestor-or-self::*/@id">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
<span><xsl:value-of select="@nodeName"/></span>
</a>
</li>
</xsl:for-each>
</ul>
</nav>
</xsl:template>
</xsl:stylesheet>
and here is my css for the navigation for when the website is being viewed on small devices such as mobile
/*Nav Amends */
nav {position: relative; min-height: 40px; }
nav ul {margin: 0; padding: 0; width: 160px; padding: 5px 0; position: absolute; top: 4px; left: 0; border: solid 1px #aaa; background: #fff url(/images/media/icon-menu.png) no-repeat 10px 11px; box-shadow: 0 1px 2px rgba(0,0,0,.3); height:auto; overflow:auto;}
/* hide all <li> items */
nav ul li {display: none; margin: 0; padding:0; float:none; background:none;}
nav ul li.current {color:#C0902E; display: block; /* show only current <li> item */}
nav ul li a {color:#01184A; display: block; padding: 3px 5px 5px 32px; text-align: left; line-height:100%; text-align:initial; text-decoration:none; width:auto; background:none; }
nav ul li a span {background:none !important; height:auto;}
nav ul li.current a {background: none; color: #C0902E;}
/* on nav hover */
nav ul:hover {background-image: none; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
nav ul:hover li {display: block; margin: 0 0 5px;}
nav ul li a:hover {color:#C0902E;}
nav ul li a span {background:none;}
nav ul:hover .current {background: url(/images/media/icon-check.png) no-repeat 10px 7px;}
If you need me to explain anything else please dont hesitate to get in touch. Ive really enjoyed working on this little project but this issue has got me
Many Thanks
Paul
This is a companion discussion topic for the original entry at https://our.umbraco.com/forum/60454-displaying-hidden-nav-items-on-mobile