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.
Related
I have problems to convert HTML menu to WP menu. I have div elements inside menu and that div elements are vertical line between li elements. I try do that with Walker class, but i couldn't find solution.
This is code:
<div class="nav-holder">
<i class="fa fa-times-circle"></i>
<nav class="hamburger-menu">
<ul>
<div class="ver-line"></div>
<li class="scroll-link">
biografija
</li>
<div class="ver-line"></div>
<li class="scroll-link">
portfolio
</li>
<div class="ver-line"></div>
<li class="scroll-link">
kontakt
</li>
<div class="ver-line"></div>
</ul>
</nav>
</div>
<!-- nav-holder -->
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>
I just need to include an html file (that has my navigation bars for all my pages).
I've tried: <?php htmlentities(file_get_contents("include/navigation.html")); ?>
But nothing shows up at all.
I've checked other questions like this and the code above is always the answer. So why is it not working for me?
Here's my navigation file if needed:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">[ ] Advanced Web Development</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">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Résume
</li>
<li>
Blog
</li>
<li>
Projects
</li>
<li>
Contact
</li>
<!--
<li class="dropdown">
Portfolio <b class="caret"></b>
<ul class="dropdown-menu">
<li>
1 Column Portfolio
</li>
<li>
2 Column Portfolio
</li>
<li>
3 Column Portfolio
</li>
<li>
4 Column Portfolio
</li>
<li>
Single Portfolio Item
</li>
</ul>
</li>
<li class="dropdown">
Blog <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Blog Home 1
</li>
<li>
Blog Home 2
</li>
<li>
Blog Post
</li>
</ul>
</li>
<li class="dropdown">
Other Pages <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Full Width Page
</li>
<li>
Sidebar Page
</li>
<li>
FAQ
</li>
<li>
404
</li>
<li>
Pricing Table
</li>
</ul>
</li>
-->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
In your above example, php is creating a string from the file, but doing nothing with it. In order to make your code work, you would need to add an echo:
<?php echo htmlentities(file_get_contents("include/navigation.html"));
This is because there are generally three ways that functions can affect things:
Returning a value (what htmlentities does)
Modifying (a) value(s) passed into them (take a look at passing by reference
Echoing something directly or to the output buffer
Since htmlentities returns a value, nothing is sent to output. You would have to either save it to a variable for output later, or echo/print it to the output now.
Alternatively, you could include it as suggested by #David.
While using the echo on your normal code would be sufficent, if you want people to be able to access the HTML, you can include it in a php file itself, anywhere except inside the <?php ?> tag.
htmlentities() does not output to the browser. You still need to echo() or otherwise output.
<?php echo htmlentities(file_get_contents("include/navigation.html")); ?>
Or as suggested in the comments use include() to embed the entire file. PHP will attempt to process the file, so make sure it is error free if it contains any PHP code.
<?php include( "include/navigation.html" ); ?>
try:
<?php
$file = htmlentities(file_get_contents("include/navigation.html"));
echo $file;
?>
i'm new in wordpress and i'd like to replace the footer with a pure html code.
i mean, i till want the "container" generated by wp, but inside i want to use pure html code.
i tried changing the content of "partials/footer-layout.php" to this code, and i'm able to see the code, but not to click the links...
any ideas?
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
About us
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul></div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul></div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul></div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul></div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul></div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Your HTML code isn't XHTML-compliant. There's a missing <li>...</li>.
Some possible solutions:
1- try to add links to the anchor tags and check if it works.
2- check if there's a HTML element which overlaps the anchor tags. Use firebug or any other developer tool to check if there's an overlapping element.
3- check if there's a Javascript event which is called once you click on the anchor. Use a Javascript debugger (Firebug etc.).
Here's the updated code:
<?php
/**
* #package Make
*/
// Footer Options
$footer_layout = (int) get_theme_mod( 'footer-layout', ttfmake_get_default( 'footer-layout' ) );
?>
<footer id="site-footer" class="site-footer footer-layout-<?php echo esc_attr( $footer_layout ); ?>" role="contentinfo">
<div class="footer-text">
<!-- CUSTOM FOOTER CODE STARTS HERE -->
<div class="footer-custom-container">
<div class="footer-column-one">
<h6>Title</h6>
<ul>
<li>About us</li>
<li>Contact us</li>
<li> </li>
<li>Careers</li>
</ul>
</div>
<div class="footer-column-two">
<h6>first column</h6>
<ul>
<li>Support</li>
<li>FAQ</li>
<li>User guides</li>
<li>Download app</li>
</ul>
</div>
<div class="footer-column-three">
<h6>Social & media</h6>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li> </li>
<li>Press</li>
</ul>
</div>
<div class="footer-column-four">
<h6> </h6>
<ul>
<li> </li>
</ul>
</div>
<div class="footer-column-five">
<h6>Title</h6>
<ul>
<li>For business</li>
<li>For installers</li>
<li>Terms & conditions</li>
<li>Privacy policy</li>
</ul>
</div>
<div class="footer-column-six">
<h6>first column</h6>
<ul>
<li>Store</li>
<li>Login</li>
</ul>
</div>
</div>
<!-- CUSTOM FOOTER CODE ENDS HERE -->
</div>
</footer>
Often when you can't click a link, it is a case that a layer is positioned on top of it.
Use a code inspector such as Firebug, and see if there are any 'invisible layers' above that area.
There is also the chance that css has cursor:none applied so it doesn't look like you can click it, but it can. Try replacing your # links with real links.
Also, About us needs li tags around it, but I doubt that is the issue.