How to style a custom menu in wordpress?

  • neliuz

    (@neliuz)


    13 years ago

    Hi guys ??

    I am currently converting a static HTML and CSS site that i made into wordpress!
    Or at least thats what i am trying to do ??

    I have followed Lynda.com — > chris coyers tutorial on how to implement custom menu!

    I have added this function into the function.php 

    if (function_exists('register_nav_menus')) {
		register_nav_menus(
			array(
				'main_nav' => 'Main Navigation Menu'
			)
		);
	}

    and to my menu i have added this one :
    <?php wp_nav_menu(array('menu'=> 'Main Menu Nav')); ?>

    I have also included it into the backend of my wordpress install.

    My problem is that i dont know how to style my menu the way it looks like on my static HTML and CSS site! (www.neliuz.com).

    Since inside my HTML i use li class=”riis” and use jQuery to add the effect i want!

    So wordpress does not know about my HTML when i replace it with custom menu!

    Is there anyone that have done something simular or know were to start than i would appreciate it ALOT!

    Thanks in advanced ??

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi have a look at the style.css in the twenty eleven theme, you will see the styles in there.

    Read this WordPress Codex page, here you will see the default menu elements.

    When you use a custom menu you can also add a css-class to the menu items, like this example.

    HTH

    David

    Thread Starter neliuz

    (@neliuz)

    Thanks!

    Can i add several CSS-classes to the menu items?

    Cause my menu consist of
    <li> having a class
    and <a> having a class. and a <span> element.

    <a>tag is inside the
    <li> tag!

    Thanks

    Have a look at the arguments you can pass to the menu.

    This is the part you would over rule.
    'items_wrap' => '<ul id=\"%1$s\" class=\"%2$s\">%3$s',

    There are several classes you can over rule with your own.

    HTH

    David

    Thread Starter neliuz

    (@neliuz)

    Ok , Thanks David!

    Will try and see what result i get ??

    Will tell you how it went!

    Thread Starter neliuz

    (@neliuz)

    Hi David,

    i have been trying to make this work..

    But i cant remove the id of the <li>
    And the class of the <li> is defined inside the backend of wordpress.

    Is it a good idea to give it a class in the backend?

    This is my code so far: 

    <?php  wp_nav_menu( array(

				 'container' => false,
				 'menu_id' => 'navigation',
				 'menu_class' => 'riis' ,
				 'echo' => true,
				 'before' => '',
				 'after' => '',
				 'link_before' => 'hjem',
				 'link_after' => '',
				 'items_wrap' => '<ul id=%1$s>%3$s</ul>',
				 'depth' => 0,
				 'walker' => new description_walker())
				 );?>

    Hope you can help me with this ??

    Thanks

    Cornelius

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to style a custom menu in wordpress?’ is closed to new replies.