Inserting a navbar into wordpress - php

Straigth to the point: I got the twentytwelve Theme from WordPress installed and changed its background + removed the default navbar. (commented it out)
Now how can I implement my bootstrap navbar that float on the top of the screen.
This is the navbar code:
<?php
if(!isset($nosession))
session_start();
}
/*if(isset($_COOKIE['username']))
{
$_SESSION['username'] = $_COOKIE['username'];
$_SESSION['loggedin'] = "true";
}*/
?>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">IHES</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>Home</li>
<li>Adopteren</li>
<li>WebWinkel</li>
<li>Wall of Steen</li>
<li class="dropdown">
<i class="icon-film" style="margin-top:-1px"></i> Videos <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="icon-film"></i>Nieuws</li>
<li><i class="icon-film"></i>Interviews</li>
<li><i class="icon-film"></i>Overig</li>
</ul>
</li>
<li>Steenoloog Blog</li>
</ul>
<ul class="nav pull-right">
<?php
if(isset($_SESSION['loggedin'])){
if(isset($_COOKIE['cart']))
{
echo '
<li class="pull-right"><i class="icon-shopping-cart icon-white"></i></li>
';
}
echo '<li class="navbar-form pull-right">
'.$_SESSION['username'].'
</li>';
echo '<li class="navbar-form pull-right">
Loguit
</li>';
}else{
echo '<div class="navbar-form pull-right">
<button type="submit" class="btn">Login Pagina</button>
</div>';
}
?>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
That is my navbar code that I include on top of every .php page.
require "navbar.php";
But how can I use this with in the 2012 theme from wordpress?
I tried to just use the require and also link to the .css files from bootstrap.
But this only gives me the content of the navbar. It is missing the navbar itself.
(BTW: I pasted the code in the header.php file from the theme)

can you include css?
Also try include instead of require

Related

Navbar dropdown toggle immediately disappears upon click on mobile site. bootstrap 3.3.7

The navbar on my website works well on pc but on mobile. Whenever I toggle the dropdown for my navbar and click on the Log-in/sign up, it appears but disappears immediately.
This is my website: www.krakenro.com
This is my code:
<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="./"><?php echo Flux::config('SiteTitle'); ?></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<?php $menuItems = $this->getMenuItems(); ?>
<?php if (!empty($menuItems)): ?>
<?php foreach ($menuItems as $menuCategory => $menus): ?>
<?php if (!empty($menus)): ?>
<li class="dropdown">
<?php echo htmlspecialchars(Flux::message($menuCategory)) ?> <b class="caret"></b>
<ul class="dropdown-menu">
<?php foreach ($menus as $menuItem): ?>
<li>
<?php echo htmlspecialchars(Flux::message($menuItem['name'])) ?>
</li>
<?php endforeach ?>
</ul>
</li>
<?php endif ?>
<?php endforeach ?>
<?php endif ?>
<?php $adminMenuItems = $this->getAdminMenuItems(); ?>
<?php if (!empty($adminMenuItems) && Flux::config('AdminMenuNewStyle')): ?>
<li class="dropdown">
Admin Menu <b class="caret"></b>
<ul class="dropdown-menu">
<?php foreach ($adminMenuItems as $menuItem): ?>
<li>
<?php echo htmlspecialchars(Flux::message($menuItem['name'])) ?>
</li>
<?php endforeach ?>
</ul>
</li>
<?php endif ?>
</ul>
</div><!--/.nav-collapse -->
</div>

Ajax php page and url change on load using load() function without refreshing

