Applying a class only on a certain set of pages

I have a menu built with bootstrap that I would like to remove the visible-xs class only on blog articles. How would I go about doing this?

The code for it is right here:

<a class="navbar-brand visible-xs" href="/">
  <h1 class="fullName animated fadeInDown" style="text-decoration: none"><span class="firstN">Matthew</span> <span class="middleN">L.</span> <span class="lastN">Johnson</span></h1>
</a>

I suppose I could do this with another custom menu but I wanted to see if it was possible with this article:
https://getkirby.com/docs/cheatsheet/pages/not

When I tried, I only got duplicate brand links.

Could you please post the full code? There is no hidden-xs class anywhere in what you posted. And there is no PHP code, either, just a hard-coded name.

Sorry, it is the visible-xs in the first line that I wish to remove. I’ll update the post.

Wrap it in an if statement, sth like:

<?php if(!$subpage->isChildOf(page('blog')))  { echo 'visible-xs';} ?>

If this doesn’t help, please post your menu code as requested above.

1 Like

Thank you very much however this just gives me an error.

syntax error, unexpected ‘echo’ (T_ECHO)

My code now looks like this:

  <nav id="primeNav" class="navbar navbar-default">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#siteNav" aria-expanded="false">
      <h5>MENU <span><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></span></h5>
    </button>
    <a class="navbar-brand <?php if(!$subpage->isChildOf(page('blog'))  { echo 'visible-xs';} ?>" href="/">
      <h1 class="fullName animated fadeInDown" style="text-decoration: none"><span class="firstN">Matthew</span> <span class="middleN">L.</span> <span class="lastN">Johnson</span></h1>
    </a>

  </div>
  <div class="collapse navbar-collapse" id="siteNav">
    <div id="siteLinks">
      <ul class="nav navbar-nav navbar-right">
        <?php foreach($pages->visible() as $item): ?>
        <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>">
          <a href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
        </li>
        <?php endforeach ?>
      </ul>
    </div>
  </div><!--navbar-collapse-->
  <hr class="hidden-xs">
</div>

I was missing a parenthesis. Corrected above. But the code will still not work, because $subpage is not defined.You’d have to use $page instead.

1 Like

Thank you!!! I’m a newbie so getting through the little details like this was pretty tricky.

I find its better to use the SASS version of Bootstrap (well ok, i don’t use bootstrap unless i really have to, but if i do i use the SASS version). That way you can avoid having to put 47 classes on elements, and then getting clever with PHP to spit them out or remove them.

Hint:

<?php if ($page->isHomePage()): ?>
  <body id="home">
<?php else: ?>
  <?php if ($page->hasVisibleChildren()): ?>
    <body id="<?= $page->uid() ?>-section">
  <?php else: ?>
    <body id="<?= $page->parent()->uid() ?>-page">
  <?php endif ?>
<?php endif ?>

This gives the home page an ID of home, top level pages an ID of pageuid-section and subpages an ID of pageuid-page. I consider a page a section if it has subpages. Tweak it to suit your needs.

This is super useful when targeting stuff with SASS framework mixins.

For instance:

body[id$="page"] {background-color: red};

That would target all subpages but not the section pages.

1 Like

Thanks for the insight as well. I just started doing it this way at work, I should have this technique home as well to use it in this case as well.