JQuery Lava Lamp Drop Down covered by slideshow and changes position incorrectly when resizing browser

Question

So after solving a bunch of other problems with this navigation. I have two last small problems.

The first, which is more important to fix, is that when the drop down falls, it is cut off by the containing div which is part of a grid. Instead it needs to "float" outside of this grid and over the slideshow below. Not sure how to do this. See the problem http://lookseewatch.com/independentinsurance/

I've purposely made the height 50px to show the problem, if there is no height, or the height is set to auto, the drop down doesn't even display.

Here's a code snippet

<div class="row">
        <div class="grid_4">
            <img src="<?php bloginfo('template_directory'); ?>/images/logo.png">
        </div>
        <div class="grid_8">
            <?php wp_nav_menu( array('items_wrap' => '<ul class="%2$s">%3$s<div id="box"><div class="head"></div></div></ul>', 'container_class' => 'menu', 'menu_class' => 'nav', 'menu' => 'Header', 'walker' => new UL_Class_Walker )); ?>
        </div>
    </div>

The second issue is with the blue bar that follows where you hover. It's starting point is position absolutely

var dLeft = $('.current-menu-item a').offset().left+15;//setting default position of menu
var dWidth = $('.current-menu-item a').width();
var dTop = $('.current-menu-item a').offset().top;

so when the web page loads, and it works great, but when you resize the window, the "magic line" stays in the same place instead of moving with the navigation. When you hover over the other links, it goes to the correct location, but when it goes back to the original spot, it's completely off depending on how much the browser size has changed. You can see the problem at the link above and by pulling the corner of your browser in.

Let me know if I need to post any CSS for either.

Thanks!

remove `overflow:hidden` from `.grid-8` in both places it is defined for the cut-off problem — tedski, Dec 07 '12 at 15:45

tedski · Answer 1 · 2012-12-07T15:58:41.563

0

Since you are using jQuery, you can listen to window.resize. You could initialize dTop since that shouldn't change, then set the other variables when the browser is resized:

var dLeft;
var dWidth;
var dTop = $('.current-menu-item a').offset().top;

$(function(){
    //listen to window.resize
    $(window).on("resize", function () {
        //update variables     
        dLeft = $('.current-menu-item a').offset().left+15;
        dWidth = $('.current-menu-item a').width();
    }).trigger("resize"); //sets variables when page loads
});

As far as the hidden dropdowns, you simply need to remove overflow:hidden on the .grid-8 css class.

edited Dec 07 '12 at 15:58

answered Dec 07 '12 at 15:51

tedski

2,271
3
27
48

Thanks for the reply. I tried updating the Jquery, but it is still having the same problem when resizing and the magic line doesn't appear when the page loads, it appears once you hover over a navigation item. The drop down now appears though, thanks! – Henry Bayuzick Dec 07 '12 at 17:00

JQuery Lava Lamp Drop Down covered by slideshow and changes position incorrectly when resizing browser

1 Answers1