I am recently Creating a Blog site and it is based on php version 5.6.Now I am stuck over a week to achieve "ajax page load as well as url changing when click on navigation without refreshing the entire page". I have followed many suggestion from stakeoverflow and jQuery Forum.But own't make it properly. I have menu with dropdown and also have dropdown-toggle data attribute. Somtimes my code works fine but dropdown and dropdown-togglewon't work. Can anyone give me the way to achieve this.I am just a beginner of ajax. Here is my code.
header.php
<?php
require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
<?php include "../scripts/js.php";?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p>PHONE: 01971982959 </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>>Home <span class="sr-only">(current)</span></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
Post<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><p><?php echo $result['title'];?></p></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li id="nav_link"
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> >Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('#nav_link li a').click(function (e) {
e.preventDefault();
var navPage=$(this).attr('href');
// alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$('.dropdown-toggle').dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
Any help will be appriciate or please enlighten me.Thanks in advence
Update
HERE IS THE UPDATE
header.php
<?php
// require_once "../vendor/autoload.php";
include "../lib/Database.php";
include "../config/config.php";
include "../helpers/Format.php";
$fm= new Format();
$db = new Database();
$query ="SELECT * FROM `tbl_post` LIMIT 5";
$post = $db->select($query);
?>
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<?php include '../scripts/meta.php';?>
<?php include '../scripts/css.php';?>
</head>
<style>
.row{
margin:0;
}
</style>
<body>
<!-- header starts -->
<header>
<section id="smedia">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 navbar-left">
<p>PHONE: 01971982959 </p>
</div>
<div class="col-sm-4">
<?php
$slgQuery = "SELECT * FROM `tbl_social` WHERE `id`= '1'";
$socialMedia = $db->select($slgQuery);
if($socialMedia )
{
while($socialResult = $socialMedia->fetch_assoc()) {
?>
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<?php
}
}
?>
</div>
</div>
</div>
</section>
<!-- Navbar Starts -->
<div class="row">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../Template/index.php">
<?php
$slgQuery = "SELECT * FROM `title_slogan` WHERE `id`= '1'";
$getTitle = $db->select($slgQuery);
if($getTitle)
{
while($slgResult = $getTitle->fetch_assoc())
{
?>
<img src="../Dashboard/admin/<?php echo $slgResult['logo'];?>" alt="logo" class="img-responsive">
<?php
}
}
?>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right nav_link">
<?php
$path = $_SERVER['SCRIPT_FILENAME'];
$currentPage = basename($path,'.php');
?>
<li <?php if($currentPage == 'index'){echo 'class ="active"';}?>>Home <span class="sr-only">(current)</span></li>
<li <?php if($currentPage == 'Excellent'){echo 'class ="active"';}?>>
Post<span class="caret"></span>
<ul class="dropdown-menu nav_link" aria-labelledby="dLabel">
<?php
if ($post){
while($result = $post->fetch_assoc())
{
?>
<li><p><?php echo $result['title'];?></p></li>
<?php }
}else{
echo "data not Found!!";
}?>
</ul>
</li>
<?php
$aboutQuery = "select * from `tbl_page`";
$navigation = $db->select($aboutQuery);
if ($navigation)
{
while($aboutResult = $navigation->fetch_assoc())
{
?>
<li
<?php if (isset($_GET['pageid'])&& $_GET['pageid']== $aboutResult['id'])
{
echo 'class ="active"';
}
?>
> <a href="../Template/page.php?pageid=<?php echo $aboutResult['id'];?>"><?php echo $aboutResult['name'];?>
</a>
</li>
<?php
}
}
?>
<li <?php if($currentPage == 'contact'){echo 'class ="active"';}?> >Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!-- Navbar Ends -->
</header>
<!-- header ended -->
js.php
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
//alert(navPage);
$(document.body).load(navPage).fadeIn('slow');
$(".dropdown-toggle").dropdown();
if(navPage!==location.href){
window.history.pushState({path:navPage},'',navPage);
}
return false;
});
Very First remove the id="nav_link" from <li> and add then add class on <ul>
I will recommend that you one class and to add on your both <ul>
From: <ul class="nav navbar-nav navbar-right">
To: <ul class="nav navbar-nav navbar-right nav_link">
Also for the secound <ul>
Add same class
Now change in the jquery
from: $('#nav_link li a').click(function (e) {
To: $('.nav_link li a').click(function (e) {
As # is for Id and . is for Class Learn more about this at here: Selector
Extra Update
There are a lot of ways to do this but will let you know the one which is useful with current code
you need to stop the jquery code if there is # in the URL and that is for post menu
$('.nav_link li a').click(function (e) {
e.preventDefault();
var navPage= $(this).attr('href');
if(navPage != "#"){
// your code
}
return false;
});

Bootstrap navigation include

I have the following bootstrap navbar. I want to include nav.php into all of my php pages. Well I have done simple includes in the past but with div tags something tells me I am doing this wrong.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" 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>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" alt=" "></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include 'nav.php';?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My nav.php is as following
echo'
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>TEAM</li>
<li class="dropdown">
SERVICES <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>IT SERVICES</li>
<li>VOICE SERVICES</li>
</li>
</ul>
</li>
<li>CAREERS</li>
<li>INTERESTING INFORMATION</li>
<li>CONTACT</li>
</ul>';
Two possible paths:
Add <?php tag to your nav.php file,
or
remove echo statement and make the file plain HTML.

Bootstrap Navbar dropdown menu works on HTML document but not on PHP document

A drop-down menu I created with Twitter Bootstrap works on HTML documents but will not drop down on PHP documents. Here is a PHP document where you can see see what I mean. When I click the "more" tab, it does not drop down.
Why doesn't this menu work on both HTML and PHP documents?
Here is the page source:
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href"" class="navbar-brand">Colorful Cards</a>
<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>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">Past Cards</li>
<li class="active">Contact</li>
<li class="dropdown">
More<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="inverse-dropdown">Bibliography</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">About</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">Coming Soon...</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Making active link with php and bootstrap

I need a little help with my code. I'm using bootstrap and i have 3 links for now and i want them to be active as i click on them. I tried many ways to do that but i failed.
Here is my code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" 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>
<a class="navbar-brand" href="index.php">POSLOVNA STATISTIKA</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Poslovni korisnici <span class="sr-only">(current)</span></li>
<li>Korisnici</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ul class="nav navbar-nav">
<li <?php if(isset($_GET['poslovni_korisnici'])){ echo 'class="active"'; } ?>>Poslovni korisnici <span class="sr-only">(current)</span></li>
<li <?php if(isset($_GET['korisnici'])){ echo 'class="active"'; } ?>Korisnici</li>
</ul>

Categories