divide main nav menu in to separate divs and remove some nav items

  • Resolved Perfect Circle

    (@perfect-circle)


    12 years, 2 months ago

    Hi. I want to divide my main nav in to separate divs: one adjacent to header and one above header adjacent to cart/search). I also what to remove some of the nav menu items.

    I’m building on a child template with parent MyStile and woocommerce installed.

    I think my main problem is that I can’t find the relevant template file that contains the ul and links. I can see the ul and links with ids in firebug, but the mystile template structure looks completely different – perhaps the ul li is generated with php. In the header.php file, I can move the whole menu up into the top div, so the menu code is there somewhere, but can’t find the actual ul.

    Once I find the ul, can I simply delete (or comment out) the items I don’t want and split the nav by moving the list items into new divs. I don’t know, but my logic tells me that moving the list items my break the code, if there is a query pointing to that ul.

    Anyway, this is my first time developing a web site on my own, so please be patent with me. I understand HTML and CSS. I understand how PHP & Mysql works, but not familiar with the code. Sorry, I hate bugging people on these forums but I’ve been sharing at the code for two days and it driving me in sane.

    fMy site is https://www.essentialopals.com

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

  • What does the code in your header file look like? Are you able to paste it here?

    Thread Starter Perfect Circle

    (@perfect-circle)

    Hi. Thanks. Below is the code. I have added in the logo, NavHome & NavMain divs. The remained is from the MyStile Template. I put the NavHome & NavMain in as a reference to show where I want these menu items. So I want the ‘Home’ and ‘Shop’ plus my pages to remain in the Main Nav, adjacent the header, but want to put the ‘Account’ and ‘Track you order’ up the top and remove the rest.

    There should be a background image (in CSS) behind the header that is not showing up.

    I will paste the whole lot but I think it is mostly the code at the bottom from ‘woo_nav_before();’ that is of concern.

    Code start below:

    <?php
/**
 * Header Template
 *
 * Here we setup all logic and XHTML that is required for the header section of all screens.
 *
 * @package WooFramework
 * @subpackage Template
 */

 global $woo_options, $woocommerce;

?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="<?php if ( $woo_options['woo_boxed_layout'] == 'true' ) echo 'boxed'; ?> <?php if (!class_exists('woocommerce')) echo 'woocommerce-deactivated'; ?>">
<head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />

<title><?php woo_title(''); ?></title>
<?php woo_meta(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php
	wp_head();
	woo_head();
?>

</head>

<body <?php body_class(); ?>>
<?php woo_top(); ?>

<div id="wrapper">

	<!-- top -->

	<div id="top">
		<nav class="col-full" role="navigation">
			<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
			<?php } ?>
			<?php
				if ( class_exists( 'woocommerce' ) ) {
					echo '<ul class="nav wc-nav">';
					echo '<li class="cart">'.current(woocommerce_cart_link()).'</li>';
					echo '<li class="checkout"><a href="'.esc_url($woocommerce->cart->get_checkout_url()).'">'.__('Checkout','woothemes').'</a></li>';
					echo get_search_form();
					echo '</ul>';
				}
			?>
		</nav>
	</div><!-- /#top -->

    <?php woo_header_before(); ?>

	<header id="header" class="col-full">

	    <?php /* deleted <hgroup> from original 'mystile' parent theme as at 4-Jan-2013) */ ?>

        <!-- Header -->
        <div class="Header">

            <!-- logo -->
            <a href="index.php"><img class="logo" src="wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals.png" onmouseover="this.src='wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals_Colours.png'" onmouseout="this.src='wp-content/themes/eotheme/eoImages/headerTitle_EssentialOpals.png'" width="405" height="115" alt="Essential Opals" /></a>
            <!-- END logo -->

            <!-- NavHome -->
            <div class="NavHome">

            <a href="index.php?page=HomeContent">Home</a>

            </div><!-- END NavHome -->

            <!-- NavMain -->
            <div class="NavMain">

                <ul>
                    <li><a href="index.php?page=Shop">Shop</a></li>
                    <li><a href="index.php?page=AO">About Opals</a></li>
                    <li><a href="index.php?page=AU">About Us</a></li>
                </ul>

            </div><!-- END NavMain -->

        </div><!-- END Header -->

        <?php woo_nav_before(); ?>

		<nav id="navigation" class="col-full" role="navigation">

			<?php
			if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
			} else {
			?>
	        <ul id="main-nav" class="nav fl">
				<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
				<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
				<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
			</ul><!-- /#nav -->
	        <?php } ?>

		</nav><!-- /#navigation -->

		<?php woo_nav_after(); ?>

	</header><!-- /#header -->

	<?php woo_content_before(); ?>

    End Code.

    Thread Starter Perfect Circle

    (@perfect-circle)

    Ok. I figured out that I can remove a menu item simply by setting to the draft (or trashing it) in the pages section of wp CMS. So simple – been staring at the code for so long forgot about the CMS. Still don’t know how to split the Nav though.

    Anything inside of <?php woo_nav_after(); ?> won’t show up until after </nav>. This is not where you should be looking.

    You want to pay attention to what is happening between the <nav> </nav> tags.

    In the header.php file, this is what is displays the menu with the shopping cart info:

    <nav id="navigation" class="col-full" role="navigation">

			<?php
			if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'primary-menu' ) ) {
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fr', 'theme_location' => 'primary-menu' ) );
			} else {
			?>
	        <ul id="main-nav" class="nav fl">
				<?php if ( is_page() ) $highlight = 'page_item'; else $highlight = 'page_item current_page_item'; ?>
				<li class="<?php echo $highlight; ?>"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php _e( 'Home', 'woothemes' ); ?></a></li>
				<?php wp_list_pages( 'sort_column=menu_order&depth=6&title_li=&exclude=' ); ?>
			</ul><!-- /#nav -->
	        <?php } ?>

		</nav><!-- /#navigation -->

    This code, renders on in the browser like this:

    <nav id="navigation" class="col-full" role="navigation">

				        <ul id="main-nav" class="nav fl">
								<li class="page_item current_page_item"><a href="https://essentialopals.com/">Home</a></li>
				<li class="page_item page-item-23"><a href="https://essentialopals.com/?page_id=23">Checkout</a>
