Creating a Menu, How to put "li" inside "a" ?

  • Resolved FelipeANDRES

    (@felipeandres)


    10 years, 2 months ago

    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 https://stackoverflow.com/questions/12250866/how-to-add-custom-html-to-wp-nav-menu

    Hope it helps! ??

    Take care,
    Calvin

    Thread Starter FelipeANDRES

    (@felipeandres)

    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

    Thread Starter FelipeANDRES

    (@felipeandres)

    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.

    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: https://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.

    Thread Starter FelipeANDRES

    (@felipeandres)

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

    Thread Starter FelipeANDRES

    (@felipeandres)

    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

    Thread Starter FelipeANDRES

    (@felipeandres)

    how can I do it?

    Thread Starter FelipeANDRES

    (@felipeandres)

    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.

Tags