WordPress.org

Ready to get started?Download WordPress

Forums

Custom WordPress Theme Sub Navigation (6 posts)

  1. jdbelland86
    Member
    Posted 11 months ago #

    I have had no issue getting the WordPress navigation to work and styling it; however, I cannot get the Sub Menu to work. I see that the sub menu class is .sub and the secondary sub menu is .sub2, but how do I implement that on the wordpress navigation?

    Here is the code that I have implemented in the header.php file.

    <div id="nav">
    <ul >
    <li>
    <?php wp_nav_menu(array('menu' => 'custom_menu')); ?>
    </li>
    </ul>
    </div>

    Now, below is the HTML code that I am trying to convert it from:

    <div id="nav">
      <ul>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT MIT</a></li>
        <li class="sub"><a href="services.html">SERVICES</a>
        	  <ul style="width:100px;">
        <li>
          <a href="nde.html" style="width:95px;">NDE</a></li>
       <li><a href="qa.html" style="width:95px;">
    QA
        </a></li>
        </ul>
    
        </li>
        <li><a href="projectgallery.html">PROJECT GALLERY</a></li>
        <li class="sub"><a href="capabilities.html">CAPABILITIES</a>
        <ul>
        <li class="sub2">
          <a href="#">Nondestructive Testing </a>
    
    			<ul style="width:100px;">
                       <li><a href="rt.html" style="width:100px;">Radiography</a>
          				</li>
            	<li><a href="ut.html" style="width:100px;">Ultrasonics</a>
          	</li>
          			<li><a href="pt.html" style="width:100px;">Penetrant</a>
          			</li>
            	<li><a href="mt.html" style="width:100px;">Magnetic</a>
    			  </li>
            		<li><a href="vt.html" style="width:100px;">Visual</a>
          			</li>
    
              </ul>
          </li>
    
       <li><a href="americanwelding.html"> AWS, Certified Welding Inspectors
          </a></li>
       <li><a href="weldconsulting.html">Weld Consulting</a></li>
       <li><a href="positivematerial.html">Positive Material Identification</a></li>
       <li><a href="vendorsurv.html">Third Party Vendor Surveillance</a></li>
       <li><a href="qamanagement.html">QA Management </a></li>
       <li>	<a href="facility.html">Facility</a></li>
       <li><a href="technicians.html">Technicians </a></li>
          </ul>
          </li>
        <li><a href="results.html">RESULTS</a></li>
        <li><a href="quality.html">QUALITY</a></li>
        <li><a href="contact.html">CONTACT US</a></li>
      </ul>
      <div class="clearboth"></div>
    </div>

    I would be very grateful if anyone could point me in the direction of an answer.

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    In general doesn't this work:

    ul ul {
     /* Submenu <ul> styles here */
    }
    
    ul ul li {
     /* Submenu <li> styles here */
    }
    
    ul ul li a {
     /* Submenu <a> styles here */
    }

    ?

  3. jdbelland86
    Member
    Posted 11 months ago #

    This is what I currently have coded... It works perfectly with the HTML document but not with WordPress:

    [CSS moderated. just post a link to your site.]

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    Are you sure there's an ID named "nav"?

  5. jdbelland86
    Member
    Posted 11 months ago #

    Yes because when I implement the navigation bar it shows the background image behind it. I know that the ID is working. I think the problem must be somewhere in the submenu structure. Could this be an issue with the functions.php file?

    <div id="nav">
    <ul >
    
    <li>
    <?php wp_nav_menu(array('menu' => 'custom_menu')); ?>
    </li>
    </div>
  6. jdbelland86
    Member
    Posted 11 months ago #

    I am currently editing it locally in WAMP. I'm going to publish it live and give a link to the website.

Reply

You must log in to post.

About this Topic