Hi nstriegel,
Here are my thoughts on how to accomplish what you are trying to do, although I think you are extremely limited in trying to do this:
1) Use CSS with absolute positioning. For example, you could create a <div>
that holds both the flags and the translator drop-down. For this <div>
you could set its positioning to position:relative
, and then try and set the flags container and the drop-down container to position:absolute
, which would allow you to move them separately.
However, in doing it this way, you are somewhat limited to the scope of the <div>
that holds the translator, in terms of how far apart you can position the elements. So if you can keep them fairly close together, or create a <div>
that covers are large area of your website, then this would not be so limiting. Clear as mud, right?
You might have to read up on absolute positioning, because it can sometimes act unexpectedly when trying to accomplish certain things.
2) Get the premium version, which has the translator hard-coded into the web page. Then we could separate the HTML elements entirely, unlike the FREE version which loads after the page is complete, and also does not allow modification directly to the HTML elements.
https://wp-studio.net/how-it-works/
Those are the primary solutions I can see as of now. Both are quite tricky, but with a little creativity, it could be done I’m sure.
I hope that helps! Rob Myrick