Topic: Problems with Nav and Windows Phone
Andreas Haug
pro asked 10 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 10 years ago
Andreas Haug
pro answered 10 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 10 years ago
Andreas Haug
pro answered 10 years ago
Michal Szymanski
staff pro premium priority answered 10 years ago
Andreas Haug
pro answered 10 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 10 years ago
Andreas Haug
pro answered 10 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