Hello!

Total EPiServer newbie here... I'm working on a site whose navigation menu needs to have each page name split over two lines. So while the actual page name could be "News and updates", I'd need to wrap everything after the first word in <span> tags to style that part with CSS, so the output would become "News <span>and updates</span>". From there, I'd make the span a block element on large screens but inline it in my responsive view.

Using the MainNavigation.aspx from the Alloy templates. My goal would probably be to loop through each menu item in the code behind file and pass the final <a> tag, containing the new name with <span> in it, to the view for output. Any ideas? I'm completely lost here. I can come up with the actual regex to wrap the correct words, I just need to find out how to actually edit the output of MenuList.

This is what I've got in my view:

<nav role="navigation">
	<div class="inner">
		<input type="checkbox" id="toggle-menu" />  
		<ul>
			<EPiServer:MenuList PageLink="<%# PageReference.StartPage %>" runat="server" ID="MainMenu">
                		<ItemTemplate>
                   			<li><EPiServer:Property PropertyName="PageLink" runat="server" /></li>
                		</ItemTemplate>
    
               			<SelectedTemplate>
                    			<li><EPiServer:Property CssClass="current-page" PropertyName="PageLink" runat="server" /></li>
                		</SelectedTemplate>
           		 </EPiServer:MenuList>
		</ul>
	</div>
</nav>

Thanks.