Hi Paul

It has nothing to do with your XSLT file. It is related purely to CSS. It's because you have display:none on your li when styling it on the mobile breakpoint

Search for media="screen and (max-width: 568px) and (min-width: 320px) and then look for

nav ul li{
display: none;
margin: 0;
padding: 0;
float: none;
background: none;
}

If you remove "display: none" from the above rule then it shows fine on the news page.

Hope this helps.

/Jan

Hi Jan,

Thanks for you quick response.

I have had just tried what you suggested but i had no luck (unless i did something wrong?). Have you been able to debug and get it working?

Before i wrote the post my thinking behind this (which may be completely wrong) was i have written my xslt so that it never displays pages that are checked with umbracoNaviHide in the main navigation so regardless of what styles that i apply the news page is never displayed in the nav because i have decided to hide it - This means that the .current class to display any page that is checked to not be shown in the main nav will not be applied and therfore when the user is on a page that is not a main nav item it will not be shown.

<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>  

Hope this makes sense - I have been looking at this for way to long and may be overthinking

Many thanks

Paul

Hi Paul

Since it does not seem like you rely on any device detection service like wurl or 51degrees it can't be the XSLT file since that would also hide those nodes from the desktop viewing then.

All you do is change the way the site is represented depending on the screen real estate.

What I did before was the following

1: Emulate an iPhone device using the chrome dev tools 2: Go to the "News" page 3: Inspect the weird looking main navigation 4: Noticed that the pages are rendered in the li element by using the inspector tool in chrome 5: Had a look at the styling for the li elements and noticed that at the breakpoint mentioned above it said "display:none".

It seems you have a general rule that is saying that all li items nested under ul nested under nav should be hidden. So perhaps you have some other navigation that you intend to hide but it might be a good idea to add a class name to the different

Hi Paul

Sorry, forget all about what I wrote above in my two previous posts! I'm wrong...it's because the "current" class is missing when rendering the navigation on the "news" page.

High 5 I suck!

I'll go over you XSLT examples again when I've had some lunch unless someone else beats me to it.

/Jan

Hi Jan,

No worries mate thanks for looking, Thats what i was trying to say in my above post but think i didnt explain it very well. I think i need some logic to say if the current page is not a main nav item then display it in the nav. I think you can apply the current class too.

Cheers

Paul

Hi Paul

Yeah, I'm a bit puzzled as to why the "current" class is not set when you're at a page that does not render in the main menu since all you say is that you want to display all topnodes, that are not hidden and that's also what happens. The nodes are rendering just fine but the class is just not set.

Could you try changing this

        <xsl:if test="@id = $currentPage/ancestor-or-self::*/@id">
                <xsl:attribute name="class">current</xsl:attribute>
         </xsl:if>

to this

        <xsl:if test="@id = current()/@id">
                <xsl:attribute name="class">current</xsl:attribute>
         </xsl:if> 

Unfortunately I'm a bit rusty - It's been a while since I have written XSLT :-/ So no guarantees it will work.

/Jan

Hi Jan,

Thanks for looking into this, Ill be honest im very much a newb with xslt and just manage to get by at the moment but from my understanding the .current class is not being applied to any page that has a value equal to umbracoNaviHide=1 because of this line here

we are basically saying only list any page that is not equal to umbracoNaviHide = 1 (Home, About us Our services etc..) and then once we have listed each page then apply the the current li item with an attribute of class .current. Because we are never listing out pages that are equal to umbracoNaviHide = 1 then they wont appear in the navigation regardless if the .current class is applied or not.

This is why i thought i needed to extend my xslt somehow?

Thats my understand and Hope that makes sense?

Ps i tried your solution but no luck sorry.

Thanks again

Paul

Hi Paul

In short your top menu is rendering fine. That culprit is why the "current" class is not set when visiting a page that is hidden from the navigation.

It should render the same regardless whether the page is hidden from main navigation or not.

Did you try my example from above? :) If that does not work then try removing the xsl:if statement - Now the "current" class should be applied to all li elements and it should be visible no matter the page you're visiting - right? If so then it's just a matter of figuring out how to set the "current" class.

/Jan

Hi Jan,

Sorry i had to nip out.

Yes i have tried your above suggestion and i did not have much luck with it sorry. if i remove the [not(umbracoNaviHide = 1)] from the for each statement then it works as it should but there is still a problem here because when viewing the website in a browser although you can only see the nav items that i want

