Adding CSS style to nav list

bici · 2025-12-02 23:10:19

I have tried for 2 days and can’t solve this issue.

If I hand code the class="is-active" on each page it works.

 <nav class="site-nav js-site-nav">
	<ul class="nav" role="navigation">
	<li class="site-nav__item"><a href="https://newsite.ca/portfolio">Portfolio</a></li>
	<li class="site-nav__item"><a href="https://newsite.ca/about">About</a></li>
	<li class="site-nav__item"><a href="https://newsite.ca/notes" class="is-active">Notes </a></li>
		  </ul>
	</nav>

BUT when using this Form Menu_Nav on my pages <txp:output_form form="Menu_Nav" /> I cannot get Active class to work. I have tried moving the class="is-active" string everywhere without success.

<nav class="site-nav js-site-nav">
	<ul class="nav" role="navigation">
	<li class="site-nav__item"<txp:if_section name="portfolio"> class="is-active"</txp:if_section>> 
	 <txp:section link="1" title="1"  name="portfolio" />    
	  </li>
	<li class="site-nav__item"<txp:if_section name="about"> </txp:if_section>> 
		<txp:section link="1" title="1" name="about" />   
	  </li>
	<li class="site-nav__item"<txp:if_section name="notes"> </txp:if_section>> 
		<txp:section link="1" title="1" name="notes"  />  
	  </li>
			  </ul>
		   </nav>

I either get no active class to happen or every link is rendered active.

what am I missing? the Docs say to use this string:

<ul id="subnav">
<li><a href="<txp:site_url />articles" <txp:if_section name="articles">class="active" </txp:if_section>>Articles</a></li>
</ul>

Bloke · 2025-12-02 23:23:08

Your is_active check needs to go inside the last double quote:

<li class="site-nav__item<txp:if_section name='portfolio'> is-active</txp:if_section>">
...

But you can simplify the code a lot using txp:section_list:

<txp:variable name="current_section"><txp:section /></txp:variable>
<nav class="site-nav js-site-nav">
<txp:section_list sections="portfolio, about, notes" wraptag="ul" class="nav" break="">
<li class="site-nav__item<txp:if_section name='<txp:variable name="current_section" />'> is-active</txp:if_section>">
   <txp:section link title />
</li>
</txp:section_list>
</nav>

Last edited by Bloke (2025-12-02 23:25:24)

phiw13 · 2025-12-02 23:44:15

One pattern used for a long time:

<nav aria-label="Site Navigation" class="a-box" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope">
<h3 id="menu">Around here:</h3>
<ul><txp:section_list default_title="Home" include_default wraptag="" break="" sections=",section_1,section_2,section_3">
<li<txp:if_section not name=''><txp:if_section name='<txp:section />'> class="is_active"</txp:if_section></txp:if_section>><a itemprop="url" href="<txp:section url />"><txp:section title /></a></li></txp:section_list></ul>
</nav>

Edit – oops, I see Stef already answered with similar code…

Last edited by phiw13 (2025-12-02 23:46:08)

bici · 2025-12-02 23:51:28

thanks!. I tried this example from Stef but no active class takes affect:

<li class="site-nav__item<txp:if_section name='portfolio'> is-active</txp:if_section>">

page source: but link is not active.

<li class="site-nav__item is-active">
	 <a href="https://mysite.ca/portfolio/">Portfolio</a>    
	  </li>

Bloke · Yesterday 00:54:04

Mine was untested so it might not be exact.

bici · Yesterday 04:33:50

well I tried and tried but without any luck. I had to revert to brute force, but good enough as i only have 4 sections.

this works a charm:

<li class="site-nav__item"><txp:if_section name="portfolio">
     <a href="https://mysite.ca/portfolio/" class="is-active"> Portfolio </a> 
<txp:else />
    <a href="https://mysite.ca/portfolio/"> Portfolio </a>
 </txp:if_section>

  etcetera etcetera

if anyone can make the more elegant option work I would be happy to try it out

PS how does everyone make the code posted look the way Bloke posted? coloured coded and all.

bici · Yesterday 04:34:41

phiw13 wrote #341442:

One pattern used for a long time:

<nav aria-label="Site Navigation" class="a-box" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope">...

Edit – oops, I see Stef already answered with similar code…

never got this to work either

phiw13 · Yesterday 04:50:39

bici wrote #341450:

never got this to work either

