Support » Fixing WordPress » Create menu html/css

  • Resolved cromermusic

    (@cromermusic)


    I’m building my own theme from scratch to get a good overview of the code. I’ve looked a the documentation but can’t get my menu to work.

    functions.php

    function register_my_menu() {
      register_nav_menu('header-menu',__( 'primary' ));
    }
    add_action( 'init', 'register_my_menu' );

    header.php

    <nav>
    	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<ul><li id="item-id">Home </li>%3$s</ul>' ) ); ?>
    </nav>

    style.css

    nav {
    	width: 960px;
    	padding: 10px;
    	margin: 0 auto;
    	background: #000000;
    	} 
    
    .menu ul li a {
    	padding: 10px 20px;
    	color: #cccccc;
    	font-weight: bold;
    	text-decoration: none;
    	display: inline-block;
    }
    
    .menu ul li a:hover,
    	  a:active
    	 {
    	color: #ffffff;
    	background: #999999;
    	font-weight: bold;
    	text-decoration: underline;
    	text-transform:capitalize;
    	display: inline-block;
    	}

    The first link in menu “Home” won’t show and neither will any of the other styling do like display: inline-block and background: color.

Viewing 4 replies - 1 through 4 (of 4 total)
  • I think this will get it work.

    <nav>
    	<?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'items_wrap' => '<ul><li id="item-id">Home </li>%3$s</ul>' ) ); ?>
    </nav>

    You should ‘header-menu’ for theme location.

    Nope that didn’t work. Still no Home link

    I’ve fixed the CSS now.

    nav {
    	width: 960px;
    	padding: 10px;
    	margin: 0 auto;
    	background: #000000;
    	font-weight: bold;
    	text-transform: uppercase;
    	} 
    
    nav ul {
    	margin: 0; padding: 0;
    	list-style-type: none; list-style-image: none;
    	 }
    
    nav li {
    	display: inline;
    	 }
    
    nav ul li a {
    	text-decoration:none;
    	margin: 4px;
    	padding: 5px 20px 5px 20px;
    	color: #cccccc;
    	}
    
    nav ul li a:hover {
    	color: #ffffff;
    	background: #cccccc;
    	 }
    
    .menu ul li.current_page_item a {
    	color: #ffffff;
    	background: #cccccc;
    	 }

    Problem solved. I had to create a menu in the admin area and make it primary.

    Oh and I changed the html to just:

    <nav>
    	<?php wp_nav_menu(); ?>
    </nav>

    else it would add extra space. Looked like it was trying to fetch the home button twice when I looked on the source code.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Create menu html/css’ is closed to new replies.