I'm making a website in Wordpress and there's one bit where I need to use a dropdown menu to select different options. I don't know what I did wrong and honestly, I don't really know what I'm doing. The site in question is:
http://www.lukegartland.com/final/
As you can see, there is a dropdown menu that you can't actually click on. But when you hit the TAB key a few times and hit the spacebar, it opens up the menu. I'll link to my sourcecode for the page below.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <main>
* and the left sidebar conditional
*
* #since 1.0.0
*/
?><!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if IE]><script src="<?php echo BAVOTASAN_THEME_URL; ?>/library/js/html5.js"></script><![endif]-->
<?php wp_head(); ?>
</head>
<?php
$bavotasan_theme_options = bavotasan_theme_options();
$space_class = '';
?>
<body <?php body_class(); ?>>
<div id="page">
<header id="header">
<nav id="site-navigation" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<h3 class="sr-only"><?php _e( 'Main menu', 'arcade' ); ?></h3>
<a class="sr-only" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'arcade' ); ?>"><?php _e( 'Skip to content', 'arcade' ); ?></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<?php
$menu_class = ( is_rtl() ) ? ' navbar-right' : '';
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar-nav' . $menu_class, 'fallback_cb' => 'bavotasan_default_menu', 'depth' => 2 ) );
?>
</div>
</nav><!-- #site-navigation -->
<div class="title-card-wrapper">
<div class="title-card">
<div id="site-meta">
<p style="display: inline-block; color: #fff; background-color: #fff; width: 45%; height: 200px; border-radius: 5px; margin: 1em; box-shadow: 0px 4px 11px #000; font-size: font-family: 'Roboto Condensed'; font-size: 22px;
color: #464549;"> // Start of Box
</br></br></br></br>Please select your location:
<h1 style="margin-top: -42%;"><img src="http://lukegartland.com/mykids/wp-content/uploads/2014/11/LogoImagesmall.png"></h1>
// The following is the dropdown in question
<select id="foo">
<option value="#">-</option>
<option value="http://www.lukegartland.com/final/map">Maynooth</option>
<option value="http://www.lukegartland.com/final/map">Celbridge</option>
<option value="http://www.lukegartland.com/final/map">Leixlip</option>
<option value="http://www.lukegartland.com/final/map">Dublin</option>
</select>
<script>
document.getElementById("foo").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
</p>
<h1 id="site-title">
<?php bloginfo( 'name' ); ?>
</h1>
<?php if ( $bavotasan_theme_options['header_icon'] ) { ?>
<i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i>
<?php } else {
$space_class = ' class="margin-top"';
} ?>
<div id="sitedescript"<?php echo $space_class; ?>>
<?php bloginfo( 'description' ); ?>
</div>
</div>
<?php
// Header image section
bavotasan_header_images();
?>
</div>
</div>
</header>
<main>
Yours h1 tag have huge padding-bottom and it is covering select-box remove that padding
h1#site-title {padding-bottom:13%;}
in style.css file
There is a h1 element without content but still covering the select box. This happens because the h1 has a negative margin and relative positioning and therefore gains a higher stacking order than the select.
Either remove the following positioning rules from the h1:
#site-title {
position: relative;
margin: -19%;
}
or give the select higher stacking level:
#foo {
position: relative;
z-index: 100;
}
About CSS Stacking
Related
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"
I tried to add an image (137×30) next to the search bar, but I cannot do it properly. It is supposed to look like this:
The code for search bar is like this:
<?php get_search_form(); ?>
Adding the image gave me this result:
How do I make this image align properly?
The code for this webpage as reference if you need to look at it:
<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html <?php language_attributes(); ?> class="no-js">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '-', true, 'right' ); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/ie8.css">
<![endif]-->
<script type="text/javascript">
!function(){function t(){var t=r("utm_content");if(t){var e=new Date;e.setDate(e.getDate()+30),document.cookie=t+";expires="+e.toGMTString()+";path=/"}else if(document.cookie)for(var o=document.cookie.split(/; */),n=0;n<o.length;n++)if(0===o[n].toLowerCase().trim().indexOf("utm_content=")){t=o[n];break}return t}function e(t){try{console.log(t)}catch(e){alert(t)}}function r(t){var e=top.location.search?top.location.search.substring(1):null;if(e)for(var r=e.split("&"),o=0;o<r.length;o++)if(0===r[o].toLowerCase().trim().indexOf(t+"="))return r[o];return null}var o="",n=r("mctest");if(n)e("dnr tag version: 20160125"),o="http://localhost:8080/rip/library/dnr/mcDnrTag.debug.js";else{var a=t(),c="";a&&(c=top.location.search?0<=top.location.search.indexOf("utm_content")?top.location.search:top.location.search+"&"+a:"?"+a,o="https://script.advertiserreports.com/redirector/dnr"+c)}if(o){var i=document.createElement("script");i.src=o,i.type="text/javascript",scriptTag=document.getElementsByTagName("script")[0],scriptTag.parentNode.appendChild(i)}}();
</script>
<?php
wp_head();
if(function_exists('ot_get_option'))
echo ot_get_option( 'cnkt_google_analytics' );
?>
</head>
<body <?php body_class(); ?>>
<?php
$cats = '';
foreach(get_the_category() as $category)
$cats .= $category->slug . ' ';
?>
<div id="container" class="<?php echo $post->post_name; echo ' '. $cats; ?>">
Skip to main content
<div id="wrapper">
<header class="site-header" role="banner">
<div class="row">
<div class="large-12 columns">
<ul class="secondary hide-for-medium-down">
<li class="mailinglist">Join our Mailing List</li>
<li class="quote">Request a Quote</li>
</ul>
<div class="nav-wrap">
<div class="logo">
<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" />
</div>
<div class="sub-wrap hide-for-medium-down">
<nav id="utilitynav" role="navigation">
<ul id="menu-utility" class="menu">
<li id="menu-item-2398" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2398 menu-item-news">
News & Events
</li>
<li id="menu-item-2397" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2397 menu-item-contact-us">
Contact Us
</li>
<li class="linkedin">
<a href="https://www.linkedin.com/company/shaver-industries-inc<?php echo '-' ?>" target="_blank">
<em class="fa fa-linkedin-square"></em>
<span class="offscreen">LinkedIn</span>
</a>
</li>
<li class="twitter">
<a href="https://twitter.com/shaver_inc" target="_blank">
<em class="fa fa-twitter"></em>
<span class="offscreen">Twitter</span>
</a>
</li>
<li class="facebook">
<a href="https://www.facebook.com/ShaverIndustriesInc?fref=ts" target="_blank">
<em class="fa fa-facebook"></em>
<span class="offscreen">Facebook</span>
</a>
</li>
<li class="youtube">
<a href="https://www.youtube.com/channel/UC6zDe4BG-OAuV4_JLrmu-JA" target="_blank">
<em class="fa fa-youtube"></em>
<span class="offscreen">YouTube</span>
</a>
</li>
</ul>
<?php /*if ( has_nav_menu('utility-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'utility-menu', 'container'=>'' ) );
dynamic_sidebar('social-media'); ?>
<?php endif;*/ ?>
<?php
if ( function_exists( 'ot_get_option' ) ) {
if (ot_get_option('cnkt_phone')) {
echo '<span class="number">'.ot_get_option('cnkt_phone').'</span>';
}
}
?>
</nav>
<?php get_search_form(); ?>
</div>
</div>
<nav id="mnav" class="hide-for-medium-down" role="navigation">
<?php if ( has_nav_menu('primary-menu')):?>
<?php wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container'=>'' ) ); ?>
<?php endif; ?>
</nav>
</div>
</div>
<div id="mnav-toggle" class="nav-toggle hide-for-medium-up" aria-hidden="true">
<a href="javascript:void(0);">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</a>
</div>
</header>
<div id="mobile-nav"><div class="wrap"></div></div>
<?php if(!is_page('home')){
get_template_part('includes/page-banner');
} ?>
<!-- #page-content -->
<div id="page-content">
Add an ID outside of your input and img and add below css. Demo example added like this. See at fiddle http://jsfiddle.net/wD5T9/
HTML
<div id='searchWrapper'>
<input id='searchBox' style='width:250px; border:1px solid #cccccc; border-radius:7px 7px 7px 7px; padding:5px 28px 5px 10px; margin-top:14px; margin-left:50px;height:18px;' type='text' placeholder='Search'/>
<img src='http://www.q-park.ie/Portals/8/images/search-icon.png'/>
</div>
CSS
#searchWrapper img {
vertical-align: middle;
}
Here is the solution of your problem....
Your Html
<div class="searchform">
<form method="get" action="http://www.shaverinc.com">
<label for="search" class="offscreen">Search Products</label>
<input type="search" placeholder="Search Products" id="s" name="s" value="">
<button type="submit"><i class="fa fa-search"></i><span class="offscreen">Submit</span></button>
</form>
</div>
<div class="flags">Hello</div>
Your CSS Here.....
.searchform {
position: relative;
overflow: hidden;
height: 34px;
width: 90%;
display: inline-block;
float: left;
}
.flags{
display: block;
width: 9%;
height: 34px;
position: relative;
float: left;
background: #ccc;
}
Manipulate the width according to your need...
I figure it out by myself, I should use div+table to figure this out
<div style="position: relative; width: 600px;">
<table style="width: 100%">
<tr>
<td width="80%"><?php get_search_form(); ?></td>
<td width="20%"><img src="<?php echo get_template_directory_uri(); ?>/img/flags.png"></td>
</tr>
</table>
</div>
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 -->
Web Page: http://nickliddell.com/pieres
Header.php:
<?php
/**
* The Header for our theme.
*
* #package WordPress
*/
global $cubby_options;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<?php wp_title('|', true, 'right'); ?>
</title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<center>
<div class="header">
<div class="top">
<div class="container">
<div class="contact left">
<?php echo cubby_options_array('top_contact_info') ; ?>
</div>
<div class="follow right"> <?php echo cubby_get_social_network(array("skype","facebook",'twitter','google_plus','youtube',"linkedin",'pinterest','rss'));?> </div>
</div>
</div>
<div class="top2">
<div class="container">
<div class="logo left"><a href="<?php echo esc_url(home_url('/')); ?>">
<?php if ( cubby_options_array('logo')!="") { ?>
<img src="<?php echo cubby_options_array('logo'); ?>" alt="<?php bloginfo('name'); ?>" />
<?php }else{ ?>
<span class="site-name">
<?php bloginfo('name'); ?>
</span>
<?php }?>
</a><span class="tagline"><?php echo get_bloginfo( 'description' );?></span></div>
</div>
<div display:table-cell; vertical-align:bottom;>
<?php do_action('wp_menubar','Home'); ?>
</div>
</div>
</div>
</center>
<!--header-->
At the very bottom of the code you will see
<?php do_action('wp_menubar','Home'); ?>
That is my menu bar.
Looking at my page, how can I put the menu bar at the very bottom of my header so that it is aligned with the bottom of the header image?
You need to add a class to the menu div, and add a css instruction like this:
.top2 .menu_bottom{
display: block;
position: absolute;
width: 100%;
bottom: -20px;
}
.top2 {
position: relative;
}
The html must be like this:
<div class="menu_bottom">
<!-- WP Menubar 5.1: start menu Home, template Basic_46, CSS b-blue.css -->
<div class="b-blue-before"></div>
<div class="b-blue">
Home
Tours
Calendar
</div>
<div class="b-blue-after"></div>
<!-- WP Menubar 5.1: end menu Home, template Basic_46, CSS b-blue.css -->
</div>