Menu border not showing up
-
I was able to add a new menu underneath my header picture (Yay!), but now no borders are showing up like I have on the menu over the header pic. I think I found the code, but I don’t know how to change it so that it will give me a border on the other menu:
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; display: inline-block !important; text-align: left; width: 100%; }I tried changing “main-navigation” to “new-menu-navigation”, and tried changing “nav-menu” to ‘new-menu’, (my new menu is called…’new-menu’ 🙂 ) but it doesn’t seem right, and nothing happens when I do that.
Thanks for any help!
The site I’m working on is http://www.cathyflorence.com
-
I believe the issue in not the CSS (directly) but how you are outputting the HTML in your page template. The first menu is using:
<nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle">Menu</button> <a class="assistive-text" href="#content" title="Skip to content">Skip to content</a> <div class="menu-categories-container"> <ul id="menu-categories" class="nav-menu"> <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="http://cathyflorence.com/category/t-tapp/">T-Tapp</a></li> <li id="menu-item-45" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-45"><a href="http://cathyflorence.com/category/life-of-faith/">Life of Faith</a></li> <li id="menu-item-46" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-46"><a href="http://cathyflorence.com/category/marriage/">Marriage</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="http://cathyflorence.com/category/health/">Health</a></li> <li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="http://cathyflorence.com/category/recipes/">Recipes</a></li> <li id="menu-item-67" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-67"><a href="http://cathyflorence.com/category/dyslexia/">Dyslexia</a></li> </ul> </div> </nav>the second menu should also use the same structure nav>div>ul>li and apply the same classes.
This is in my page.php template? This is the only thing I’m seeing in my page.php, but maybe I’m looking in the wrong spot 🙂
<?php /** * The template for displaying all pages * * This is the template that displays all pages by default. * Please note that this is the WordPress construct of pages * and that other 'pages' on your WordPress site will use a * different template. * * @package WordPress * @subpackage Twenty_Twelve * @since Twenty Twelve 1.0 */ get_header(); ?> <div id="primary" class="site-content"> <div id="content" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', 'page' ); ?> <?php comments_template( '', true ); ?> <?php endwhile; // end of the loop. ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>It must be in header.php
Thanks for the ‘heads up’! 🙂 🙂 Any clue where in the header.php it might be?
This is my header.php: http://pastebin.com/HMjRLF0n
The topic ‘Menu border not showing up’ is closed to new replies.