editability

Awesome glad to hear it!

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 -->

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 -->

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.

It’s difficult to know without looking at your backend. Two things to try:

1. Each portfolio item should have it’s own page. Without looking at your backend, I would guess that you would navigate to the portfolio section and click “View All” or something like that. When you click on this page, on the right side, under the “Publish” or “Update” button, you should see an option that allows you to select the page templates. Is there a “Full Width” template there? If so, select that and click on “Update” or “Publish”

2. Perhaps this is controlled from your theme options page. In your theme options, is there a section to manage the portfolio settings? If so, see if you can control the sidebars there.

When you add a negative margin to your header <div>, what happens?

margin-top: -100px;

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

Hi Lisa,

What theme are you using?
What do you currently see when you click now?
Do you have a link to your site?

The value for your z-index in the menu depends on the z-indexes of the other elements. If you don’t know what those values are, try playing around with it. For instance, add:

z-index: 10000;

to the CSS for the menu. If that doesn’t work, keep going up until you get somewhere.

Good luck!

Looks like the transparency in your menus is working properly. If it was transparent, the words on the page would be visible though the menu. I think your issue is with the z-index, which effects the order of how different elements are layered. It looks like the sidebar content and the chat box is on top of the menu content.

If you change the z-index of the menu so that it is on top, that should solve your issue.