Main-menu Questions

[jaymorgan]

First, thank you for your answer to my November 23 thread entitled “Dropdown Width”. Your answer worked perfectly. The current version of my menu with your fix is at http://pages.towson.edu/morgan/smartmenus/index.htm. Several other questions:
1. How can I get an image and text to vertically align in the middle of the main menu. I know this is a css issue. I have found several suggestions online to solve this problem but none seem to work. Do you have a solution that will work with SmartMenus?
2. How can I split off a portion of the main menu and shift it to the left? I want to split off the “Base Map” and “Overlay Map” lists from my overall menu and move them to the left side of my menu so that they are separate from the other items.
3. How do you recommend setting the height of the main menu? In my sm-clean.css file I added “height: 40px:” to “#main-menu”. While this works, it triggers a different behavior with my dropdown menus. Specifically, when I hover on a dropdown menu item, the background showing the active state of the item extends 2 pixels below the bottom of my main menu and pushes my dropdown boxes down 2 pixels as well. I assume I am overlooking something in the css file. Any questions??
Thanks, again, for your help. SmartMenus is a great product!

[admin]

Hi, np at all! Right to your questions:

1) You could use this:

.sm-clean > li > a img {
    vertical-align:top;
    border:0; /* for IE's sake */
}

2) You could, for example, add some left margin to your “Full Extent” item – e.g. in the HTML:

<li id="menu-item-full-extent">...

and in the CSS:

#menu-item-full-extent {
    margin-left:50px;
}

Or add the margin to the divider SPAN you use, if you still would like to have it before the item. Or you could even float the item LIs to left if you like. There are different approaches.

3) When you add the first fix for the icons, you will automatically get 40px height for the main menu items, so you can remove the additional setting you’ve added. But to answer your question, it’s best to control the main menu height via the items (the links) – i.e. you can tweak their padding-top, padding-bottom and line-height in pixels if you like. The main menu box will automatically grow in height for them.

Cheers!

[Author]

Posts