I am using current wordpress version, my goal is to active the navbar of the current page using php.
I have this current php code in my navbar:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li>
top
</li>
<li>
FIRST PAGE
</li>
<li>
SECOND PAGE
</li>
</ul><!--/.nav-->
</div><!-- /.navbar-collapse -->
I wanted to put additional active class when the current page is open.
Related
I have a problem with main navigation menu in Magento 1.9:
<nav class="navbar" role="navigation"> <div class="container">
<ul class="nav navbar-nav">
<li class="dropdown">AAA<b class="caret"></b>
<ul class="dropdown-menu"><li class="title">AAB
<li class="" data-submenu-id="submenu-category-node-13550"><a href="#" class=" has-submenu" >AAE</a>
<div id="submenu-category-node-13550" class="popover">
<h2>CHANGE TAG! </h2>
<ul> <li class=""><a href="...
I would like to change the tag H2 inside the submenu, in an H3 tag or other tag, but I don't know where I can find the code; I try to search in app/code/core/Mage/Catolg/Block/Navigation.php and also in efault\template\page\html\header.phtml but without success...
Can anyone helps me? Thanks!
The code shows that this is not exactly the standard menu of the Magento, so look in these folders
app\code\community\
app\code\local\
you may have a module like MegaMenu installed. Therefore, you need to search the file in the module.
I had some big problems calling my header at all from project1.php. It got solved with the header included like this:
<?php include $_SERVER['DOCUMENT_ROOT'] . '/vouzalis/resources/includes/header.php'; ?>
The header is now called, but all my CSS is not called. Howcome can that be? On all my pages there is lying in the root folder the CSS is working fine.
My folder structure is looking like this:
This code below is a snip of my header. As you can see Home should go to index.php. But when I am in my project1.php and I click on Home I get the URL: `
http://localhost:8888/vouzalis/projects/index.php
The correct root should be:
http://localhost:8888/vouzalis/index.php
It does not make sense to be. Does anybody have a clue why? Is it something with how the header is included?
<div class="navbar-collapse collapse">
<ul class="nav nav-pills nav-main pull-right">
<!-- begin navigation items -->
<li class="active">Home</li>
<li>
Services
</li>
<li>
Portfolio
</li>
<li>
About Me
</li>
<li>Contact</li>
<!-- end navigation items -->
</ul>
</div>
I believe the problem is here:
<li class="active">Home</li>
Replace href="index.php" with href="/vouzalis/index.php". The / specifies the domain root, without it, the root is the your current location (/vouzalis/projects/).
I want to use a file called header.php which includes a bootstrap navbar header, is it possible to change for example the 'active' tab in the menu dynamically according to the specific page I am on?
Header.php file:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
Example Website
</div>
<ul class="nav navbar-nav">
<li class="active" id="page1">Page 1</li>
<li id="page2">Page 2</li>
<li id="page3">Page 3</li>
</ul>
</div>
</div>
Let's say I include this with php into page1.php, page2.php and page3.php,
How can I dynamically change the active tab from header.php to for example Page 2 in case of being on page 2?
Update:
I found a solution. Thanks to one of the 'duplicate' references.
Hello i recently just got my web server to run all .html files as .php files which now allows me to use the php include function, which is very useful.
However i have multiple sub directories with multiple files in each.
Homepage
--banners
--banner2.html
--banner2.html
--signs
--sign1.html
and so on. The problem here is im trying to use include for my top nav bar. when i include the bar in the sub files, for example banner2.html it wont correctly link.
nav.php
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
in the nav bar is a link to about.html normally i would do the
about
however i cant do that when every file is going to share the same navigation bar.
How can I fix this?
I have answered my own quest and feel silly for even asking the question. I just used absoulte paths
nav.php
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
<li>
Login
</li>
<li>
Logout
</li>
<li>
<img src="images/Cart.gif" style="height: 20px; width:20px;"> Cart
</li>
</ul>
There are some ways to fix this, one of them is:
Use $_SERVER["DOCUMENT_ROOT"] – We can use this variable to make all our includes relative to the server root directory, instead of the current working directory(script’s directory). Then we would use something like this for all our includes:
`about`
Also you should check this post.
You could use the relative path to the root directory which is /file.ext
Example:
About
I just want to ask if what would I do to transfer the class attribute "active" based on the page I visit on my site.
For example [Bootstrap snippet]:
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
So if I visit profile, the class is transferred into the <li> tag of Profile.
Try this
<ul class="nav nav-pills">
<li <?php if($_SERVER['REQUEST_URI']=='/index.php'){ ?> class="active" <?php } ?>>Home</li>
<li <?php if($_SERVER['REQUEST_URI']=='/profile.php'){ ?> class="active" <?php } ?>>Profile</li>
<li <?php if($_SERVER['REQUEST_URI']=='/message.php'){ ?> class="active" <?php } ?>>Messages</li>
</ul>
//we are taking demo php file like index.php,profile.php,message.php. you can use your own
Hope it will help
If you don't mind using Javascript on your site, Bootstrap has some built-in functionality to do this for you. Just make sure you have targets with resolvable id's (such as <div id="home">).
The biggest issue I run into with this design is that all of your "pages" are rendered at load. I find myself having to use a lot of AJAX if I am building anything that changes based on user input.
From the bootstrap site:
Markup
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.
<ul class="nav nav-tabs">
<li>Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>