Topic: Problems with Nav and Windows Phone
Andreas Haug
pro asked 9 years ago
<header>
<!--Navbar-->
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx">
<i class="fa fa-bars"></i>
</button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx">
<!--Navbar Brand-->
<a class="navbar-brand" href="http://home-url/">HOME</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Allgemein</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/faq/faq.php">FAQ</a>
<a class="dropdown-item" href="/werbeseiten/anlegen.php">Werbeseiten</a>
<a class="dropdown-item" href="/meta/anlegen.php">Metadaten</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu2" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/news/anlegen.php">Anlegen</a>
<a class="dropdown-item" href="/news/bearbeiten.php">Bearbeiten</a>
<a class="dropdown-item" href="/news/blitz_anlegen.php">N-Blitz eintragen</a>
<a class="dropdown-item" href="/news/blitz_bearbeiten.php">N-Blitz bearbeiten</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Reports</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu3" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/reports/anlegen.php">Anlegen</a>
<a class="dropdown-item" href="/reports/bearbeiten.php">Bearbeiten</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CDs</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu4" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/reviews/anlegen.php">Anlegen</a>
<a class="dropdown-item" href="/reviews/bearbeiten.php">Bearbeiten</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Kaz</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu5" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/kleinanzeigen/anlegen.php">Eintragen</a>
<a class="dropdown-item" href="/kleinanzeigen/loeschen.php">Löschen</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Termine</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu6" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/termine/anlegen.php">Eintragen</a>
<a class="dropdown-item" href="/termine/bearbeitesn.php">Bearbeiten</a>
<a class="dropdown-item" href="/termine/spezial.php">Spezial</a>
<a class="dropdown-item" href="/termine/user_termine.php">User</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Adressen</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu7" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/adressen/anlegen.php">Eintragen</a>
<a class="dropdown-item" href="/adressen/bearbeiten.php">Bearbeiten</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/twitter/twittern.php">Twittern</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu9" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Statistik</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenu9" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut">
<a class="dropdown-item" href="/piwik/desktop.php">Piwik Desktop</a>
<a class="dropdown-item" href="/piwik/mobil.php">Piwik Mobil</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.php?action=logout">Logout</a>
</li>
</ul>
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar-->
</header>
I have included the Following Script
<script>
if (navigator.userAgent.match(/IEMobile/10.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
document.createTextNode(
'@-ms-viewport{width:auto!important}'
s)
)
document.head.appendChild(msViewportStyle)
}
</script>
But is has not effect.
Can you help me? I use MD Bootstrap v4.1.
Best regards
Olli
Michal Szymanski
staff pro premium priority answered 9 years ago
Andreas Haug
pro answered 9 years ago
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars white-text"></i></a>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline pull-xs-right">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
This example from your Site is running.
But when i insert my links and remove the form nothing happened on the Windows Mobile Phone....
This is a secret for me....
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!--Collapse button-->
<a href="#" data-activates="mobile-menu" class="button-collapse"><i class="fa fa-bars white-text"></i></a>
<!--Content for large and medium screens-->
<div class="navbar-desktop">
<!--Navbar Brand-->
<a class="navbar-brand" href="#">Navbar</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/twitter/twittern.php">Twittern</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kaz/anlegen.php">KAZ anlegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.php?action=logout">Logout</a>
</li>
</ul>
</div>
<!-- Content for mobile devices-->
<div class="navbar-mobile">
<ul class="side-nav" id="mobile-menu">
<li class="nav-item active">
<a class="nav-link" href="/index.php">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/twitter/twittern.php">Twittern</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kaz/anlegen.php">KAZ anlegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.php?action=logout">Logout</a>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
Best regards
Olli
Michal Szymanski
staff pro premium priority answered 9 years ago
Andreas Haug
pro answered 9 years ago
Michal Szymanski
staff pro premium priority answered 9 years ago
Andreas Haug
pro answered 9 years ago
<!--Navbar-->
<nav class="navbar navbar-dark bg-primary">
<!-- Collapse button-->
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapseEx2">
<i class="fa fa-bars"></i>
</button>
<div class="container">
<!--Collapse content-->
<div class="collapse navbar-toggleable-xs" id="collapseEx2">
<!--Navbar Brand-->
<a class="navbar-brand" href="/index.php">HOME</a>
<!--Links-->
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/termine/spezial.php">T Spezial <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/termine/anlegen.php">T anlegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/termine/bearbeiten.php">T bearbeiten</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KAZ</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="/kleinanzeigen/anlegen.php">Eintragen</a>
<a class="dropdown-item" href="/kleinanzeigen/loeschen.php">Loeschen</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/termine/bearbeiten.php">T bearbeiten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/index.php?action=logout">Logout</a>
</li>
</ul>
<!--Search form-->
<form class="form-inline">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
<!--/.Collapse content-->
</div>
</nav>
<!--/.Navbar-->
Michal Szymanski
staff pro premium priority answered 9 years ago
Andreas Haug
pro answered 9 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No