I’m trying to create a float group navigation bar that is vertically aligned to the left on desktop and horizontally aligned to the bottom on mobile. I’m using Classify to add a .horizontal/.vertical class depending on screen size. The navigation is vertically aligned by default. Here’s the debug version of that page.
What I’m having trouble with is getting the elements to align horizontally. You can see this by reducing the size of your browser window so that the .horizontal class gets activated. I’ve been searching for a solution and came across this Stack Overflow answer, which I tried to implement. Instead of being horizontally aligned they’re now stacked on top of each other. Note that I’m applying the style changes to .bubble-r-line classes that are immediate children of the .navigation parent class float group.
Note that I’m not interested in setting an absolute position, since I want the elements in the mobile version to be centered at the bottom no matter the screen width.
Thanks in advance for any help you can provide!