I can't get rid of the unwanted white space that added itself at the end of the website.
The link to the website is : http://www.authorwilliamjwarren.com/
I tried ,
deactivating plugins
html, body { height:100%}
reset to default CSS
But none of them didn't work for this.
I've checked most of other answers to the same problem, but nothing seem to fit my case.
Any help would be greatly appreciated,
Thank you !!
In your stylesheet you have:
media="all"
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Replace it with the following:
media="all"
.navbar {
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
The position relative on the .navbar is causing your "whitespace" problem.
This is the code of Header.php file. From where do you think those links come from?
How to remove those links?
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package dazzling
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!-- favicon -->
<?php if ( of_get_option( 'custom_favicon' ) ) { ?>
<link rel="icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" />
<?php } ?>
<!--[if IE]><?php if ( of_get_option( 'custom_favicon' ) ) { ?><link rel="shortcut icon" href="<?php echo of_get_option( 'custom_favicon' ); ?>" /><?php } ?><![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php if( get_header_image() != '' ) : ?>
<div id="logo">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php bloginfo( 'name' ); ?>"/>
</div><!-- end of #logo -->
<?php endif; // header image was removed ?>
<?php if( !get_header_image() ) : ?>
<div id="logo">
<span class="site-name"><a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span>
</div><!-- end of #logo -->
<?php endif; // header image was removed (again) ?>
</div>
<?php dazzling_header_menu(); ?>
</div>
</nav><!-- .site-navigation -->
Thank you!!
Related
when I try to put in an SVG file as the logo to my website, like it tells me to do in the Kirby documentation, it properly shows up in Chrome on the left edge of the page, but not in Safari. Image provided. CSS Rules like padding, width, margin or align don't do anything, and this only seems to happen in Safari.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?= $site->title() ?> | <?= $page->title() ?></title>
<?= css([
'assets/css/prism.css',
'assets/css/lightbox.css',
'assets/css/index.css',
'#auto'
]) ?>
<link rel="shortcut icon" type="image/x-icon" href="<?= url('favicon.ico') ?>">
</head>
<body>
<header class="header">
<a style="padding:0;" href="<?= $site->url() ?>">
<img src="/assets/icons/logo.svg" height="48">
</a>
<nav class="menu">
<?php foreach ($site->children()->listed() as $item): ?>
<a <?php e($item->isOpen(), 'aria-current ') ?> href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
<?php endforeach ?>
<?php snippet('social') ?>
</nav>
</header>
<main class="main">
My website is www.rosstheexplorer.com
When the device width is greater than 601px I want the following to happen
I don't want there to ever be any space between the menu and the
custom header
I don't want there to ever be any space above the customer header
I don't want H1, the plugins or any other content on the page to ever overlap the customer header
I don't want there to ever be any white space to the left or right of the customer header
I want to always be able to see the whole text 'Ross The Explorer', I don't want the last R to ever be removed
Look at www.nomadicmatt.com for an idea on what I want to achieve.
To put the custom-header in its own row I tried to use the following code
<div class="row">
<div class="col-sm-12" style="background-color:lavender;">
<div class="custom-header"></div>
</div>
</div>
This appeared to have no effect.
Here is the complete header.php code.
<?php
/**
* The Header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package Penscratch
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<
head>
<meta charset="<?ph
p bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( 'A|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php wp_head(); ?>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script
>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div class="custom-header"></div>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
<?php if ( function_exists( 'jetpack_the_site_logo' ) ) jetpack_the_site_logo(); ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e( 'Menu', 'penscratch' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->
<div id="content" class="site-content">
<?php if ( get_header_image() ) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
</a>
<?php endif; // End header image check. ?>
In Additional CSS I have the following code
#media screen and (min-width: 75em)
{
.site {
max-width: 1153px;
margin: 400px auto;
padding: 54px 108px;
}
}
#media screen and (min-width: 601px) {
.custom-header { background: url("https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg") no-repeat;
width: 100% ;
background-size:contain;
}
}
After including the new code, loading http://www.rosstheexplorer.com/wp-content/themes/penscratch/css/bootstrap-3.3.7.css and http://www.rosstheexplorer.com/wp-content/themes/penscratch/js/bootstrap.min.js still results in a 404 error (not found).
Can people give me suggestions on other code I could try?
Thank you
Yes this is your code:
#media screen and (min-width: 601px)?custom-css=d4d401c306:9
.custom-header {
background: url(https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg) no-repeat;
width: 100%;
height: 40%;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
/* change background-size: cover; to background-size: 100%; */
#media screen and (min-width: 601px)?custom-css=d4d401c306:9
.custom-header {
background: url(https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg) no-repeat;
width: 100%;
height: 40%;
background-size: 100%;
position: absolute;
top: 0;
left: 0;
}
So I have a site created via wordpress. My problem is that the doctype is declared after a div which is I think is wrong. but since I'm using wordpress I put the doctype tag on my header but my header is inside a div.
header content
<div class="row" >
<?php get_header(); ?> // <-- doctype loads here
<div id="content">
<div class="twelve columns clearfix">
<section class="nine columns clearfix" itemprop="articleBody" style="border-right: 1px solid #a79c7f; min-height:450px !important;">
<?php if ( have_posts() ) : ?>
<?php query_posts('category_name=post da'); while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"target="_blank" ><h1><?php the_title(); ?></h1>
<?php the_excerpt(); ?></a>
<hr>
<?php endwhile; ?>
</section>
<?php if (function_exists('page_navi')) { // if expirimental feature is active ?>
<?php page_navi(); // use the page navi function ?>
<?php } else { // if it is disabled, display regular wp prev & next links ?>
<nav class="wp-prev-next">
<ul class="clearfix">
<li class="prev-link"><?php next_posts_link(_e('« Older Entries', "bonestheme")) ?></li>
<li class="next-link"><?php previous_posts_link(_e('Newer Entries »', "bonestheme")) ?></li>
</ul>
</nav>
<?php } ?>
<?php else : ?>
<?php endif; ?>
<?php get_sidebar(); ?>
</div> <!-- end #main -->
</div> <!-- end #content -->
<?php get_footer(); ?>
</div> <!-- end .row-->
Now I know this can be resolve by removing the doctype tag inside the header and placing it before
<div class="row" >
but it will be redundant to put it on every template that I create. is there anything I can do to other than putting my doctype to every page like the way I'm using with the header but in a correct order.
I can't exchange the place of the header to my row because the design will break.
ANOTHER QUESTION: Is it possible to start a div from my header and not placing the closing tag to the header but placing it on the footer. will that work? so i can place the starting div row after the doctype tag on the header instead of placing it before the whole header.
I already fixed the problem by putting the div row inside the header.php file after the doctype tag.
then removing all the row i declare on every template. the closing tag is locatedat the footer before the html and body is closed. everything is fixed i think for now. :)
<!doctype html>
<!--[if IEMobile 7 ]> <html <?php language_attributes(); ?>class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html <?php language_attributes(); ?> class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html <?php language_attributes(); ?> class="no-js ie8"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Hotel Frederiksminde" content="Wordpress Site of Hotel Frederiksminde." />
<title><?php bloginfo('name'); ?><?php wp_title( '«', true, 'left'); ?> </title>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- icons & favicons -->
<!-- For iPhone 4 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/h/apple-touch-icon.png">
<!-- For iPad 1-->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/m/apple-touch-icon.png">
<!-- For iPhone 3G, iPod Touch and Android -->
<link rel="apple-touch-icon-precomposed" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/l/apple-touch-icon-precomposed.png">
<!-- For Nokia -->
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/library/images/icons/l/apple-touch-icon.png">
<!-- For everything else -->
<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_template_directory_uri(); ?>/hotelfs.png" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
<!-- media-queries.js (fallback) -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- html5.js -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<!-- wordpress head functions -->
<?php wp_head(); ?>
<!-- end of wordpress head -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<!-- bring in theme options styles -->
<?php
$heading_typography = of_get_option('heading_typography');
if ($heading_typography) {
$theme_options_styles = '
h1, h2, h3, h4, h5, h6{
font-family: ' . $heading_typography['face'] . ';
font-weight: ' . $heading_typography['style'] . ';
color: ' . $heading_typography['color'] . ';
}';
}
$main_body_typography = of_get_option('main_body_typography');
if ($main_body_typography) {
$theme_options_styles .= '
body{
font-family: ' . $main_body_typography['face'] . ';
font-weight: ' . $main_body_typography['style'] . ';
color: ' . $main_body_typography['color'] . ';
}';
}
$link_color = of_get_option('link_color');
if ($link_color) {
$theme_options_styles .= '
a{
color: ' . $link_color . ';
}';
}
$link_hover_color = of_get_option('link_hover_color');
if ($link_hover_color) {
$theme_options_styles .= '
a:hover{
color: ' . $link_hover_color . ';
}';
}
$link_active_color = of_get_option('link_active_color');
if ($link_active_color) {
$theme_options_styles .= '
a:active{
color: ' . $link_active_color . ';
}';
}
$topbar_bg_color = of_get_option('top_nav_bg_color');
if ($topbar_bg_color) {
$theme_options_styles .= '
.top-nav {
background-color: '. $topbar_bg_color . ';
}';
}
$topbar_link_color = of_get_option('top_nav_link_color');
if ($topbar_link_color) {
$theme_options_styles .= '
.top-nav > li > a {
color: '. $topbar_link_color . ' !important;
}';
}
$topbar_link_hover_color = of_get_option('top_nav_link_hover_color');
if ($topbar_link_hover_color) {
$theme_options_styles .= '
.top-nav > li > a:hover {
color: '. $topbar_link_hover_color . ' !important;
}';
}
$suppress_comments_message = of_get_option('suppress_comments_message');
if ($suppress_comments_message){
$theme_options_styles .= '
#main article {
border-bottom: none;
}';
}
if($theme_options_styles){
echo '<style>'
. $theme_options_styles . '
</style>';
}
?>
<style>
#glt-translate-trigger {
background: #9f6330;
color: #ffffff;
cursor: pointer;
}
.goog-te-combo {
height: 20px !important;
top: -5px;
position: relative;
font-size: 11px;
}
#google_language_translator {
height: 20px;
width: 100px;
float: right;
}
.goog-te-gadget .goog-te-combo {
margin: 4px 0;
width: 100px !important;
}
#media only screen and (max-width: 874px) {
.goog-te-gadget .goog-te-combo {
display:none;
}
}
#media only screen and (max-width: 844px) {
#glt-translate-trigger {
height: 10px;
font-size: 10px ;
}
}
</style>
</head>
<body <?php body_class(); ?>>
<div class="row" > // DIV STARTS HERE
<header role="banner" id="top-header">
<div class="twelve columns" style="background: transparent; padding:0px !important;" >
<section class="twelve columns text-center" style="background: transparent;">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/09/fredlogo.png" alt="Hotel Frederiksminde Logo" style="height:100px; width:410px;">
</section>
<section class="twelve columns text-center" style="background: transparent;padding:0px !important; ">
<div class="menuimg">
<img src="http://fabioide.com/frederiksminde/wp-content/uploads/2014/10/menu.jpg" style="width:30px; height:30px;" alt="Mobile Menu" >
</div>
<div id="navcontainer">
<?php // Navigation that display all pages. ?>
<?php // wp_nav_menu( array( 'sort_column' => 'menu_order', 'container' => false, 'theme_location' => 'The Main Menu Dansk', 'exclude' => '479' ) ); ?>
<?php if ( is_active_sidebar( 'sidebar2' ) ) : ?>
<?php dynamic_sidebar( 'sidebar2' ); ?>
<?php else : ?>
<!-- This content shows up if there are no widgets defined in the backend. -->
<div class="alert-box">Please activate some Widgets.</div>
<?php endif; ?>
</section>
</div>
<div class="twelve columns" style="background: transparent; padding:0px;" >
<div class="slider">
<?php masterslider(1); ?>
</div>
</header> <!-- end header -->
I'm building my first WordPress site and I am having a little bit of trouble. I have a problem with a PHP script.
The site http://www.berlinairliftveteransassociation.org/wordpress I put a JavaScript slide show. I finally got the image to show up. The problem I am facing is when I try to center this image. I'm almost certain this image is contained inside a <div>. I'm hoping someone could check out the link and then to tell me what's wrong.
I can't post the CSS, because it is extremely long. With developer tools you can see the CSS. This is probably an easy problem but I'm still a novice.
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* #package WordPress
* #subpackage Twenty_Twelve
* #since Twenty Twelve 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="java.js"></script>
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>java.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="red"></div>
<div id="yellow"></div>
<div id="page" class="hfeed site leftBlueBorder">
<img name="slide" class ="wrapper" id="slider main"><header id="masthead" class="site-header" role="banner">
<hgroup><h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
<?php endif; ?>
</header><!-- #masthead -->
<div id="main" class="wrapper">
Wrap <img name="slide" class ="wrapper" id="slider main"> in a div and align that.
<div class="headSlider>
<img name="slide" class="wrapper" id="slider main" src="slides/2.jpg">
</div>
and add the following to your css file.
.headSlider
{
margin-left: auto;
margin-right: auto;
width: 875px;
}
I would just apply css to the image itself to fill the container div:
img#slider {
width: 100%;
height: auto;
}
Note: you are using an illegal value for the id of the image... it has a space.
img#slider {
margin: 0 auto;
display: block;
}
Well you can center the image by wrapping it in a div with text-align css property set to center, eg change:
<img name="slide" class ="wrapper" id="slider main">
to:
<div style="text-align:center;">
<img name="slide" class="wrapper" id="slider main">
</div>
*You should use a css style linked to a class or id rather than an inline style, thats just to illustrate
Also your image has multiple ids (slider and main) - html elements should only have a single unique id
There are probably other issues, but thats beyond the scope of this question
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
My website's submenu disappears on hover. I am pretty sure it's in header.php. Here's the code with the code that I think relates to this (see: ):
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" <?php language_attributes();?>> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" <?php language_attributes();?>> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" <?php language_attributes();?>> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" <?php language_attributes();?>> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html <?php language_attributes();?>> <!--<![endif]-->
<head>
<title><?php if ( is_category() ) {
echo __('Category Archive for "', 'theme1773'); single_cat_title(); echo __('" | ', 'theme1773'); bloginfo( 'name' );
} elseif ( is_tag() ) {
echo __('Tag Archive for "', 'theme1773'); single_tag_title(); echo __('" | ', 'theme1773'); bloginfo( 'name' );
} elseif ( is_archive() ) {
wp_title(''); echo __(' Archive | ', 'theme1773'); bloginfo( 'name' );
} elseif ( is_search() ) {
echo __('Search for "', 'theme1773').wp_specialchars($s).__('" | ', 'theme1773'); bloginfo( 'name' );
} elseif ( is_home() || is_front_page()) {
bloginfo( 'name' ); echo ' | '; bloginfo( 'description' );
} elseif ( is_404() ) {
echo __('Error 404 Not Found | ', 'theme1773'); bloginfo( 'name' );
} elseif ( is_single() ) {
wp_title('');
} else {
echo wp_title( ' | ', false, right ); bloginfo( 'name' );
} ?></title>
<meta name="description" content="<?php wp_title(); echo ' | '; bloginfo( 'description' ); ?>" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="icon" href="<?php bloginfo( 'template_url' ); ?>/favicon.ico" type="image/x-icon" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'atom_url' ); ?>" />
<?php /* The HTML5 Shim is required for older browsers, mainly older versions IE */ ?>
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" />
</div>
<![endif]-->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/normalize.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/prettyPhoto.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/grid.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/css/jquery-ui.css" />
<?php
/* We add some JavaScript to pages with the comment form
* to support sites with threaded comments (when in use).
*/
if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
wp_head();
?>
<!--[if lt IE 9]>
<style type="text/css">
.blue,
.black,
.white,
.button,
.white h1, .white h3, .black h1, .black h3, .blue h3, .blue .title, #booking-form h2 {
behavior:url(<?php bloginfo('stylesheet_directory'); ?>/PIE.php)
}
</style>
<![endif]-->
<script type="text/javascript">
// initialise plugins
jQuery(function(){
// main navigation init
jQuery('ul.sf-menu').superfish({
delay: <?php echo of_get_option('sf_delay'); ?>, // one second delay on mouseout
animation: {opacity:'<?php echo of_get_option('sf_f_animation'); ?>'<?php if (of_get_option('sf_sl_animation')=='show') { ?>,height:'<?php echo of_get_option('sf_sl_animation'); ?>'<?php } ?>}, // fade-in and slide-down animation
speed: '<?php echo of_get_option('sf_speed'); ?>', // faster animation speed
autoArrows: <?php echo of_get_option('sf_arrows'); ?>, // generation of arrow mark-up (for submenu)
dropShadows: <?php echo of_get_option('sf_shadows'); ?> // drop shadows (for submenu)
});
});
// Init for audiojs
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
// Init for si.files
SI.Files.stylizeAll();
</script>
<script type="text/javascript">
jQuery(window).load(function() {
// nivoslider init
jQuery('#slider').nivoSlider({
effect: '<?php echo of_get_option('sl_effect'); ?>',
slices:<?php echo of_get_option('sl_slices'); ?>,
boxCols:<?php echo of_get_option('sl_box_columns'); ?>,
boxRows:<?php echo of_get_option('sl_box_rows'); ?>,
animSpeed:<?php echo of_get_option('sl_animation_speed'); ?>,
pauseTime:<?php echo of_get_option('sl_pausetime'); ?>,
directionNav:<?php echo of_get_option('sl_dir_nav'); ?>,
directionNavHide:<?php echo of_get_option('sl_dir_nav_hide'); ?>,
controlNav:<?php echo of_get_option('sl_control_nav'); ?>
});
});
</script>
<style type="text/css">
<?php $background = of_get_option('body_background');
if ($background != '') {
if ($background['image'] != '') {
echo 'body { background-image:url('.$background['image']. '); background-repeat:'.$background['repeat'].'; background-position:'.$background['position'].'; background-attachment:'.$background['attachment'].'; }';
}
if($background['color'] != '') {
echo 'body { background-color:'.$background['color']. '}';
}
};
?>
<?php $header_styling = of_get_option('header_color');
if($header_styling != '') {
echo '#header {background-color:'.$header_styling.'}';
}
?>
<?php $links_styling = of_get_option('links_color');
if($links_styling) {
echo 'a{color:'.$links_styling.'}';
echo '.button {background:'.$links_styling.'}';
}
?>
</style>
</head>
<body <?php body_class(); ?>>
<div id="main"><!-- this encompasses the entire Web site -->
<header id="header">
<div class="container_12 clearfix">
<div class="grid_12">
<div id="widget-header">
<?php if ( ! dynamic_sidebar( 'Header' ) ) : ?><!-- Wigitized Header --><?php endif ?>
</div><!--#widget-header-->
<div class="clear"></div>
<div class="row-top clearfix">
<div class="logo">
<img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('description'); ?>">
</div>
**<nav class="primary">
<?php wp_nav_menu( array(
'container' => 'ul',
'menu_class' => 'sf-menu',
'menu_id' => 'topnav',
'depth' => 0,
'theme_location' => 'header_menu'
));
?>
</nav><!--.primary-->**
</div>
<?php if ( of_get_option('g_search_box_id') == 'yes') { ?>
<div id="top-search">
<form method="get" action="<?php echo get_option('home'); ?>/">
<input type="text" name="s" class="input-search"/><input type="submit" value="<?php _e('GO', 'theme1773'); ?>" id="submit">
</form>
</div>
<?php } ?>
</div>
</div><!--.container_12-->
</header>
<?php if( is_front_page() ) { ?>
<section id="slider-wrapper">
<div class="container_12 clearfix">
<div class="grid_12">
<?php include_once(TEMPLATEPATH . '/slider.php'); ?>
</div>
</div>
</section><!--#slider-->
<?php } ?>
<div class="container_12 primary_content_wrap clearfix">
Here's the link: http://bestinfinity.com/WordPress/
If someone could help me with this I'd sure appreciate it.
Thanks!
Change top:27px; style.css ->line number 527
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0;
top: 27px;
z-index: 99;
}
Another way would be like so-
.sf-menu > li > a {
font-family: 'Open Sans',sans-serif;
font-size: 15px;
line-height: 1.2;
padding: 4px 9px 5px;
margin: 0px 1px 29px 0px; /********* Important Bit ***********/
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: rgb(255, 255, 255);
background: url("images/menu-hover-tail.gif") no-repeat scroll 0px -999em transparent;
letter-spacing: -1px;
border-radius: 5px 5px 5px 5px;
position: relative;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
left: 0px;
top: 55px; /*** Important Bit ***/
z-index: 99;
}
With these changes the sub-menu will line up with the bottom of the nav-bar for a slightly cleaner look.