Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Pages: 1
Adding CSS style to nav list
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>
…. texted postive
Offline
Re: Adding CSS style to nav list
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 (Yesterday 23:25:24)
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Adding CSS style to nav list
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 (Yesterday 23:46:08)
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: Adding CSS style to nav list
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>
…. texted postive
Offline
Re: Adding CSS style to nav list
Mine was untested so it might not be exact.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Pages: 1