Prevent navbar searchbar from collapsing

[Fredrilj]

Hi,

I would like a minimalist design and just display logo, searchbar and hamburger toggle in the navbar for all screen sizes.

Therefore I have removed navbar-extended-lg from MediaWiki:Tweeki-navbar-class, but what is the code to specify that the searchbar should not collapse, and where to put the code?

This is the code for the searchbar in Localsettings.php:

$wgTweekiSkinSpecialElements['MYSEARCH'] = 'mysearch';

function mysearch( $skin, $context ) {
     echo '</ul><form class="form-inline" action="/w/index.php">
     <div class="input-group bg-white border rounded-pill p-0">
     <input name="search" placeholder="Search" title="Search $Sitename [alt-shift-f]" accesskey="f" id="searchInput" class="form-control bg-transparent border-0" autocomplete="off">
     <div class="input-group-append border-0">
     <button id="button-addon" type="submit" class="btn btn-link shadow-none" aria-label="Go to page"><i class="fa fa-search"></i></button>
     </div>
     </div>
     </form>';
}

If you who read this also want a minimalist design, I think it looks nice to use this menu, which slides in from the right and only takes 300px width and full height (MediaWiki:Tweeki.css):

@media (max-width: 12000px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        right: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        border-left: 3px;
        border-color: #d3333;
        width: 300px;
        background-color: #fff;
    }
    .navbar-collapse.collapsing {
        height: 100vh;
        -webkit-transition: right 0.4s ease-in;
        -o-transition: right 0.4s ease-in;
        -moz-transition: right 0.4s ease-in;
        transition: right 0.4s ease-in;
        right: -100%;
    }
    .navbar-collapse.show {
        right: 0;
        height: 100vh;
        -webkit-transition: right 0.3s ease;
        -o-transition: right 0.3s ease;
        -moz-transition: right 0.3s ease;
        transition: right 0.3s ease;
    }
}

button.navbar-toggler:focus {
    outline: 1px none;
}

Thanks

[thaider]

I just implemented the easy possibility to completely costumize the code for the navbar specifying your own NavbarRenderer function with the $wgTweekiSkinNavbarRenderer configuration option. It works analogous to $wgTweekiSkinPageRenderer. The default is the renderNavbar4 function in includes/TweekiTemplate.php. You can just copy it's code as a starting point. Then you'll have to figure out the specific code for your desired behavior with the help of Bootstrap's documentation...

[Fredrilj]

Thank you! I'll try it out.

[Fredrilj]

Sorry to bother you @thaider, but after a few hours of fumbling, I have not figured out how to make $wgTweekiSkinNavbarRenderer work. The website is down with a 500 error. Can you please correct what is wrong?

Did as you said and copied the code from includes/TweekiTemplate.php and followed the page layout guide. The idea is to get the template code to work and then configure it as needed.

This is the code I entered in Localsettings.php:

$wgTweekiSkinNavbarRenderer = 'MyHooks::myNavbarRenderer';

public function myNavbarRenderer() {
    $navbar_class = $this->getMsg( 'tweeki-navbar-class' );
    if ( $this->checkVisibility( 'navbar' ) ) { ?>
        <header>
            <nav id="mw-navigation" class="<?php echo $navbar_class; ?>">
                <div class="<?php echo wfMessage( 'tweeki-container-class' )->plain(); ?>">
                    <?php if ( $this->checkVisibility( 'navbar-brand' ) ) {
                        $this->renderBrand();
                    } ?>

                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div id="navbar" class="collapse navbar-collapse">
                        <?php if ( $this->checkVisibility( 'navbar-left' ) ) { ?>
                            <ul class="navbar-nav mr-auto">
                                <?php $this->renderNavbarElement4( 'left' ); ?>
                            </ul>
                        <?php } ?>

                        <?php if ( $this->checkVisibility( 'navbar-right' ) ) { ?>
                            <ul class="navbar-nav">
                                <?php $this->renderNavbarElement4( 'right' ); ?>
                            </ul>
                        <?php } ?>
                    </div>
                </div>
            </nav>
        </header>
        <?php }
}

[thaider]

Sorry, I had assumed the code for the custom page renderer was still working which actually wasn't the case (I think because of changes in newer versions of PHP). I reorganized everything and it should work now. Could you please confirm that?

Be aware that you have to change your function call to

$wgTweekiSkinNavbarRenderer = 'myNavbarRenderer';

(the documentation was a bit misleading here) and also that the code for the navbar renderer in TweekiTemplate.php has changed!