• Home
• About us
• Our Services
• Our Drivers
• Contact us

The other nav items such as news, privacy, sitemap, t&c's etc are there but are being hidden because of the styling which is not the best approach.

This little issue seems to have go me lol

Thanks for your help so far Jan

Paul

Hi Paul

Ok, so the menu renders correctly now? But now the bottom items are being hidden? Is that correct?

How are you rendering those? What does the code for that look like?

/Jan

Hi Jan,

The menu renders with every single level 1 node inside it which is not what i want. it basically looks like this now on hover but now shows the current page.

On hover

on current page

the code is exactly the same as above with the following taken out of the for each loop [not(umbracoNaviHide = 1)].

Many thanks

Paul

I think i will just have to leave it hacked for now until i find a solution. Not ideal hiding the nav items when viewing on a browser but its the only way i can get the nav working when viewing on a mobile device.

Thanks for all your help

Paul

Hi Paul,

To get this to work, you need to think differently - you're using umbracoNaviHide to hide stuff from the main nav - but at the same time, you want to be able to highlight those items on a mobile device... but if they're not in the nav, you can't show them.

To me, umbracoNaviHide has always meant: "Don't ever show this in navigations, RSS feeds, or searches" - so I wouldn't use that property for this. I'd do this:

• Add a showInFooterNav property to pages
• When rendering the main nav, put a .mobileOnly CSS class on all pages with the showInFooterNav checked
• Only allow those to be visible in the main nav when they have the .mobileOnly class (and they're shown on a mobile device, of course :-)

(Presuming I've understood the problem correctly, of course):

<xsl:param name="currentPage" />
<xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />

<xsl:template match="/">
    <xsl:variable name="onHomePage" select="$currentPage/@id = $siteRoot/@id" />
    <nav>
        <ul>
            <!-- Home node -->
            <li>
                <xsl:if test="$onHomePage"><xsl:attribute name="class">current</xsl:attribute></xsl:if>
                <a href="/" title="Home">
                    <xsl:if test="$onHomePage"><xsl:attribute name="class">selected</xsl:attribute></xsl:if>
                    <span>Home</span>
                </a>
            </li>

            <!-- Doing this in two "sets" to set the `.last` class correctly -->
            <!-- 1. Normal pages for main nav -->
            <xsl:apply-templates select="$siteRoot/*[@isDoc][not(umbracoNaviHide = 1)][not(showInFooterNav = 1)]" />

            <!-- 2. Add extra pages for the mobile nav -->
            <xsl:apply-templates select="$siteRoot/*[@isDoc][showInFooterNav = 1]" />
        </ul>
    </nav>
</xsl:template>

<!-- Generic template for nav items -->
<xsl:template match="*[@isDoc]">
    <xsl:variable name="inPath" select="descendant-or-self::*[@id = $currentPage/@id]" />
    <xsl:variable name="isLast" select="position() = last()" />
    <xsl:variable name="liClass">
        <xsl:if test="showInFooterNav = 1">mobileOny </xsl:if>
        <xsl:if test="$inPath">current </xsl:if>
        <xsl:if test="$isLast">last</xsl:if>
    </xsl:variable>
    <li>
        <xsl:if test="normalize-space($liClass)">
            <xsl:attribute name="class"><xsl:value-of select="normalize-space($liClass)" /></xsl:attribute>
        </xsl:if>
        <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:if test="$inPath"><xsl:attribute name="class">selected</xsl:attribute></xsl:if>
            <span><xsl:value-of select="@nodeName" /></span>
        </a>
    </li>
</xsl:template>

This requires that your "mobile only" items can be placed last (or first) in the mobile nav. Otherwise, the .last class takes some more work to figure out correctly :-)

Ask away about anything in there you'd like to have explained better!

/Chriztian

Hi Chriztian,

I have been looking at this and i think that i am on the right lines now with the new xslt you provided. Im still working away at it at the minute though.

Ive marked the wrong post as solved how do i undo this so i can mark your post as solved please?

Cheers

Paul

Hi Paul,

I don't think you can change that when it's done, but don't worry about that - you won't get any undeserved karma points for it, so no one will come after you for doing it :-) It's the friendly community, remember? ;-D

Come back if you need extra help with any of it,

/Chriztian

Hi chriztian

Again appologies for marking the wrong post, good job you lot are so friendly, yes I will give you a shout if I'm struggling with this one but I think you have helped lots with what you wrote for me.

Your a top man :)

Paul

is working on a reply...