Support » Themes and Templates » Creating a Menu, How to put "li" inside "a" ?

  • Resolved FelipeANDRES

    (@felipeandres)



    Good afternoon community!

    I made a wordpress theme and have a little doubt.
    I created a menu with the following structure:

    <nav class="nav-global-cont">
        <ul id="menu-menu-1" class="nav-global">
           <li>
              <a> Item 1 </a>
           </ li>
           <li>
              <a> Item 2 </a>
           </ li>
           <li>
              <a> Item 3 </a>
           </ li>
           <li>
              <a> Item 4 </a>
           </ li>
        </ ul>
    </ nav>

    For this, I used the following code within my header.php

    <? php
        wp_nav_menu (array (
           'menu' => 'Primary Nav'
           'container' => 'nav'
           'menu_class' => 'nav-global',
           'container_class' => 'nav-global-cont'
           'depth' => '2'
        ));
    ?>

    I would like to do otherwise, because the elements “li” contains images of buttons and I desire that all buttons are fully converted into links, not just the text. How do I get the “li” tags to be within the “a”? I wnat to do something like this:

    <nav class = "nav-global-cont">
        <ul id = "menu-menu-1" class = "nav-global">
           <a>
              <li> Item 1 </ li>
           </a>
           <a>
              <li> Item 2 </ li>
           </a>
           <a>
              <li> Item 3 </ li>
           </a>
           <a>
              <li> Item 4 </ li>
           </a>
        </ ul>
    </ nav>

    Thank U!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hey there felipe,

    Hope you’re well! 🙂

    Maybe this solution from StackOverflow will help you http://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu

    Hope it helps! 🙂

    Take care,
    Calvin

    unfortunatelluy I am not good at programing, I am haveing a bit of difficult to understand =(

    Hey there FelipeANDRES,

    Hope you’re well! 🙂

    I just notice that you like to wrap the li tag element in a tag element.Can you tell me why? I suggest you keep the structure like this:

    <nav class = "nav-global-cont">
      <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
      </ul>
    </nav>

    As much as possible we want to code semantically and if we want a list item then we need to start with li element for each list item. Can you clarify what you are trying to achieve?

    Looking forward for your reply! 🙂

    Take care,
    Calvin

    Well man, thank you for the attention.

    I was trying to give specific width and height for the buttons. Assuming that the tag “a” does not suport width or height, I am using padding, it is an improvisation. Maybe it is not the right way to do, but works. There is only a problem: This is a laborious form to do, because I need to adjust manually the padding with pixels of each “a” element.

    Probably I will need to do the same for all the main browsers: IE, Chrome, Opera, Safari, Mozilla.

    Moderator stephencottontail

    (@stephencottontail)

    You can actually set padding and such on the <a> tag if you make it a block-level element. See this JSFiddle for a demo: http://jsfiddle.net/b8fys71d/

    In that link, each <li> has a background image of 50×50 pixels and is set to a height and width of 50 pixels each. The <a> tags within each <li> are set as block-level elements and also set to a height and width of 50 pixels each, making the entire background image clickable.

    interesting man, I didint know that! Very helpfull and thank you so much 😀

    It solves my problem 😀

    Hey there guys,

    Hope you are both well! 🙂

    @felipeandres

    I suggest you mark this thread as resolved so other members with the same issue can see that this ticket contains an answer that maybe a possible solution for their issue.

    @stephencottontail

    Thanks for helping us out here. 🙂

    Take care,
    Calvin

    how can I do it?

    fine, I did!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Creating a Menu, How to put "li" inside "a" ?’ is closed to new replies.