WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Dropdown menu css and template files

[Resolved] Dropdown menu css and template files

  • Hi guys, I have tweaked and edited my theme since 2009 and it didn’t natively support dropdown menus. Therefore, I added this to my functions file and now it supports two menus in Appewarance> Menus:

    // Registering Menus For Theme
    
    add_action( 'init', 'register_my_menus' );
    
    function register_my_menus() {
    	register_nav_menus(
    		array(
    			'main-nav-menu' => __( 'Main Navigation Menu' ),
    			'footer-menu' => __( 'Footer Menu' )
    		)
    	);
    }

    I then went to Appearance> Menus> and I added the ‘Services’ Parent page to my nav menu, along with it’s child pages (indented to the right under the parent page).

    It ‘kind of’ works but the css is all over the place, all the child pages show permenantly underneath the parent page in a horizontal position which has moved all the content on my site about one line-break down, i can see I’m not far from implementing it but i’m thinking it may be my header.php and also the css that i haven’t done yet.

    I have NOT yet changed the template tag in header.php and to render the menu it still reads:

    <?php
    		function do_the_menu (){
    			wp_page_menu('show_home=1&exclude=6,8, 10, 12, 14, 16, 32, 73, 75, 385, 389, 392, 398, 400, 404, 407, 509, 620, 651, 747, 765, 1037, 1038, 1039, 1040, 1112, 1644, 1826, 2544&menu_class=menu');
    		}
    		//first check if wp_nav_menu has been declared
    		if (function_exists('wp_nav_menu')){
    			//if it has been declared then use it
    			wp_nav_menu( array( 'sort_column' => 'menu_order',
    								'theme_location' => 'primary',
    								'menu' => 'main',
    								'menu_class' => 'sf-menu',
    								'fallback_cb' => 'do_the_menu',
    								'container_class' => 'menu'
    							  )
    						);
    		}else{
    			//if wp_nav_menu doesnt exist we use wp_page_menu
    			do_the_menu();
    		}
    		?>

    Do i need to replace this code with something more updated? Also, can I use the css from an existing theme that supports dropdowns like twenty ten?

    My site looks very amateur with the menus misaligned, all help appreciated:

    See here: http://artbyherbie.com

    Thanks!

Viewing 15 replies - 1 through 15 (of 17 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Hi there, it just seems as though you’re missing the CSS necessary to create a drop-down menu.

    You could try this CSS;

    .menu ul ul {
     display: none;
    }
    
    .menu ul li:hover ul {
     display: block;
    }

    hi andrew, thanks i added that to the css and what i get is:

    menus aligned better, but when i hover over ‘Services’ the whole site starts ‘flashing’ and the child pages show up underneath in a horizontal way again, pushing the content down – a slight improvement defo!

    please check: http://artbyherbie.com

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Yeah, I saw that problem when I advised the code to you 😉
    More CSS modifications I’m afraid.

    Amend my :hover recommended code to this;

    .menu ul li:hover ul {
     display: block;
     position: absolute;
     top: 20px;
     padding-left: 0;
    }

    Then add this bit of CSS as well;

    .menu ul li {
     position: relative;
    }

    There’ll still be a problem with your drop-down menu appearing behind your content, but we’ll get to that.

    YES! a lot better, they’re all aligned vertically now but each child page needs a background colour, they all have transparent bgs at the moment. thanks, you seem on top of ur game!

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I’d apply the background to the entire submenu, not the individual items, but still works the same otherwise.
    So, again amending the :hover code to hold a background-color style;

    .menu ul li:hover ul {
     display: block;
     position: absolute;
     top: 20px;
     padding-left: 0;
     background-color: #000;
     /* http://www.w3schools.com/cssref/pr_background-color.asp */
    }

    I can see an issue with the Web Design menu item in your sub menu. An overlapping of words. Can you see this?

    better, yes i can see it, it seems like the menu li items aren’t long enough (horizontally) and the longer child pages such as ‘Design and print’ are going down to the next line? each menu item on its own line should fix this, yah? nearly there! 🙂

    also andrew, if you go to another page apart from the home page, i have google ads running across the top of the content, the menu li items appear BEHIND these google ads and not infront?

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    To resolve your list items not long enough, try amending the :hover code to this;

    .menu ul li:hover ul {
     display: block;
     position: absolute;
     top: 20px;
     padding-left: 0;
     background-color: #000;
     /* http://www.w3schools.com/cssref/pr_background-color.asp */
    
     width: 200px;
     /* Change the 200 to a value you want */
    }

    Then add these styles to prevent your sub menu items from displaying side-by-side eachother;

    .menu ul ul li,
    .menu ul ul a {
     float: none;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Sorry, I can’t find which page has the Google advert.

    any other page apart from ‘home’, ‘anout’, ‘blog’, ‘sjop’ etc, the google ads run at the top of the page

    see here: http://www.artbyherbie.com/auto-quote/

    the menu items appear behind the google ads

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    In which browser & browser version are you seeing this issue?
    I’m using the latest version of Chrome and seeing this http://awesomescreenshot.com/0a1r9k45e

    am using chrome 27, latest version. here is what i mean: http://www.artbyherbie.com/wp-content/uploads/2012/12/tempmenupic.png

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Try adding these CSS styles;

    .menu,
    .center_content_bottom,
    #content-page {
     position: relative;
    }
    
    .menu {
     z-index: 1;
    }

    THANK YOU, ANDREW! works like a charm, i cant thank you enough brother, this has had me pulling hair out for three days now, i’ll just go ahead and add a small border to the menu items, looks ace!!! :))))

    just one thing, i have never changed my header.php tags, they are the same as before implementing dropdown menus in the functions.php, shall i just leave the code above, or is there some cleaner, shorter code to replace this with??

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Resolved] Dropdown menu css and template files’ is closed to new replies.
Skip to toolbar