<ul class='children'>
	<li class="page_item page-item-29"><a href="https://essentialopals.com/?page_id=29">Checkout &rarr; Pay</a></li>
	<li class="page_item page-item-30"><a href="https://essentialopals.com/?page_id=30">Order Received</a></li>
</ul>
</li>
<li class="page_item page-item-24"><a href="https://essentialopals.com/?page_id=24">Track your order</a></li>
<li class="page_item page-item-25"><a href="https://essentialopals.com/?page_id=25">My Account</a>
<ul class='children'>
	<li class="page_item page-item-26"><a href="https://essentialopals.com/?page_id=26">Edit My Address</a></li>
	<li class="page_item page-item-27"><a href="https://essentialopals.com/?page_id=27">View Order</a></li>
	<li class="page_item page-item-28"><a href="https://essentialopals.com/?page_id=28">Change Password</a></li>
</ul>
</li>
<li class="page_item page-item-13"><a href="https://essentialopals.com/?page_id=13">Shop</a></li>
<li class="page_item page-item-9"><a href="https://essentialopals.com/?page_id=9">About Opals</a></li>
<li class="page_item page-item-4"><a href="https://essentialopals.com/?page_id=4">About Us</a></li>
			</ul><!-- /#nav -->

		</nav><!-- /#navigation -->

    This is the section you should be paying attention to.

    Setting it as a draft (or trashing it) might temporarily serve your purposes, but what if you wanted to use it in the future?

    What about using your menu functionality (Appearance-> Menus) ? It looks like these pages might be in one of your menus. If so, you can remove the menu items that you don’t want from there.

    If not, and you want a short-term, temporary fix, comment out the <nav> section in the header.php file and replace it with

    <nav id="navigation" class="col-full" role="navigation">

				        <ul id="main-nav" class="nav fl">
								<li class="page_item current_page_item"><a href="https://essentialopals.com/">Home</a></li>
				<li class="page_item page-item-23"><a href="https://essentialopals.com/?page_id=23">Checkout</a>
<ul class='children'>
	<li class="page_item page-item-29"><a href="https://essentialopals.com/?page_id=29">Checkout &rarr; Pay</a></li>
	<li class="page_item page-item-30"><a href="https://essentialopals.com/?page_id=30">Order Received</a></li>
</ul>
</li>

<li class="page_item page-item-13"><a href="https://essentialopals.com/?page_id=13">Shop</a></li>
<li class="page_item page-item-9"><a href="https://essentialopals.com/?page_id=9">About Opals</a></li>
<li class="page_item page-item-4"><a href="https://essentialopals.com/?page_id=4">About Us</a></li>
			</ul><!-- /#nav -->

		</nav><!-- /#navigation -->

    Also, without looking at the code and your backend, it is hard to tell how your menus are configured.

    The items in the top right corner could possibly be controlled from the Appearance-> Menu section.

    If not, and you want another hard-coded workaround- try manually adding:

    <li class="page_item page-item-24"><a href="https://essentialopals.com/?page_id=24">Track your order</a></li>
<li class="page_item page-item-25"><a href="https://essentialopals.com/?page_id=25">My Account</a>
<ul class='children'>
	<li class="page_item page-item-26"><a href="https://essentialopals.com/?page_id=26">Edit My Address</a></li>
	<li class="page_item page-item-27"><a href="https://essentialopals.com/?page_id=27">View Order</a></li>
	<li class="page_item page-item-28"><a href="https://essentialopals.com/?page_id=28">Change Password</a></li>
</ul>
</li>

    to this:

    <!-- top -->

	<div id="top">
		<nav class="col-full" role="navigation">
			<?php if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) { ?>
			<?php wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav fl', 'theme_location' => 'top-menu' ) ); ?>
			<?php } ?>
			<?php
				if ( class_exists( 'woocommerce' ) ) {
					echo '<ul class="nav wc-nav">';
					echo '<li class="cart">'.current(woocommerce_cart_link()).'</li>';
					echo '<li class="checkout"><a href="'.esc_url($woocommerce->cart->get_checkout_url()).'">'.__('Checkout','woothemes').'</a></li>';
					echo get_search_form();
					echo '</ul>';
				}
			?>
		</nav>
	</div><!-- /#top -->
    Thread Starter Perfect Circle

    (@perfect-circle)

    Ok. thank you so much for all this. I will try it and let you know how it works out.

    Just to be clear, I can replace the php code between the <nav> </nav> tags, with the html ul li code without breaking the code elsewhere, right?

    Thanks again.

    Thread Starter Perfect Circle

    (@perfect-circle)

    Thank you. Both methods work. Can edit in Appearance-> Menu section or hard code. CSS needs some work but we’re getting there.

    Thanks again.

    Awesome glad to hear it!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘divide main nav menu in to separate divs and remove some nav items’ is closed to new replies.

Tags