Weird. What is going wrong? Have you checked with the browser page inspector to check that a/ the correct markup is generated and b/ your styles are applied correctly – not overridden by some other styles…

bici · Yesterday 06:58:58

phiw13 wrote #341451:

Weird. What is going wrong? Have you checked with the browser page inspector to check that a/ the correct markup is generated and b/ your styles are applied correctly – not overridden by some other styles…

yes it is weird. there is only one css file.
the issue is that active class is never added to the a href area , but is grouped with first <li class=“site-nav__item”> so it renders as <li class=“site-nav__item” class=is-active> …. and is not being applied within a href </a> link.

this is my working output from view source:

<li class="site-nav__item">
     <a href="https://mysite.ca/portfolio/" class="is-active"> Portfolio </a>

all the other options ends up outputting:

<li class="site-nav__item" class="is-active" >
     <a href="https://piovesan.ca/portfolio/"> Portfolio </a>

with no active link being rendered.

phiw13 · Yesterday 07:18:32

bici wrote #341452:

yes it is weird. there is only one css file.
the issue is that active class is never added to the a href area , but is grouped with first <li class=“site-nav__item”> so it renders as <li class=“site-nav__item” class=is-active> …. and is not being applied within a href </a> link.

So not really weird :-)

Adjust your stylesheet…

.is-active a[href] { /* your styling */ }

Or keep your stylesheet as is and change your markup a little, taking my sample above

<nav aria-label="Site Navigation" class="a-box" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope">
<h3 id="menu">Around here:</h3>
<ul><txp:section_list default_title="Home" include_default wraptag="" break="" sections=",section_1,section_2,section_3">
<li<txp:if_section not name=''></txp:if_section>><a <txp:if_section name='<txp:section />'> class="is_active"</txp:if_section> itemprop="url" href="<txp:section url />"><txp:section title /></a></li></txp:section_list></ul>
</nav>

Basically, the snippet <txp:if_section name='<txp:section />'> class="is_active"</txp:if_section> moves form the <li to inside the <a………>

bici · Yesterday 20:22:39

phiw13 wrote #341453:

So not really weird :-)

Adjust your stylesheet…

.is-active a[href] { /* your styling */ }...

Or keep your stylesheet as is and change your markup a little, taking my sample above

<nav aria-label="Site Navigation" class="a-box" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope">...

Basically, the snippet <txp:if_section name='<txp:section />'> class="is_active"</txp:if_section> moves form the <li to inside the <a………>

Well I persevered through 3 hours this morning to get this code to work!

<nav class="site-nav js-site-nav">
     <ul class="nav" role="navigation">
   <txp:section_list default_title="" include_default wraptag="" break="" sections="portfolio,about,notebook">
   <li class="site-nav__item"><txp:if_section not name=''></txp:if_section> <a itemprop="url" href="<txp:section url/> <txp:if_section name='<txp:section/>'>" class="is-active</txp:if_section>"> <txp:section title /></a></li> </txp:section_list>	  </ul> </nav>

I had to move some of your code further into the where url gets output to get active class to work.
it now outputs this:

<li class="site-nav__item"> <a itemprop="url" href="https://mytempsite.ca/notebook/ " class="is-active"> Notebook</a></li>

THANKS!

jakob · Yesterday 20:58:00

And if you want it not just to look good but also to inform people using assistive devices which section is current, you could do:

<nav class="site-nav js-site-nav">
    <ul class="nav" role="navigation">
        <txp:section_list wraptag="" break="" sections="portfolio, about, notebook">
            <li class="site-nav__item">
                <a itemprop="url" href="<txp:section url />"<txp:if_section name='<txp:section />'> aria-current="page"</txp:if_section>>
                    <txp:section title />
                </a>
            </li>
        </txp:section_list>
    </ul>
</nav>

and then in your css, instead of defining a class .is-active, you use:

a[aria-current="page"] {
  font-weight: bold; /* your styling for an active item */ 
}

PS: I dropped your check for the default page as it wasn’t changing anything; similarly, you can drop include_default (to make the home page show) and default_title=”“ (to hide its title) as they negate each other.

PPS: to show coloured code on the forum, write bc..{space}{enter}txp{enter}Your code. You can use css or js or php in place of txp depending on what you want to highlight.

Textpattern CMS

Textpattern CMS support forum

#1 2025-12-02 23:10:19