Hi everyone new member here, working with a wordpress template, have a small but urgent problem understanding something.
I'm having the oddest time trying to move a menu down.
Here's how I want it to look:
http://proadvertise.com.au/ionec/
Here's how mine looks:
http://www.i-one-c.com/
Notice how the menu on the 1st link is bigger because the dark space comes down more. I took a look at the editor and there's nothing in the .CSS except a link to author of the theme.
Here's the header php:
________________________________________________________________
wp_title(azure_option('seo_separator', '|'), true, 'right');
wp_head();
/* this is used by many WordPress features and for plugins to work proporly */
wp_nav_menu( array( 'menu_id' => 'nav', 'menu_class' => 'primary-menu', 'theme_location' => 'primary' ) );
if ( is_front_page() || is_page() ) { $global_header = get_post_meta($post->ID, '_general_header', TRUE); if ( !empty($global_header) ) { get_template_part( 'framework/header/'.$global_header ); } else { get_template_part( 'framework/header/pagetitle' ); } } else { get_template_part( 'framework/header/pagetitle' ); }
[Please be sure to use the backticks or code buttons when posting code]
________________________________________________________________
No matter what I do, I can not make that damn menu look like it does in the 1st link. Please help.
wp_title(azure_option('seo_s
<!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 (gte IE 9)|!(IE)]><!--><html <?php language_attributes(); ?>> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== --> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php wp_title(azure_option('seo_separator', '|'), true, 'right'); ?></title> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="shortcut icon" href="<?php azure_option('site_favicon', AZURE_IMAGES.'/favicon.ico', TRUE); ?>" 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 wp_head(); ?> <?php /* this is used by many Wordpress features and for plugins to work proporly */ ?> </head> <body <?php body_class(); ?>> <div id="azure-wrapper"> <!-- header --> <header id="header"> <div class="container"> <div class="sixteen columns header-inner"> <div class="logo"> <a href="<?php echo home_url('/'); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php azure_option('site_logo', AZURE_IMAGES.'/logo.png', TRUE); ?>" alt="<?php bloginfo('name'); ?>" /></a> </div> <nav id="main-nav"> <?php wp_nav_menu( array( 'menu_id' => 'nav', 'menu_class' => 'primary-menu', 'theme_location' => 'primary' ) ); ?> </nav> </div> </div> </header> <!-- end header --> <section id="pre-content"> <?php if ( is_front_page() || is_page() ) { $global_header = get_post_meta($post->ID, '_general_header', TRUE); if ( !empty($global_header) ) { get_template_part( 'framework/header/'.$global_header ); } else { get_template_part( 'framework/header/pagetitle' ); } } else { get_template_part( 'framework/header/pagetitle' ); } ?> </section>
In stylesheet
In stylesheet http://www.i-one-c.com/wp-content/themes/blade/assets/css/layout.css?ver=1.2, see yours at
#header .header-inner { height:60px; }
#main-nav { position: absolute; right: 15px; top: 0; z-index: 999; }
Compare to desired layout.
#header .header-inner { height: 120px; } #main-nav { padding: 30px; position: absolute; right: 15px; top: 0; z-index: 999; }
cheers,
gary
Unbelievable. All this time I
Unbelievable. All this time I was overlooking the CSS files located in Assets, Gary thank you so much, you're a lifesaver.
Oh hmm, now an odd thing
Oh hmm, now an odd thing happened, the dropdown links in the nav menu seem to be partially covering the parent links on mouse over. I'll tinker with it a bit. How did you even locate that CSS code? I never saw it using view source. Thanks a million.
Firebug addon
In Firefox, in the tools menu, go to get add-ons and get Firebug. Firebug, among many other things, lets you see which style rules are applied to each element. Learn to use it, it will save you pot-loads of frustration.
I you view source, you will see in the head one or more link element of rel="stylesheet". These are the stylesheets the page, um, links to.
When debugging the page, don't look at the php source code; what you need to see is what the browser sees after server-side pre-processing, so from the browser, view source.
cheers,
gary
#main-nav ul ul {
#main-nav ul ul {
background: none repeat scroll 0 0 #00ADEE;
border: medium none;
display: none;
position: absolute;
text-transform: none;
top: 90px;
width: auto;
z-index: 9999;
}
Note that the top value was increased by the amount of padding added to #main-nav.
cheers,
gary
Thanks so much Gary, that
Thanks so much Gary, that change in pixels from 60 to 90 really fixed the problem. I got the firebug as you suggested, it's a powerful tool. I can't believe I've been working without it all this time. Brilliant help, thank you again.