Nav bar -- change position

HTML & CSS
1

Hi,
I’m picking up left-off work on this WP site http://www.womenofthesummit.com/

The problem is with the location of the navigation. It renders differently in different browsers. (The site is about five years old.) It used to work the same in all major browsers. The problem that has just occurred is the “Contact” link no longer appears on the right hand side. It looks OK in FF and Safari (PC), bad on IE 11, Opera, Chrome, iPad and iPhone.
Additionally, taking a close look at any of the links with “M” in there the little swirl on the tail of the letter is missing. That was a fix so the menu would appear at all vertically on the page.
So now the most important problem is that “Contact” doesn’t appear. It would be great if both issues could be fixed.
Please send thoughts –
(c:

Here is CSS that might apply:

#top ul {
	float: left;
	height: 58px;
	width: 760px;
        /* added 2/15/14 to adjust menu */
        margin-top: -29px;
        /* added 6/2/14 to adjust menu
        margin-left: -29px;
        didn't work*/
}

Thank you for any help!

2

This is what happens when you try to design around “pixel perfect” concept for a website. Your menu items are there and displayed, BUT you UL is set to a specific height there is OVERFLOW applied ( probably to contain the float) so when the items are to big and overflow the UL’s dimension they are simply ‘cropped off’ ( this is what you are noticing in the swirly of the M as well).
remove the height for your nag menu and the problem should solve itself.

3

Hi dresden_phoenix,
Just about perfect and good 'nef.
Thank you for your help.
Cheers,
Marie

4

Hi again –
something drastic happened. Please take a look.
here is the CSS I have, having taken out the height.

#top ul {
	float: left;
        /* commented out 6/2/14 to adjust menu  result is cut off menu
	height: 58px; */
	width: 760px;
        /* added 2/15/14 to adjust menu */
        margin-top: -29px;
        /* added 6/2/14 to adjust menu
        margin-left: -29px;
        didn't work  */
        
}

#top ul li, #top ul li a {
	list-style-type: none;
	float: left;
        /* commented out 6/2/14 to adjust menu  result is cut off menu
	height: 48px;*/
	text-indent: -9999px;

}

What did I miss, mess up?
Urgent!!!
Thanks,
Cheers,

5

Don’t comment out the height on #top ul li, #top ul li a {}.

Because you are doing an image replacement for your text, the default height will be the height of your actual text and not that of the graphical replacement. Best practice would be to set int exclusively on the #top ul li a {} , ancestors with no height declared will automatically expand to to contain their descendants.

Honestly I would scrap what you have done and do this:


#top ul {
	clear:both; 
	list-style-type: none;
	overflow:hidden;
}

#top ul li  {
	float: left;
 
}
#top ul li a {	height: 48px; 
	text-indent: -9999px;
}

hope that helps

6

Hi again,
I tried your suggestion:

but then two menus appeared, a text menu and the graphic one. So I changed back to before.
The “Home” link is missing.
Thoughts on how to get that back?
Thank you for your continued help.
Cheers,

7

Any more thoughts???
please!!!

8

Hi,

Can you state what your problem is again exactly as the contact button seems to be in place?

Also can you explain why you have loads of nav items but you are only using the last 5 of them. Indeed you have nested menus on some items.!


<ul>
		<li class="page_item page-item-16"><a href="http://www.womenofthesummit.com/announcements/">Announcements</a></li>
		<li class="page_item page-item-212 page_item_has_children"><a href="http://www.womenofthesummit.com/docs/">Docs</a>
				<ul class='children'>
						<li class="page_item page-item-1714"><a href="http://www.womenofthesummit.com/docs/board-meeting-notes/">Board Meeting Notes</a></li>
						<li class="page_item page-item-1731"><a href="http://www.womenofthesummit.com/docs/lunch-notes/">Lunch Notes</a></li>
				</ul>
		</li>
		<li class="page_item page-item-20"><a href="http://www.womenofthesummit.com/member-sign-up/">Member Sign Up</a></li>
		<li class="page_item page-item-233 current_page_item"><a href="http://www.womenofthesummit.com/">Homepage &#8211; Why We Exist</a></li>
		<li class="page_item page-item-229"><a href="http://www.womenofthesummit.com/members/">Members</a></li>
		<li class="page_item page-item-230"><a href="http://www.womenofthesummit.com/membership/">Membership</a></li>
		<li class="page_item page-item-231"><a href="http://www.womenofthesummit.com/featured-member/">Featured Member</a></li>
		<li class="page_item page-item-17"><a href="http://www.womenofthesummit.com/speakers/">Speakers</a></li>
		<li class="page_item page-item-232"><a href="http://www.womenofthesummit.com/contact/">Contact</a></li>
</ul>

It’s these unused and nested elements that are taking up space on the page and causing alignment problems. If you are not using them then said then to display:none or move them off screen with absolute positioning. Once you’ve done that they you can get rid of the margin-top:-29px on #top ul as that is a hack to overcome the space the empty items are taking up.

For a graphical menu like that to work exactly then the sum of the components must add up to the total width exactly. (i.e. all the widths of the elements add up to the available width with pixel perfection). There can be no room for empty elements that are taking up whitespace as text-indent only hides the text and doesn’t remove the element form the flow.

9

Hi Paul,
Thank you for your reply. This is a site (WordPress) I inherited so don’t know what the original author was thinking.
The issue now is that there is no longer the “Home” link.
I set

	 <ul class='[B]children[/B]'>
				 <li class="page_item page-item-1714"><a href="http://www.womenofthesummit.com/docs/board-meeting-notes/">Board Meeting Notes</a></li>
				 <li class="page_item page-item-1731"><a href="http://www.womenofthesummit.com/docs/lunch-notes/">Lunch Notes</a></li>
			 </ul>

to
ul.children {
display: none;
}
I also removed the margin-top: -29px; Great, worked. Thank you.
Did I choose the correct item and attribute?

Please take a look now – still doesn’t work.
IE 11, FF, Chrome, Opera,iPad, iPhone (portrait and landscape) – No “home” button on www.womenofthesummit.com/; :wraps “Contact”, no “Home” link. Shift occurs on pages, e.g.[URL=“http://www.womenofthesummit.com/members/”]http://www.womenofthesummit.com/members/ other than home page
Safari (IE)-- No “home” button on www.womenofthesummit.com/; :wraps “Contact”, no “Home” link. No shift on other pages.

10

Hi,

It’s still the same issues in that you have menu items that shouldn’t be there.

http://www.womenofthesummit.com/ is rendering ok because you have placed the current-page class on the wrong item.


<li class="page_item page-item-233 current_page_item"><a href="http://www.womenofthesummit.com/">Homepage &#8211; Why We Exist</a></li>

That item shouldn’t be there as it is not in the actual menu but as you have mistakenly put the wrong class on it then by luck it allows the menu to display. The class .current_page_item sets the nested anchor to display:none and then the menu just happens to fit.

On http://www.womenofthesummit.com/members/ you have laced the current_page_item class on the correct item which means that the item before is now not hidden and therefore the menu is broken.

The answer is therefore the same as I have indicated before and you should remove the html for any non existent items. Setting nested children to display:none is no good as it needs to be the parent list item.

So to recap you have a menu width ‘x’ items in it then make sure you only have ‘x’ number of list elements.:slight_smile:

11