Please help to make up my responsive menu bar (update)


#1

okay, thank you for the reply mr. Nitishk. here i edit my question. so, i have a blog and i want to set the menu bar side by side with search bar. i successfully coded it and it display very well in desktop or mobile. but the problem is when i click to the menu icon ( appear in mobile or smaller screen) the search bar goes down. i cant make the search bar stick to its position.

to better understanding my problem take a look at my code,

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul.main-menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #193550;
}
ul.main-menu li {float: left;}
ul.main-menu li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 16px;
}
ul.main-menu li a:hover {background-color: #111;}
ul.main-menu li.icon {display: none;}
@media screen and (max-width:680px) {
  ul.main-menu li:not(:first-child) {display: none;}
  ul.main-menu li.icon {
    float: left;
    display: inline-block;
  }
}
@media screen and (max-width:680px) {
  ul.main-menu.responsive-main-menu {position: relative;}
  ul.main-menu.responsive-main-menu li.icon {
    position: relative;
    right: 0;
    top: 0;
  }
  ul.main-menu.responsive-main-menu li {
    float: none;
    display: inline;
  }
  ul.main-menu.responsive-main-menu li a {
    display: block;
    text-align: left;
  }
}
#searchbar{float:right; margin:7px 8px 5px 0;}
#searchbar input[type="text"] { -moz-box-sizing: border-box;background: #FCFCFC; border: 1px solid #DFDFDF; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04); color: #888888; padding: 5px 0; width: 120px; transition: all 0.25s linear 0s; text-indent:8px;}
#searchbar button {background:#00a1e0; border:0; color: #FFFFFF; cursor:pointer; padding:5px 8px; box-shadow:0 0 0 3px rgba(0, 0, 0, 0.04);}
#searchbar button:hover{opacity:0.8;}
</style>
</head>
<body>
<ul class="main-menu">
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰ MENU</a>
  </li>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
<form action='/search' id='searchbar' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter keywords&quot;;}' onfocus='if (this.value == &quot;Enter keywords&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter keywords'/>
<button type='submit'><i class='fa fa-search'/></button>
</form>
</ul>
<script>
function myFunction() {
    document.getElementsByClassName("main-menu")[0].classList.toggle("responsive-main-menu");
}
</script>
</body>
</html>

i ve been working for days to resolve this but i couldn’t. any help will be highly appreciated. thank you

this is desktop view - OK
https://lh3.googleusercontent.com/--K3PoETimG8/Vvx5QZM__OI/AAAAAAAAEYs/4LScpQH4wwUGLRof0fyh1qPUGhIiXo31QCCo/s912-Ic42/menu%2Bdesktop.jpg

this is responsive view - OK
https://lh3.googleusercontent.com/-r05X_rR1qzQ/Vvx5i-oP9vI/AAAAAAAAEY0/tWIN_lkqOsE3pwaP3Gd8oBlMaxfCiONtwCCo/s590-Ic42/menu%2Bmobile.jpg

this is responsive view when i click on menu icon - not OK, the search bar should always in top
https://lh3.googleusercontent.com/-tftYFNr4fls/Vvx5t2Is96I/AAAAAAAAEY0/hD-U7uT3Mo4s2lOzpZf-iw06FNujXV-hwCCo/s581-Ic42/menu%2Bmobile%2B2.jpg

#2

No you can surely put code , link and image here !

To add code first paste your code in the box and then select it and then press ctrl+shift+c which will enclose it in the codebox.

To insert any image simply paste the image url and it will fetch the image or you can upload it clicking on upload icon found in right to code icon.

You might not be able to put link so you can change the url pattern like this -

If your url is - http://abc.com

Then change it to - http://abcdotcom and then select the link and press ctrl+shift+c

And we’ll understand your link :smile:

Hope you understand :wink: