Drop down menu malfunction

In wp-content/themes/macro/style.css try replacing:

.tc-hover-menu.nav ul {
    top: 50px;
}

with:

/*
.tc-hover-menu.nav ul {
    top: 50px;
}
/**/

Try adding the following to your stylesheet wp-content/themes/macro/style.css

.navbar .nav > li > .dropdown-menu:after {
     top:0;
}

and change the following

.tc-hover-menu.nav ul {
    top: 50px;
}

to

.tc-hover-menu.nav ul {
    top: 30px;
}

i don’t see how that will work. i specifically added that css to move the menu to be level with the top of the featured image. the menu is exactly where i want it to be but it doesn’t work.

The error is occurring because the drop-down is too far away from from its parent link, causing it to disassociate when you move your mouse down.

.tc-hover-menu-nav.ul will pull the drop-down up closer to the main navigation bar

.navbar .nav > li > .dropdown-menu:after closes up a small gap that seemed to occur in the drop-down when it moved up.

The changes appeared to work correctly when I tested with Firebug.

hi justlooken – thanks for the suggestion but again that brings the menu too close to the first line item. i want the menu to be flush with the featured image.

Ok, it will also work by changing the padding of the parent link.

look for this line

.navbar .nav > li > a

and increase the bottom padding as follows:

.navbar .nav > li > a {
    font-size: 16px;
    padding: 5px 20px 30px;
}

tried it but still it just moves the menu under the first line item. thanks again for trying to help. beyond frustrating.

This worked for me but then I resized my browser window and realised what you’re trying to achieve.

On my monitor the drop-down was not starting at the top of the image but about 30px above it, then as I sized it down the position of the menu changed until it did line up. Eventually the ‘contact’ link dropped down and things broke again.

You’re going to need to fix two things here –
1. The menu positioning, so that the distance between the top of the parent menu does not alter from image
2. The gap between the parent menu and the drop-down.

Happy to assist you with this, let me know.

Just FYI – this is a screenshot of various sizes, the large version at the back is how I was viewing

Macrodiver screenshot

Try the following changes

.row-fluid {
    position: relative;
    top: 5px;
    width: 100%;
}
.navbar .navbar-inner {
    border: 0 none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    margin: 24px 5px 0;
    padding-left: 5px;
    z-index: 200;
}
.navbar .nav > li > a {
    font-size: 16px;
    padding: 0 20px 10px;
}
.tc-hover-menu.nav ul {
    top: 25px;
}

got it sorted. thanks again for the suggestions