Guten Morgen liebe Foren-Gemeinde,
ich bin am verzweifeln am responsive Menü in der Darstellung im Safari auf dem iPhone. In den Desktop-Varianten oder auch Desktop-Simulation auf den Endgeräten sieht alles super aus. Auf dem iPhone im Safari wird jedoch das Suchfeld mit der Lupe über die komplette breite gezogen, sodass das Burger-Menu nach unten rutscht. Beim Laden sieht man, dass dies am Anfang nicht so ist, aber dann doch wiederum irgendwie sich "überlädt"?
Kann mir hierbei jemand helfen?
Code
.btn-group {
width: 100%; }
@media (max-width: 992px) {
.btn-group {
width: 210px;
margin-right: 10px; } }
.btn-group1 {
padding: 10px;
font-size: 23px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border: 1px solid #9fa9b9; }
@media (max-width: 992px) {
.btn-group1 {
width: 210px; } }Smarty
<nav class="navbar navbar-light">
<form class="form-inline my-2 my-lg-0" role="search">
<div class="btn-group" role="group" aria-label="search">
<input class="btn-group1" type="search" placeholder="Pesquisar palavras..." aria-label="Search">
<button type="submit" class="btn-form"><span class="icon-magnifier search-icon"></span><i class="pe-7s-angle-right"></i></button>
</div>
</form>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent1">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link {if $smarty.get.page != 'verbs_search' && $smarty.get.page != 'verbos' && $smarty.get.page|strpos:"translation_" !== 0 && $smarty.get.page|strpos:"question" !== 0 && $smarty.get.page != 'verbs_alphabet'} active {/if}" href="/">Sinônimos</a></li>
<li class="nav-item"><a class="nav-link {if $smarty.get.page == 'verbos' || $smarty.get.page == 'verbs_search' || $smarty.get.page == 'verbs_alphabet'} active {/if}" href="/verbos.html">Verbos</a></li>
<li class="nav-item"><a class="nav-link {if $smarty.get.page|strpos:"translation_" === 0} active {/if}" href="/tradutor">Tradutor</a></li>
<li class="nav-item"><a class="nav-link {if $smarty.get.page|strpos:"question" === 0} active {/if}" href="/{$oLanguage->language_url}">Perguntas</a></li>
<li class="nav-item"><a class="nav-link" target="_blank" href="{$waf.mainUrl}waf/modules/hangman/?lang=por"><span class="flag-icon game"></span>Jogos de palavras</a></li>
<li class="disabled"><a tabindex="-1" href="#"><hr></a></li>
<li class="nav-item"><a class="nav-link" href="{$waf.mainUrl}english/"><span class="flag-icon flag-icon-us"></span> Synonyms</a></li>
<li class="nav-item"><a class="nav-link" href="http://www.sinonimia.net/" target="_blank"><span class="flag-icon flag-icon-es"></span> Sinonimia</a></li>
<li class="nav-item"><a class="nav-link" href="{$waf.mainUrl}/deutsch"><span class="flag-icon flag-icon-de"></span> Synonyme</a></li>
<li class="nav-item"><a class="nav-link" href="{$waf.mainUrl}italiano/"><span class="flag-icon flag-icon-it"></span> Sinonimi</a></li>
</div>
</li>
</ul>
</div>
</nav>