WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Dropdown menu css and template files (18 posts)

  1. Johnny Bravo
    Member
    Posted 1 year ago #

    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!

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  3. Johnny Bravo
    Member
    Posted 1 year ago #

    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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  5. Johnny Bravo
    Member
    Posted 1 year ago #

    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!

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    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?

  7. Johnny Bravo
    Member
    Posted 1 year ago #

    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! :)

  8. Johnny Bravo
    Member
    Posted 1 year ago #

    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?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    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;
    }
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  11. Johnny Bravo
    Member
    Posted 1 year ago #

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

  12. Johnny Bravo
    Member
    Posted 1 year ago #

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

    the menu items appear behind the google ads

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    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

  14. Johnny Bravo
    Member
    Posted 1 year ago #

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

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try adding these CSS styles;

    .menu,
    .center_content_bottom,
    #content-page {
     position: relative;
    }
    
    .menu {
     z-index: 1;
    }
  16. Johnny Bravo
    Member
    Posted 1 year ago #

    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??

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Sorry, I was just here for my daily CSS-fix.
    I'll leave that for another volunteer to answer.

  18. Johnny Bravo
    Member
    Posted 1 year ago #

    LOL fair-dos, well done, thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic