I have a php file containing my navbar(menu.php) which is used from many of my pages.
Let me show you my folder structure:
index.php
html
menu.php
apps
app1.php
app2.php
webdesign
html.php
js.php
and the following code:
<
div class="navbar navbar-inverse navbar-static-top navbar-topic">
<div class="container">
<div class="navbar-header"><!--navbar start-->
<a href="http://kounj.web44.net" class="navbar-brand"><!--Logo -->
iloveprogramming
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span><!--4 icon-bar spans create the dropdown menu-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">Web Design <b class="caret"></b>
<ul class="dropdown-menu">
<li>Html</li>
<li>Css</li>
<li>Javascript</li>
<li>PHP</li>
</ul>
</li>
<li>Tools</li>
<li>Contact</li>
</ul>
</div>
</div>
</div><!--navbar end-->
The problem is that when i use index.php which is on the root folder my links on navbar will not be set correctly.Any ideas
You can either use absolute path by setting a constant in menu.php that might look like this:
define("ROOTPATH", "/var/www/html/apps/");
(A quick and dirty approach, but effective) for your Navigation links and setting them like so:
<a href="<?php echo ROOTPATH; ?>/app1.php</a>
<!-- etc -->
Or you can edit you Apache http.conf file thereby pointing it to your PHP projects root folder, and restart apache to get your changes to take effect. But both will address your PHP file path issues.
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.
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.
Today we started our Laravel 5 lessons in school. So I started to search the web to re-use things. I've read some things about sections, components and yielding but I still don't quite understand it.
In my resources/views folder I have a file called home.blade.php.
It contains this 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 class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
now in my about.blade.php I'd like to use the same code without copy and pasting. So if I made a change it would change both navigation bars instantly without changing it 2 times.
Can someone explain to me how I re-use this navigation bar without copy and pasting?
Thanks in advance, Sylent.
Create a new folder and call it partials. There you could have navigation, header and footer all as separate blade files.
You would then (usually) create a layout blade that contains the structure and includes the navigation, header and footer.
You would then extend that layout for home and about, and encapsulate whatever content for each of home and about by creating a section called content.
You would then yield content within the layout.
https://laravel.com/docs/5.5/blade
#navigation /resources/views/partials/navigation.blade.php
<nav>
...
</nav>
#header /resources/views/partials/header.blade.php
<header>
...
</header>
#footer /resources/views/partials/footer.blade.php
<footer>
...
</footer>
#layout /resources/views/layouts/layout.blade.php
#include('partials.header')
#include('partials.navigation')
<div class="main-content">
#yield('content')
</div>
#include('partials.footer')
#home /resources/views/page/home.blade.php
#extends('theme.layouts.layout')
#section('content')
<p>Anything within home</p>
#endsection
#about /resources/views/page/about.blade.php
#extends('theme.layouts.layout')
#section('content')
<p>Anything within about</p>
#endsection
I just include this php tags just to check,that if the user is logged in or not.The modal is located in other page(login.php) . It was working fine without including the php tags."The whole thing is working fine except the navbar is not collapsing".Rate +ve if the question is not irrelevant.
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".collmenu">
<span class="icon-bar img-reponsive"></span>
<span class="icon-bar img-reponsive"></span>
<span class="icon-bar img-reponsive"></span>
</button>
</div>
<div class="collapse navbar-collapse collmenu">
<ul class="nav navbar-nav navbar-right">
<?php
if(!empty($loggedin)&&($loggedin=='true')){ echo'<li>logout</li>
<li>hello</li>';}
else{echo'<li>Login</li>
<li>Signup</li>';}
?>
</ul>
</div>
Please check for the files that you've included.
Or is there any form exists in your this page linked to the navbar?
check that you should not have included files twice, also check for the form action if any.