Here is my website:
drawyourpets.com
I followed the tutorial here: http://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/, but unfortunately my hamburger menu is always visible (it's only supposed to be visisble from 0-780px) and it doesn't work.
I copied and pasted the code from the HTML section into header.php. The code from the tutorial starts with div class="mobile nav" and ends with it's respective div. I also added
<script src="javascript.js"></script>
to link header.php to the javascript code from the tutorial. Javascript.js was uploaded to the child theme.
<?php
/** * Header template * * #package Portfolio Press */?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script src="javascript.js"></script>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() .
'/js/html5.js' ); ?>">
</script><![endif]-->
<?php wp_head(); ?></head><body <?php body_class(); ?>><div id="page">
<header id="branding">
<div class="col-width">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?
>
<div class="logo">
<a href="<?php echo esc_url( home_url( '/' ) );
?>
"rel="home">
<img src="<?php echo esc_url( portfoliopress_get_option( 'logo' ) ); ?
>" alt="<?php echo bloginfo( 'name' ) ?>">
</a>
</div>
<div class="site-description">
<h1 id="pets">DRAW YOUR PETS</h1>
<h3 id="italic">-The Creative Side-
</h2>
</div>
<div class="clear clearfix">
</div>
<div class="site-navigation primary-navigation" role="navigation">
<div class="mobile-nav">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>
<div class="responsive-menu">
<ul>
<li><a href="http://drawyourpets.com/">
HOME</a>
</li>
<li>
<a href="http://drawyourpets.
com/index.php/audio/">
AUDIO
</a>
</li>
<li><a href="http://drawyourpets.com/index.php/video-3/">
VIDEO
</a>
</li>
<li>
<a href="http://
drawyourpets.com/index.php/other/">
OTHER</a>
</li>
</ul>
</div>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class'|
=> 'nav-menu' ) ); ?>
</div>
<div id="main">
<div class="site-wrapper">
Besides that, I just added the CSS from the tutorial into my child theme stylesheet with this media query above it:
#media screen and (min-width: 780px) .menu-btn div {
So I'm not sure what I've done wrong or what I need to do to fix it. Let me know if you have any ideas. Thanks!
<script src="javascript.js"></script>
Firstly, the path is wrong; 404;
<script src="<?php bloginfo('template_url'); ?>/js/javascript.js"></script>
bloginfo('template_url'); This is your path of theme, you can upload the javascript.js to the corresponding path
Secondly, the "javascript.js" need "jquery.js"; So you must add this behind "jquery.js"
No, you just include a jQuery files. Add this :
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
above your javascript.js
Related
I am currently working on a website I didn't code in the first place. It was created by someone else on Wordpress using the Sidney Theme and there is no child-theme.
Here is my problem : when I update the header.php file by going to Appearance -> Editor, the website crashes and all the CSS disappears.
Fortunalely, I made a backup of the website so I recovered it.
I never had any problem like this one. It is the first time I post on Stack Overflow so if you need any info just tell me.
The website is under version 5.1.1 of Wordpress.
Here is header.php file if it can help :
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div
id="content">
*
* #package Sydney
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php if ( ! function_exists( 'has_site_icon' ) || ! has_site_icon()
) : ?>
<?php if ( get_theme_mod('site_favicon') ) : ?>
<link rel="shortcut icon" href="<?php echo
esc_url(get_theme_mod('site_favicon')); ?>" />
<?php endif; ?>
<?php endif; ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action('sydney_before_site'); //Hooked: sydney_preloader() ?>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'sydney' ); ?></a>
<?php do_action('sydney_before_header'); //Hooked: sydney_header_clone() ?>
<header id="masthead" class="site-header" role="banner">
<div class="header-wrap">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-12">
<?php if ( get_theme_mod('site_logo') ) : ?>
<img class="site-logo" src="<?php echo esc_url(get_theme_mod('site_logo')); ?>" alt="<?php bloginfo('name'); ?>" />
<?php else : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php endif; ?>
</div>
<div class="col-md-8 col-sm-4 col-xs-12">
<div class="btn-menu"></div>
<nav id="mainnav" class="mainnav" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'fallback_cb' => 'sydney_menu_fallback' ) ); ?>
</nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>
</header><!-- #masthead -->
<?php do_action('sydney_after_header'); ?>
<div class="sydney-hero-area">
<?php sydney_slider_template(); ?>
<div class="header-image">
<?php sydney_header_overlay(); ?>
<img class="header-inner" src="<?php header_image(); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>">
</div>
<?php sydney_header_video(); ?>
<?php do_action('sydney_inside_hero'); ?>
</div>
<?php do_action('sydney_after_hero'); ?>
<div id="content" class="page-wrap">
<div class="container content-wrapper">
<div class="row">
don't use theme Editor. open your cpanel. go to your theme folder. edit your header file. then paste your code.
thankyou.
i wanna change a link in logo header in wordpress, but i don't know how to change that, i've try to change header.php , unfortunately, that's not working
header.php
<?php
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="body-content-wrapper">
<header id="header-main-fixed">
<div id="header-content-wrapper">
<div id="header-top">
<div id="weglot_here"></div>
<? //php fart_display_social_sites(); ?>
</div>
<div class="clear"></div>
<div id="header-logo">
<?php fart_show_website_logo_image_and_title(); ?>
</div><!-- #header-logo -->
<nav id="navmain">
<?php wp_nav_menu( array( 'theme_location' => 'primary',
'fallback_cb' => 'wp_page_menu',
) ); ?>
</nav><!-- #navmain -->
<div class="clear">
</div><!-- .clear -->
</div><!-- #header-content-wrapper -->
</header><!-- #header-main-fixed -->
<div id="header-spacer">
</div><!-- #header-spacer -->
anyone can help me?
Locate the fart_show_website_logo_image_and_title() function inside functions.php and change the href attribute in the line below to the one you want:
echo '<a href="' . esc_url( home_url('/') ) . '" title="' . esc_attr( get_bloginfo('name') ) . '">';
I'm trying to modify the twentyfifteen theme to have the basic lay-out like in the picture here:
With the top bar with the logo and image at the top and the menu on the side below the top bar. My attempt was to add a div straight at the opening of the body tag in the header to see if the placement would work. It is visible but it doesn't "push down" the side menu like I want it to be (like in the picture.
This is my header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div style="background-color: black; width: 100%; height: 100px;"></div>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>
<div id="sidebar" class="sidebar">
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php
twentyfifteen_the_custom_logo();
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?></p>
<?php endif;
?>
<button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
</div><!-- .site-branding -->
</header><!-- .site-header -->
<?php get_sidebar(); ?>
</div><!-- .sidebar -->
<div id="content" class="site-content">
In case it is relevant I also attached the theme's stylesheet here.
With my modifications this is how the div shows up:
The black bar should be above the menu on the left and push it down.
It is because you insert it into the sidebar div and not outside of it, create another div before "sidebar"
The theme I have selected in Wordpress is very simple with not a lot of customizations built in. I am trying to add a small logo to appear to the left of the Name and Description at the top left of the page.
I have uploaded the file and have been able to succesfully add the following code
<img src = "http://www.pixelbip.com/wp-content/uploads/2015/08/PixelBip-Icon.png" height="70" width="70"/>
But that just puts the logo at the top left then the Name and Description appear below the logo.
Also. I am not very experienced with PHP or CSS. I know a little bit only.
Here is the contents of my header.php file
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package Readly
* #since Readly 1.0
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title('|', true, 'right'); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php do_action('before'); ?>
<header id="masthead" class="site-header" role="banner">
<div id="header-wrapper">
<hgroup>
<div id="hgroup-wrapper">
<div id="hgroup-wrapper2">
<h1 class="site-title"><?php bloginfo('name'); ?></h1>
<h2 class="site-description"><?php bloginfo('description'); ?></h2>
</div>
</div>
</hgroup>
<nav id="site-navigation" class="navigation-main" role="navigation">
<div id="site-navigation-wrapper">
<div id="site-navigation-wrapper2">
<h1 class="menu-toggle"><?php _e('Menu', 'readly'); ?><span>m</span></h1>
<div class="assistive-text skip-link"><?php _e('Skip to content', 'readly'); ?></div>
<?php wp_nav_menu(array('theme_location' => 'primary', 'fallback_cb' => false)); ?>
</div>
</div>
</nav><!-- .site-navigation -->
</div>
</header><!-- #masthead -->
<div id="page" class="hfeed site">
<div id="main" class="site-main">
Can anyone spell out for a newbie how i can add the code I need?
One more thing I need to add. I need to do this change to the Child theme header.php so that future updates to the theme don't mess up my logo.
Thanks very much!
This question already has answers here:
Reference - What does this error mean in PHP?
(38 answers)
Closed 8 years ago.
I get the following error when I open the index page:
Parse error: syntax error, unexpected $end in C:\xampp\htdocs\... on
line 161
Here is the code:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title>
<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home / front page.
$site_description = get_bloginfo( 'description', 'display' );
if( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );
?>
</title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
if( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-57-precomposed.png">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php include 'storeclass.php'; ?>
<style>
.navbar .nav li a
{
padding-right: 0px !important;
}
</style>
<?php
if( function_exists( 'teboAnalytic' ) ){
teboAnalytic();
}
?>
</head>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<style>
.container
{
max-width: 300px;
}
</style>
<body style="background-color: #E7EBF2;padding-top:65px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php
}
else
{
?>
<body style="background-color: #E7EBF2;padding-top:45px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php
} ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width:940px;">
<ul class="nav">
<li class="hidden-phone">
<img src="<?php echo BASE_URL.'weblogo.png'; ?>" style="width:270px;">
</li>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<li class="dropdown" style="margin-left:15px;">
<?php
}
else
{
?>
<li class="dropdown offset2">
<?php
} ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="padding:0;">
<img src="<?php echo BASE_URL; ?>callus.png" style="height:46px;width:203px">
</a>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
callUsBanner('mobile');
}
else
{
callUsBanner('desktop');
}
?>
</li><!-- Regular Menu Ends -->
<li class="divider-vertical">
</li>
</ul>
</div>
</div>
</div>
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<link rel="stylesheet" href="mobile-custom.css" />
<style>
.hhd
{
display: inline-block;
height: 5px;
width: 100%;
}
</style>
<?php
} ?>
<div class="container hhd" style="height:41px;">
<?php
if($detect->isMobile() AND !$detect->isTablet()){
?>
<img src="weblogo.png" style="width:270px;">
<div class="row">
<div class="styled-select blue semi-square divsel span12">
<?php menu1(); ?>
</div>
</div>
<?
} ?>
<div class="subnavbar navbar navbar hidden-phone">
<div class="navbar-inner subnav">
<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>
<ul class="nav" style="font-size:13px;">
<li class="hidden-phone">
<img src="badge.jpg" style="width:40px;">
</li>
<li class="hidden-phone">
<a href="" style="padding-right: 5px;">
<i class="icon-home">
</i>Home
</a>
</li>
<li class="hidden-phone">
<a href="">
<i class=" icon-th-large">
</i>Store
</a>
</li>
<li class="hidden-phone">
<a href="">
<i class=" icon-tag">
</i>Bursa
</a>
</li>
<li class="divider-vertical subnav">
</li>
<?php menuIjo('desktop','top'); ?>
</ul>
</div>
</div>
</div>
</div>
<script>
$('.renav').click(function(e)
{
//alert('ha');
$('section.dropdown-menu *').removeAttr('data-toggle');
});
</script>
<!-- End Header -->
<!-- Begin Template Content -->
could you help me to solve this problem?
thanks
replace
<? with <?php on line number 132 ( <? } ?> to <?php } ?>
the correct code will be
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;
wp_title( '|', true, 'right' );
// Add the blog name.
bloginfo( 'name' );
// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";
// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'bootstrapwp' ), max( $paged, $page ) );
?></title>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="icon.jpg">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo( 'template_url' );?>/ico/apple-touch-icon-57-precomposed.png">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
<?php include 'storeclass.php'; ?>
<style>
.navbar .nav li a{
padding-right: 0px !important;
}
</style>
<?php
if ( function_exists( 'teboAnalytic' ) ) {
teboAnalytic();
}
?>
</head>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<style>
.container{
max-width:300px;
}
</style>
<body style="background-color: #E7EBF2;padding-top:65px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php }else{?>
<body style="background-color: #E7EBF2;padding-top:45px;" <?php body_class(); ?> data-spy="scroll" data-target=".bs-docs-sidebar" data-offset="10">
<?php } ?>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width:940px;">
<ul class="nav">
<li class="hidden-phone">
<img src="<?php echo BASE_URL.'weblogo.png'; ?>" style="width:270px;">
</li>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<li class="dropdown" style="margin-left:15px;">
<?php }else{ ?>
<li class="dropdown offset2">
<?php } ?>
<img src="<?php echo BASE_URL; ?>callus.png" style="height:46px;width:203px">
<?php if ($detect->isMobile() AND !$detect->isTablet()) {
callUsBanner('mobile');
}else{
callUsBanner('desktop');
}
?>
</li><!-- Regular Menu Ends -->
<li class="divider-vertical"></li>
</ul>
</div>
</div>
</div>
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<link rel="stylesheet" href="mobile-custom.css" />
<style>
.hhd{
display:inline-block;
height:5px;
width:100%;
}
</style>
<?php } ?>
<div class="container hhd" style="height:41px;">
<?php if ($detect->isMobile() AND !$detect->isTablet()) {?>
<img src="weblogo.png" style="width:270px;">
<div class="row">
<div class="styled-select blue semi-square divsel span12">
<?php menu1(); ?>
</div>
</div>
<?php } ?>
<div class="subnavbar navbar navbar hidden-phone">
<div class="navbar-inner subnav">
<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>
<ul class="nav" style="font-size:13px;">
<li class="hidden-phone"><img src="badge.jpg" style="width:40px;"></li>
<li class="hidden-phone"><i class="icon-home"></i>Home</li>
<li class="hidden-phone"><i class=" icon-th-large"></i>Store</li>
<li class="hidden-phone"><i class=" icon-tag"></i>Bursa</li>
<li class="divider-vertical subnav"></li>
<?php menuIjo('desktop','top'); ?>
</ul>
</div>
</div>
</div>
</div>
<script>
$('.renav').click(function(e){
//alert('ha');
$('section.dropdown-menu *').removeAttr('data-toggle');
});
</script>
<!-- End Header -->
<!-- Begin Template Content -->