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.