Mobile menu icon keeps dropping in height. Can\'t figure out why.

[skwurltale]

Trying to create a responsive menu here. Everything works except when in mobile width, the menu icon gets pushed down underneath the title. When it opens, it’s fine. That’s where I want it. I want the icon on the same line as the Title text. I can’t figure out what is pushing this down.

https://codepen.io/derek-deboer/pen/XGONqB

Tried the display types of the .current class but can’t get it looking right.

[uxfed]

You’ll see the link’s positioning CSS is contigent on the “responsive” class that gets toggled when the button is clicked. You’d want that CSS present all the time.

This is the relevant CSS being toggled:
.subnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}

[skwurltale]

Yes of course. The .subnav .icon needs to be the same. Thank you.

[skwurltale]

Okay, scratch that. When adding a body margin or padding the icon breaks. Presumably because of the ridge elements with the right:0 and left:0. Crap.

[uxfed]

You’re almost there. “position: absolute” positions the element relative to whichever ancestor element is relatively positioned (that explanation sounded better in my head). Anyway, you need to add “position: relative” to an appropriate ancestor element. Maybe .subnav.

[Author]

Posts