Меню Bootstrap 4 на небольших устройствах - PullRequest
Новая
       35

Меню Bootstrap 4 на небольших устройствах

0 голосов
/ 19 декабря 2018

Меню на ноутбуке или рабочем столе такое, как я хочу, но на маленьком экране я «теряю» опции;значок поиска и меню перевода.Я хотел бы добиться того, чтобы логотип, значок поиска, панель перевода и меню гамбургеров соответствовали друг другу.В качестве альтернативы, поле ввода во второй строке под логотипом и меню гамбургера также работает.

До сих пор я работал с различными компонентами навигационной панели Bootstrap, но не смог сделать это правильно.В приведенном ниже коде также используется некоторая хитрость, но я не думаю, что это повлияет на решение.

Надеюсь, кто-то может направить меня в правильном направлении, чтобы сделать еще один шаг вперед.

Спасибо! 

<nav class="navbar navbar-color-on-scroll navbar-expand-lg fixed-top scrolling-navbar navbar-transparent" color-on-scroll="170">
    <div class="container-fluid">
      <div class="navbar-header">
    </div>
    <div class="navbar-translate">
       {* requires popper.js  rel="tooltip" *}
       {if $page_alias == 'hanse_311'}
          <a class="navbar-brand" href="{root_url}" rel="noreferrer" title="{$sitename} | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="logo"  alt="{$sitename}" src="{CGSmartImage src="{uploads_url}/images/cms/Logo_Hanse_UisgeBeatha.png" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=1}" height="90vh"/></a>
       {else}
          <a class="navbar-brand" href="{root_url}" rel="noreferrer" title="{$sitename} | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="logo"  alt="{$sitename}" src="{CGSmartImage src="logo_1.jpg" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=0}" height="90vh"/></a>
       {/if}
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-bar top-bar"></span>
           <span class="navbar-toggler-bar middle-bar"></span>
           <span class="navbar-toggler-bar bottom-bar"></span>
       </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarNav" data-nav-image="{CGSmartImage src="logo_2.jpg" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=0}" data-color="orange"}
       {Navigator action='default' template="{#theme_resource#}navigator_navigation_multilevel_bootstrap_menu.tpl"}
       <form class="form-inline ml-auto text-dark" data-background-color="#990000">
          {if $browser_lang != 'nl'}
             <div class="form-group my-md-2 col-sm-9">
                {include file='cms_template:google_Translate'}
             </div>
          {/if}
          <div class="form-group col-sm-3">
             <a href="#modalSearch" data-toggle="modal" data-target="#modalSearch" role="button" aria-disabled="true">{svg use="search"}</a>  
          </div>
       </form>
     </div>
   </div>        
</nav>

В соответствии с запросом на добавление некоторого HTML, сначала заголовок: 

<div class="page-header page-header-small">
            <div class="page-header-image" style="background-image: url('data:image/jpeg;base64,.........;">
  </div>
  <div class="content-center">
    <div class="row">
      <div class="col-md-8 ml-auto mr-auto">
        <div class="rellax" data-rellax-speed="-3" style="transform: translate3d(0px, 0px, 0px);">
          <h1 class="title">Downloads</h1>
        </div>
        <h4>
            Downloaden van (technische) bootdocumenten
        </h4>
        <nav aria-label="breadcrumb" role="navigation">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="text-info">U bent hier:&nbsp;</li>
                                        <li class="breadcrumb-item">
                <a href="https://develop.some-site.eu/" title="Home">
                  Home
                </a>
                </li>
                <li class="breadcrumb-item">
                    <a href="#" title="Links">Links</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">Downloads</li>
           </ol>
          </nav>
        </nav>
      </div>
    </div>
  </div>
</div>

И код из меню в режиме небольшого экрана 

<nav class="navbar navbar-color-on-scroll navbar-expand-lg fixed-top scrolling-navbar navbar-transparent" color-on-scroll="170"><div class="container-fluid">
    <div class="navbar-header"></div>
    <div class="navbar-translate">
        <a class="navbar-brand" href="https://develop.some-site.eu" rel="noreferrer" title="some site | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="largeLogo" alt="some site" src="data:image/png;base64,......">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item"> 
                    <a class="nav-link" href="https://develop.some-site.eu/">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Boot en Schipper</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/afkomst-naam">Afkomst naam</a>
                        <a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/dehler-36-jv">Dehler 36 JV</a>
                        <a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/hanse_311">Hanse 311</a>       
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logboek</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="https://develop.some-site.eu/logboek_categorie/logboek_artikelen">Artikelen</a>
                        <a class="dropdown-item" href="https://develop.some-site.eu/logboek_categorie/gps-tracks">GPS Tracks</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="https://develop.some-site.eu/fotos-en-videos-rondom-some-site/fotoalbums">Fotoalbums</a>
                        <a class="dropdown-item" href="https://develop.some-site.eu/fotos-en-videos-rondom-some-site/youtube">Youtube</a>
                    </div>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>                      
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="https://develop.some-site.eu/links-downloads/downloads">Downloads</a>
                    </div>
                </li>
                <li class="nav-item"> 
                    <a class="nav-link" href="https://develop.some-site.eu/gastenboek">Gastenboek</a>
                </li>
            </ul>
            <form class="form-inline ml-auto text-dark" data-background-color="#990000">
                <div class="form-group my-md-2 col-sm-9">
                    <div id="google_translate_element"></div>
                </div>
                <div class="form-group col-sm-3">
                    <a href="#modalSearch" data-toggle="modal" data-target="#modalSearch" role="button" aria-disabled="true"><svg preserveAspectRatio="none" class="icon icon-search"><use xlink:href="#icon-search"></use></svg></a>
                </div>
            </form>
        </div>
    </div>
</nav>

Сайт в среде разработки, если вы меняете размер, вы понимаете, о чем я, и пытаетесь достичь сайта разработки

...