fix div position for mobile with media queries - html

Question

hey there I've got a problem in mobile. that's my site: dev site
today I made a dropdown menu with flags so I may switch to different languages. the problem is that the dropdown for mobile is under the hamburger nav bar...I thought about solving it with media queries (cause it happen only in mobile) help anyone?
here's the code:
<div class="navbar-header">
<button type="button" id="navbar-toggle" class="navbar-toggle" data-toggle="collapseX" data-target=".navbar-responsive-collapseX"
style="margin-top: 0px;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--try for flag dropdown menu-->
<!--position the dropdown in it's place in the navbar-->
<div class="image-dropdown" id="image-dropdown" style=" float: right; position: relative; top: 30px;width: 45px;">
<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick='window.location="http://www.uprightpose.com/";' />
<!--hyperlink to the language page-->
<label for="line1"></label>
</a>
<a href="http://www.uprightpose.com/home-es-new/">
<input type="radio" id="line2" name="line-style" value="2" onclick='window.location="http://www.uprightpose.com/home-es-new/";' />
<label for="line2"></label>
</a>
</div>
<!--end of flag dropdown menu-->
and that's the CSS:
<style>
#image-dropdown {
/*style the "box" in its minimzed state*/
width:80px; height:50px; overflow:hidden;
/*animate collapsing the dropdown from open to closed state (v. fast)*/
-moz-transition: height 0.1s;
-webkit-transition: height 0.1s;
-ms-transition: height 0.1s;
-o-transition: height 0.1s;
transition: height 0.1s;
}
#image-dropdown:hover {
height:200px; /*overflow-y:scroll;*/
/*nice and smooth expand - speed this up at your preference or remove animation altogether*/
-moz-transition: height 0.5s;
-webkit-transition: height 0.5s;
-ms-transition: height 0.5s;
-o-transition: height 0.5s;
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons. like, completely!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label[for="line1"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.2;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute, something like label[for=line2]{background-image:...}*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown label[for="line2"] {
/*style the labels to look like dropdown options, kinda*/
display:none; margin:2px; height:46px; opacity:0.7;
/*setting correct backgrounds - add additional rules with selectors based on "for" attribute*/
background:url("https://lipis.github.io/flag-icon-css/flags/4x3/es.svg");
background-size: 40px;
background-repeat: no-repeat;
border-radius: 7px;
width: 40px;
height: 30px;
}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state. we want to see only the selected radio button in the collapsed menu, and all of them when expanded*/
display:block;
}
#image-dropdown label:hover {
opacity:0.5;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button (with our markup they are semantically related) should be fully opaque regardless of hover, and they should always be visible (i.e. even in the collapsed menu*/
opacity:1 !important; display:block;
}
/*pfft, nothing as cool here, just the value trace*/
#trace {margin:0 0 20px;}
</style>

Answer 1

I would try "Sticking" them one next to each other with float:right on both of the elements - putting both of them under the same container. Note the changes I've done (its written with inlined style because I can only modify it by DEV tools).
<div class="image-dropdown" id="image-dropdown" style="float: right; position: relative; top: 30px; width: 45px;">
<a href="http://www.uprightpose.com/">
<input checked="checked" type="radio" id="line1" name="line-style" value="1" onclick="window.location="http://www.uprightpose.com/";">
<!--hyperlink to the language page-->
<label for="line1" style=""></label>
</a>
<a href="http://www.uprightpose.com/home-es-new/">
<input type="radio" id="line2" name="line-style" value="2" onclick="window.location="http://www.uprightpose.com/home-es-new/";">
<label for="line2"></label>
</a>
</div>
<div class="navbar-header" style="display: inline-block;float: right;">
<button type="button" id="navbar-toggle" class="navbar-toggle" data-toggle="collapseX" data-target=".navbar-responsive-collapseX" style="margin-top: 0px; position: relative;top: 30px;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
I think the result is what you need (both of them aligned one next to each other) for screens with short width: