i am running a website which buy from some one. website is created on php now i am trying to modifying website header i want to set a drop down menu in my header but drop down is not working on it or may be i am programming in a wrong way.
<!-- Nav start -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse" id="nav-main">
<ul class="nav navbar-nav">
<li><a title="" href="<?php echo base_url(); ?>">Home</a></li>
<li class="<?=(current_url()==base_url('cms/cms_page/about-us')) ? 'active':''?>"><a title="" href="<?php echo base_url(); ?>cms/cms_page/about-us">About Us</a></li>
<li><a title="" href="<?php echo base_url() ?>training">Training</a></li>
<li><a title="" href="<?php echo base_url() ?>seeker-login">Post Resume</a></li>
<li class="<?=(current_url()==base_url('job')) ? 'active':''?>"><a title="" href="<?php echo base_url() ?>job">Government Jobs</a></li>
<li><a title="" href="<?php echo base_url() ?>contact">Contact Us</a></li>
<li class="yellow">Employer Site</li>
<li class="black">Sign In</li>
<li class="green">Register</li>
</ul>
<!-- Nav collapes end -->
</div>
<div class="clearfix"></div>
</div>
<!-- Nav end -->
Here is a code in which i want to set drop down
please any one rewrite code of "Training" with drop down for me with same css.
once i get the idea i will do it my self
It's hard to say without seeing the css and js code, but maybe the problem is that the bootstrap js script is not included in your website.
Try adding in your header the links to bootstrap:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
If it is a Wordpress website, you need to include these links via functions.php file:
function your_prefix_scripts() {
wp_enqueue_style('bootstrapcss', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css', array(), '5.0.0');
wp_enqueue_script('bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js', array(), '5.0.0', true);
}
add_action('wp_enqueue_scripts', 'your_prefix_scripts');
Hope this will solve the issue.
Related
here is my code i was just wondering how i can bring that image above the nav bar!
http://jsfiddle.net/Xb2UT/640/
apbook
<body>
<div id="logo00">
<img src="http://emojipedia-us.s3.amazonaws.com/cache/de/ca/decadd7edb6b1014ca0cb7a1afcb8ea3.png">
</div>
<header id="header">
<nav id="nav">
<ul id="ulnav">
<li><a id="test11" href="#two">Software</a></li>
<li><a id="test21" href="#three">Store</a></li>
<li><a id="test31" href="about">About</a></li>
<li><a id="test31" href="blog">Blog</a></li>
<li><a id="test31" href="careers">Career Opportunities</a></li>
<li><a id="test31" href="support">Support</a></li>
<div id="gay">
<li><button id="login-button">Login</button></li>
</div>
</ul>
</nav>
If you mean move the image in front of the header change the z-index on #header. If you mean move the image on top of the header increase the #header top value.
Initially I had a bootstrap navbar, and I hard coded the navbar code into every one of my html files. I set the active class of the tab of whatever page the user was currently viewing manually like this:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
This worked fine, but I realized it was bad practice to repeat code like this, so I put the navbar code into a separate file, turned all my html files into php files, and used the php include statement to load the navbar in each page. I then used JavaScript in an attempt to dynamically set the active class. However, I can't get the active class to show at all when clicking on my tabs.
<head>
<link href="../css/navbar.css" type="text/css" rel="stylesheet" />
</head>
<!-- JAVASCRIPT TO TOGGLE ACTIVE CLASS-->
<script type="text/javascript">
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
</script>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <!-- Mobile collapse-->
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
<span class="icon icon-bar"></span>
</button>
<a class="navbar-brand" href="homepage.html">
<img src="../images/pksoilogo.png" id="logo">
</a>
</div>
<div class="collapse navbar-collapse"> <!-- Mobile collapse/Dropdown-->
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>View Map</li>
<li>Submit Document<li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Any thoughts on how to correct the JavaScript to fix this?
EDIT - Sorry, I hadn't read the part about you wanting a Javascript fix. Hopefully someone can give a JS solution to your problem soon enough!
Here's one way to go about it.
<ul class="nav navbar-nav">
<li <?php if (basename($_SERVER['PHP_SELF']) == 'homepage.php') echo 'class="active"' ?>>Home</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'about.php') echo 'class="active"' ?>>About</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'map.php') echo 'class="active"' ?>>View Map</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'index.php') echo 'class="active"' ?>>Submit Document</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') echo 'class="active"' ?>>Contact</li>
</ul>
Obviously that's not the cleanest of ways, but it's quite easy. You could also make a function that you could call to make it look a bit better.
I am developing a web application and I am having a problem with a menu in the header.
I explain better:
my page is divided like this:
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a id='home' href='#'>Home</a></li>
<li><a id='pagina1' href='#'>pagina1</a></li>
<li><a id='pagina2' href='#'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<main>
<h1> Main</h1>
</main>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
And obviously I have other pages like pagina1.php and pagina2.php
Now....I would like to load the pagina1.php in the when I click on the button on the menu.
I tried some scripts but it seems not not working...Can someone help me?
You have not specified a location for the link to go to. href='#' will keep you on the same page. Change this to any other url.
for example
<li><a id='home' href='/home.php'>Home</a></li>
<li><a id='pagina1' href='/pagina1.php'>/pagina1</a></li>
<li><a id='pagina2' href='/pagina2.php'>/pagina2/a></li>
EDIT:
Since your recent comment indicates you want to change the content of main when you click on a link, this should do the trick.
Create a page called pagina1.html (or php, does not matter) and add the following content:
Pagina1
Create a page called pagina2.html (or php, does not matter) and add the following content:
Pagina 2
Modify your existing page to:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$("#pagina1").click(function(){
$.ajax({url:"pagina1.html",success:function(result){
$("#main").html(result);
}});
});
$("#pagina2").click(function(){
$.ajax({url:"pagina2.html",success:function(result){
$("#main").html(result);
}});
});
});
</script>
</head>
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li><a id='home' href='#'>Home</a></li>
<li><a id='pagina1' href='#'>pagina1</a></li>
<li><a id='pagina2' href='#'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<div id="main">
<h1> Main</h1>
</div>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
I've created a plunk where you can see the code working:
http://plnkr.co/edit/iJZSbWYCWGH3NKBzwY7u?p=preview
you need ajax,
something like this, see http://www.w3schools.com/jquery/ajax_ajax.asp
$("#pagina1, #pagina2").click(function(){
page = $(this).attr("id");
$.ajax({url: page + ".php", success: function(result){
$("main").html(result);
}});
});
Simply use load function
$("#pagina1").click(function(){
$("main").empty();
$("main").load(pagina.php);
});
$("#pagina2").click(function(){
$("main").empty();
$("main").load(pagina2.php);
});
html
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div>
<header>
<font color=white align='center'>HEADER</font>
<nav class='clearfix'>
<ul class='clearfix'>
<li id='home'>Home</a></li>
<li id='pagina1'>pagina1</a></li>
<li id='pagina2'>pagina2</a></li>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
</header>
</div>
<main>
<h1> Main</h1>
</main>
<footer>
<nav class='clearfix'>
<font color=white align='center'>FOOTER</font>
</nav>
</footer>
Here, I have 2 files index.php and pop_map.php. I have created index.php file using bootstrap and when I console it, it works fine but when I am trying to call it from pop_map.php file, where I have included index.php file, there is a gap in between header and nav bar and the dropdown button does not work. Please help!
index.php file
<html>
<head>
<title>Visualization</title>
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<style type="text/css">
#media(max-width: 10px){
h1{
font-size: 22px;
font-color:blue;
text-align: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="start navbar-default navbar-fixed-top" style="text-align:center;background-color:#006400;height:100px" >
<h1>Millenium Development Goal-7<br><small>Ensure Environmental Sustainability</small></br></h1>
<div class="navbar navbar-inverse navbar-static-top " style="background-color:#9ACD32" >
Home
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="pop_map.php" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Population
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Sanitation
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color:008000">Water
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Central</li>
<li>Western</li>
<li>Far-Western</li>
<li>Mid-Western</li>
<li>Eastern</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src ="js/bootstrap.js"></script>
</body>
</html>
Now, in pop_map.php file, I have included this file using . But it does not work. Please help!
..you are probably using a wrong path to include the files. Right click on the loaded page, view source, and click on the bootstrap.min.css and bootstrap.js. Are they loaded correctly? If not, it probably has to do with your path.
Did you include the bootstrap-dropdown.js?
Try adding this line to the code
<script src="js/bootstrap-dropdown.js"></script>
Cross-check the path to your stylesheets.
I experienced this problem once, and it seems tricky but it has a straight forward solution.
You're not linking properly to your stylesheets. View the page source from the browser and open the link to the bootstrap stylesheets, they probably wouldn't be found.
You can also just add this at the top of "style.css" before any code but after the stylesheet header (the comment):
#import url('css/bootstrap.min.css');
I don't know what I'm doing wrong. When I use the following code, nothing actually gets linked to the page, except the random text at the bottom:
<?php
function salt_scripts() {
//global $wp_styles;
//wp_enqueue_style( 'stylesheet', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
//wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Varela');
// Loads main stylesheet
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap-theme', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_style( 'custom-styles', get_template_directory_uri() . '/css/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'salt_scripts' );
?>
LKDJFLSDKJFLSDKFJSLDKFJ WORK
I'm really at a loss at what else to try. I've been to dozens of sites and have stolen code bits from the default WordPress themes.
My folder structure is like this:
salt
css
bootstrap.css
bootstrap-theme.min.css
custom-styles.css
img
js
style.css
header.php
index.php
functions.php
This is what's in my header.php:
<body data-spy="scroll" data-target="#main-nav" data-offset="120">
<!-- Begin Main Nav-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="main-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#home"><img src="images/SaltSolutionsLogo.jpg" alt="SALT Solutions" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Solutions</li>
<li>Case Studies</li>
<li>Resources</li>
<li>Calculate</li>
<li>Our Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right social-media hidden">
<li><img src="images/facebook.png" alt="Facebook" /></li>
<li><img src="images/twitter.png" alt="Twitter" /></li>
<li><img src="images/googleplus.png" alt="Google+" /></li>
<li><img src="images/linkedin.png" alt="LinkedIn" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--End main-nav -->
You're missing the top of your document which is why this isn't working.
Add the following to the top of header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
Much more could / should go here but this will get you started and fix your CSS loading issue.
Close off the HTML tag in footer.php
Before </body> in footer.php add <?php wp_footer(); ?>
E.g.
<?php wp_footer(); ?>
</body>
</html>