Responsive Menu Problems x3

[pepe_lepew]

Hello:

Okay I again could use some help with 3 problems I am having creating a responsive menu for a site.
The first problem is when you reduce the screen size the dropdown menu activates ( has a GREEN border ) and when you roll over 1 of the menu items, the picture that is directly below it also shifts down. I would like the menu system to just overlap the image. I thought of using absolute positioning, but that screwed things up worse.

The second problem is on the dropdown menu system. When you roll over the menus, not clicking anything, and then leaving the menu area, the items collapse, but if you watch it closely after leaving the area, it moves up a bit. I looked at the page 400% and the individual items are not properly aligned. Could that be the problem?

And last, when the screen is reduced to about 397px the dropdown menu drops down and to the left. There is still plenty of room, but still goes down and left. I would like to ALWAYS be next to the web image, and if I have to reduce the font size, then so be it. I guess the smallest screen width to respect is 320???

Here is a CodePen version of the page:
http://codepen.io/lepew/pen/LEoXrZ

Please, any help would greatly be appreciated.

[wahhabb]

I’ll start with your last item.

The reason your menu drops down is because of the padding-right:

#head_Menu {
    list-style: outside none none;
    padding: 8px 90px 0 0;
    text-align: center;
}

When the screen is too narrow to have 90px of right padding, the menu’s div has to drop below the head_Logo div.

You could use a media query to deal with that situation, or handle it in other ways.

If you want the dropdown menu to overlap the rest of the page, you will have to use absolute positioning. But I don’t have time right now to walk you through doing that. You could give it a try and post your codepen, which will make it easier to modify and explain.

Good luck!

[Author]

Posts