Education Pro Header Widget Menu > Right Side Issues

[D2L_Mike]

G'day all!

Okay, I'm having a difficult time believing I'm the first person to come across this issue, but I can't for the life of me find a way to fix it. (And after banging my head against the desk for a couple of hours and inflicting similar pain on a few co-workers, I decided to share. *chuckle*)

I am working with the Education Pro theme and have noticed that sub menus off of my Secondary Navigation Menu are all lining up along the left of their respective header. This is good, until I hit the right side of the page at which point those sub menus are flowing outside of my site's main container and, on certain screen sizes, getting cut off of the side of the screen. My first thought was to use CSS...

.header-widget-area nav > ul > li:last-child .sub-menu { left:auto; right:9999px; }
.header-widget-area nav > ul > li:last-child:hover .sub-menu { right:0px; }

Unfortunately I've discovered that when you hover over that li the properties on it change from position:relative to position:static. (I can only assume this is in an effort to break out of an overflow situation, because I can't think of any other reason to do so.) The result is that my right:0px pushes the sub menu all the way to the right side of the screen. Ouch.

Overriding that li to position:relative again on hover doesn't work, as the sub menu simply won't appear. I thought to try and put position:relative (or absolute) on one of the parent elements and line up with that container. It just kills all of the menus, with none of them appearing on the screen. I can't try and compensate by adjusting the right value, because the pixel count depends entirely upon how wide the window is.

So, ya. This is driving me nuts, and is the only significant issue I've run into using this theme. If anyone out there has encountered a similar issue, I'd greatly appreciate a bit of assistance.

My work-in-progress can be found here and the "Publications" sub menu is the one causing me problems. Viewport sizes between 1024px and about 1350px width are where it gets cut off (although you can sometimes still at least see all the text).

http://ec2-54-164-132-10.compute-1.amazonaws.com/schools/john-xxiii/

[Tony @ AlphaBlossom]

Hello,

Add this to your theme's style.css file inside whichever media query/s you want to target:

.genesis-nav-menu > li:last-child > ul.sub-menu {
    margin-left: -93px;
}

The negative left margin will move the sub menu to position it where you need. This only works for the last menu item...if you want to affect other menus, you can change the ":last-child" part to the menu ID.

Have a great weekend!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[D2L_Mike]

Tony, you are the man! 😀

Thank you very much. That worked like a charm. Going to wrap it in some media queries just to make sure things work right on tablet/mobile, and I'm good to go.

[Tony @ AlphaBlossom]

Awesome, glad I could help!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts