Topic: Problems with Nav and Windows Phone
Hello,
i have Problems with this Windows Phone:
Browser: Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; Microsoft; Lumia 640 LTE) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Mobile Safari/537.36 Edge/13.10586
The mobile Nav doesn't appear. Nothing happened on the Windows Phone.
Here ist the Code:
<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><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>
Add comment
Hi,
sorry for late Reply.
It's Mysterious. The first time we call the Site with the Nav (with Basic Example, see above) it seems to be ok.
After we remove the form or we edit a link the nav disappear...?!??
Now, it comes the 10th Anniversary Update Windows 10 for the Mobil Phones.
Since we have update the Windows Phone it seems to be ok.
So, at this time we can close this thread.
Thanks for Help an Tipps
So what is a desired result? Navbar fixed-top? Navbar with SideNav on mobile? Classic collapsible Navbar on mobile?
The Basic Example works with my links.
<!--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-->
So I don't know the reason :)
Let's investigate it.
Does it work when you use Basic Example with your links?
I think I know the reason. Do you use Free or Pro version of MDB?
Hi,
thanks a lot for reply.
I try this Code-Example from your Site:
<!--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--><!--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-->
Hi,
do you have this problem with every navbar or only with fixed-top?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No