Navigation title disappears after search bar up

Questions
1

Hi guys,

Im strruggling with the navigation component.

I used the following code

<div class="navbar navbar-large navbar-transparent navbar-large-collapsed" aria-hidden="true">
                    <div class="navbar-bg" style=""></div>
                    <div class="navbar-inner">
                        <div class="left">
                            <a href="#" class="link icon-only panel-open" data-panel="left">
                                menu
                            </a>
                        </div>
                        <div class="title sliding">
                            <img src="img/logo.png" alt="Logo" style="height:30px;">
                        </div>
                        <div class="right">
                            <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
                                <i class="far fa-search c-purple-3"></i>
                            </a>
                        </div>

                        <form data-search-container=".components-list" data-search-in="a" class="searchbar searchbar-expandable searchbar-components searchbar-init">
                            <div class="searchbar-inner">
                                <div class="searchbar-input-wrap">
                                    <input type="search" placeholder="Search components">
                                    <i class="searchbar-icon"></i>
                                    <span class="input-clear-button"></span>
                                </div>
                                <span class="searchbar-disable-button if-not-aurora"><i class="far fa-times"></i></span>
                            </div>
                        </form>
                    </div>
                </div>

If I click the “search” icon, the search bar slides in, and the logo disappears. But if I close the search bar, the logo won’t come back. Search bar slides up and the logo is still missing.
What’s wrong on my code?

2

Maybe you should put sliding class with navbar-inner

3

:confused: no that did not work…

4

Hi @mikegk, I am having a similar issue. My title is dissappearing because of this:

.navbar-large .title {
 opacity: var(--f7-navbar-large-collapse-progress);
}

The navbar background is also going white. Happened after doing npm install on the old version. Were you able to solve it?