The navbar I have collapses when shrinking the screen on my desktop, but when I pull it up on a tablet or phone, it won't.
Sample Here: http://www.careerchoices.peaktopeak.org/CareerChoices/home.php
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="CareerChoices.php">Career Choices</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
<li class = "logout">Log Out </li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I've been able to have a mobile collapsing navbar on a separate page http://www.careerchoices.peaktopeak.org/CareerChoices/CareerChoices.php,
but even with almost identical code this bar won't collapse.
I've googled around, but I'm just beginning with bootstrap - most of my work has been almost copy pasted from Bootstrap templates.
Any ideas?
you should use
<meta name="viewport" content="width=device-width, initial-scale=1">
that meta say to browser to set width of page equal device width
you can see this on boostrap web site :
http://getbootstrap.com/css/#overview-mobile
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website:
meanwhile, this is the relevant code for the navbar.php
<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
also, not sure if it makes a difference although the PHP file is named navbar.inc.php
Thank you for taking the time to read this post
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
Maybe you should carry brand class' properties to anchor tag and remove brand class.
<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.
On my webpage the menu doesn't work on phones. It collapses fine but doesn't do anything when I click it.
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hoa_label" onclick="newPage('m_page1','page1')">Wedding Event</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active" id="m_page1"><a onclick="newPage('m_page1','page1')">Home</a></li>
<li id="m_page2"><a onclick="newPage('m_page2','page2')">Photos</a></li>
<li id="m_page3"><a onclick="newPage('m_page3','page3')">RSVP</a></li>
<li id="m_page4"><a onclick="newPage('m_page4','page4')">Gift Registry</a></li>
<li id="m_page5"><a onclick="newPage('m_page5','page5')">Hotel Information</a></li>
<li id="m_page6"><a onclick="newPage('m_page6','page6')">Wedding Contacts</a></li>
<li class="dropdown">
Event Information<span class="caret"></span>
<ul class="dropdown-menu">
<li>Venue</li>
<li>Live Streaming</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Here is the section that loads the java. It won't let me post any more code into this post. It's forcing me to 'add' details, so hopefully this is enough. It's just the standard * Bootstrap v3.3.7 (http://getbootstrap.com) with absolutely no changes. The only custom java script is a little toggle to check a cookie to turn on and off the help prompts.
<!--Javascript Load Files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--QTip Start-->
<script>
$(function ()
{
$(document).tooltip(
{
track: true
});
} );
</script>
<!--QTip End-->
<script src="js/singleAppFunc.js"></script>
I created a navbar from bootstrap inside resources/views/inc -> navbar.blade.php
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Project</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
The first div tag is working fine but the second div tag is not visible in the output
And I properly include the navbar in a separate file inside resources/views/layouts -> app.blade.php
<body>
#include('inc.navbar')
<div class="container">
#yield('content')
</div>
</body>
Please help me with this
edit
I removed class="collapse navbar-collapse", then the navigation links are appearing, what is the issue with the compatibility on the collapse?
If you are referring to wanting this div to be visible immediately (without clicking):
<div id="navbar" class="collapse navbar-collapse">...</div>
As it is, it is not meant to be visible upon load. If you want it to load, you've got an extra collapse class in there, which is effectively hiding the div, remove it, and it should be visible for you:
<div id="navbar" class="navbar-collapse"> <-- No collapse
I have a webpage which from which i want to navigate to other webpages from the navigation, currently i can only get one web page working, i tried to copy the code for a different web page but it didnt work.
Below is my route.php file currently option 1 works fine but option 2 does not.
<?php
use App\Middleware\AuthMiddleware;
use App\Middleware\GuestMiddleware;
$app->get("/", "HomeController:index")->setName("home");
$app->get("/option1", "HomeController:option1")->setName("option1");
$app->get("/option2", "HomeController:option2")->setName("option2");
Furthermore, below is my .php file code for the navigation bar.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href=<?php echo $router->pathFor("home");?> class="navbar-brand">
<img src=<?php echo $_SESSION['baseUrl'] . "css/images/wwa4f.png";?>
alt="WWA4F Logo"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="<?=$router->pathFor('option1')?>" >Cuisines</a></li>
</ul>
<ul class="nav navbar-nav">
<li><a href="<?=$router->pathFor('option2')?>" >Location</a></li>
</ul>
Option 1 which is my cuisines page is working fine as it is allowing me to navigate to it but option 2 which is location page is not but the name location is coming up on navigation bar and when i click location i am getting the error of:
SLIM APPLICATION ERROR
message: [{"container":{}},"option2"] is not resolvable.
I wrote below to get navigation bar. It doesn't give me any errors. But output is not what I expected. below is my html code
<nav class="navbar navbar-default navbar-inverse navbar-static-top navbar-inverse-main" role="navigation" ng-init="navCollapsed = true" >
<!--<nav class="nav navbar-default" role="navigation">-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centerd">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-brand-centered">
<ul class="nav navbar-nav">
<li>List</li>
<li>Add</li>
</ul>
</div>
</div>
</nav>
Can some one help me identify what is missing. This is using angularJS bootstrap.
and what I get when I run is in below picture.
Result
I tried to identify what went wrong. Someone please have a look. This is my first time trying angular bootstrap.