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

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

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

    Thread Starter 7Farmgirls

    (@7farmgirls)

    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

    Thread Starter 7Farmgirls

    (@7farmgirls)

    Thanks for the ‘heads up’! ?? ?? Any clue where in the header.php it might be?

    This is my header.php: https://pastebin.com/HMjRLF0n

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Menu border not showing up’ is closed to new replies.