Resizing menu's and text - html

Question

I hired a guy to do my website a long time ago, and it never really got properly optimized for resizing windows. I've tried to get him to fix it but nothing has happened the last 5 months (he says he's too busy at the moment). I know the basics of coding on a website so i figured it wouldn't hurt to ask here, since i know you're an awesome community that likes to help each other. The site in question is http://dronebutikken.dk/
Basically there's 2 things right now that's really annoying. The search bar centers itself below the logo, and the shopping cart jumps to a second line when resizing to about half. What i want is for the search bar and shopping cart to stay in the right side in the same line. I realize that the menubar will be too wide then, so is it possible to resize the text when you resize the window? If so how?
Below is the style.css, the one that's actually on the website is minified, and i changed a few things here and there, but i don't recall changing anything in the menu or search bar/logo, so it should be the same, the only thing i changed is the font (changed it to Open Sans). I attached it below so you can ctrl/cmd+f for the relevant code.
I tried to do it myself a couple of times but i haven't managed to do it successfully yet, and it might scare some customers away that the webpage is constantly changing.
Style.css
/*
PALETTE:
navy basic : #434a54;
navy light : #565c65;
navy dark : #363b43;
grey basic : #dbe3e8;
grey light : #edf0f2;edf0f2
grey dark : #a7b7c1;
red basic : #e22a40;
red light : #f14a5e;
red dark : #d5041d;
green basic : #2ecc71;
green light : #6ddb9c;
green dark : #29b765;
*/
/* BASIC */
html {
position: relative;
min-height: 100%;
overflow-x: hidden;
}
/* TYPOGRAPHY */
body {
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
margin-bottom: 200px;
color: #000000;
}
#media(max-width:767px){
body {
margin-bottom: 370px;
margin-top: 55px;
}
body.no-menu {
margin-top: 0;
}
}
#top-nav, body > footer {
font-size: 0.85em;
}
h1 {
font-size: 35px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 18px;
}
/* HEADER */
#top-nav {
min-height: 40px;
}
#top-nav li > a {
padding-top: 10px;
padding-bottom: 10px;
}
#top-nav .navbar-text {
margin-bottom: 10px;
margin-top: 10px;
}
.form-search {
margin-top: 40px;
}
.form-search input {
padding: 10px 20px;
border: 0;
}
.form-search .search-wrap {
border: 3px solid #edf0f2;
border-radius: 2px;
}
.form-search > .input-append {
padding: 0;
}
.search-button {
padding: 2px 15px;
margin-top: -4px;
border-radius: 0 2px 2px 0;
margin-left: 0px;
background: #fff;
}
.search-button:hover {
background: #fff;
}
.search-button i {
font-size: 25px;
color: #dbe3e8;
}
.search-button:hover i {
font-size: 25px;
color: #a7b7c1;
}
#main-nav {
margin-top: 20px;
margin-bottom: 0;
border-radius: 2px;
border: none;
}
#main-nav .home > a {
padding-top: 15px;
padding-bottom: 0;
}
#main-nav .home > a > i {
font-size: 30px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0;
}
.nav-cart li > a {
font-weight: 300;
}
.nav-cart i {
font-size: 30px;
position: relative;
float: right;
}
.mega-dropdown i {
position: relative;
top: 1px;
font-weight: bold;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 2px;
background: #edf0f2;
}
.mega-dropdown-menu:before, .nav-cart-menu:before {
position: absolute;
top: -7px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.mega-dropdown-menu:after, .nav-cart-menu:after {
position: absolute;
top: -6px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.mega-dropdown-menu:before {
left: 159px;
}
.mega-dropdown-menu:after {
left: 160px;
}
.nav-cart-menu:before {
right: 23px;
}
.nav-cart-menu:after {
right: 24px;
}
.mega-dropdown-menu div, .mega-dropdown-menu div > li {
margin: 0;
padding: 0;
}
.mega-dropdown-menu div > li {
padding: 0;
}
.mega-dropdown-menu div > li > ul, .nav-cart-menu li > ul {
padding: 0 10px;
}
.mega-dropdown-menu div > li:first-child, .mega-dropdown-menu div > li:last-child {
padding-left: 0;
}
.mega-dropdown-menu div > li:nth-child(2) > ul {
border-right: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
}
.mega-dropdown-menu div > li:last-child > ul {
padding-top: 15px;
border-top: 1px solid #dfdfdf;
}
#preview {
border-left: 1px solid #dfdfdf;
padding: 0 10px;
margin: 0;
}
#preview h3 {
font-size: 16px;
font-weight: bold;
}
#media (min-width: #screen-md-min) {
#preview {
display: none;
}
}
.mega-dropdown-menu div > li > ul > li, .nav-cart-menu li > ul > li {
list-style: none;
}
.mega-dropdown-menu div > li > ul > li > a, .nav-cart-menu li > ul > li > a {
display: block;
padding: 3px 0;
clear: both;
font-size: 16px;
font-weight: normal;
line-height: 1.428571429;
color: #565c65;
white-space: normal;
}
.mega-dropdown-menu div > li ul > li > a:hover, .mega-dropdown-menu div > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header, .nav-cart-menu .dropdown-header, .xs-search-widget-menu .dropdown-header {
color: #565c65;
font-size: 18px;
font-weight: bold;
padding: 0;
}
.mega-dropdown-menu form {
margin: 3px 20px;
}
.mega-dropdown-menu .form-group {
margin-bottom: 3px;
}
.nav-cart {
position: static !important;
}
.nav-cart-menu {
padding: 20px 0px;
width: 50%;
box-shadow: none;
-webkit-box-shadow: none;
border-radius: 2px;
background: #fafafa;
}
#media(max-width:767px){
body {margin-top: 70px;}
.brand {clear: both;}
.brand a {
text-align: center;
display: block;
margin-bottom: 10px;
}
#main-nav {
position: absolute;
width: 100%;
top: 0;
margin: 0;
left: 0;
z-index: 9999;
border-radius: 0;
}
#main-nav .navbar-nav {
margin-top: 0;
margin-bottom: 0;
}
.xs-cart-widget {
display: inline-block !important;
text-align: right;
float: right;
}
.home, .mega-dropdown, li.contact {
float: left;
}
#main-nav > .navbar-left {
padding: 0;
margin: 0
}
#main-nav > .navbar-left > li, li.contact {
display: inline-block;
}
#main-nav > .navbar-left > li.home, li.contact; {
height: 51px;
}
#main-nav > .navbar-left > li > a {
line-height: 51px;
height: 51px;
padding: 0 15px;
}
.navbar-nav .open .dropdown-menu {
position: static;
overflow: visible;
position: absolute !important;
background: #edf0f2;
width: 100%;
}
#main-nav > .navbar-left > li > a > i {
font-weight: 400;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding-left: 7px;
}
.mega-dropdown-menu div > li > ul > li > a,
.nav-cart-menu li > ul > li > a {
padding: 5px 7px;
}
.xs-search-widget div > li:last-child > ul {
border: none;
}
.xs-search-widget .dropdown-header {
text-align: center
}
.xs-search {
padding-top: 0;
}
.xs-search > a ,
li.contact > a,
.mega-dropdown > a {
font-size: 30px;
}
.xs-search > a > i ,
li.contact > a > i,
.mega-dropdown > a > i {
font-weight: 400;
}
.xs-search form {
margin: 0;
}
}
/* FEATURED */
#featured {
/*background:#434a54;*/
color:#fff;
min-height:340px;
border-radius:2px;
}
#featured .item {
display:block;
cursor:default;
/*background:#434a54;*/
padding:20px 0px;
min-height:340px;
margin:0;
color:#FFF;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
text-align:center;
-webkit-tap-highlight-color:rgba(255, 255, 255, 0);
}
#featured .featured-text {
position:absolute;
margin-top:-150px;
right:20px;
margin-right: 20px;
float:right !important;
text-align: right;
}
.dark-text {
color:#434a54;
}
#media(max-width:767px) {
#featured .item {
min-height:150px;
}
#featured .item > div {
padding-left:0;
padding-right:0;
}
#featured {
border-radius:0;
margin-bottom: 10px;
min-height:150px;
}
#featured .featured-text {
color:#434a54;
position:relative;
margin-top:10px;
margin-right: 0;
float:none !important;
text-align: center !important;
right:auto;
}
.featured-row {
margin-bottom: 40px;
}
}
/* CONTENT */
.section-header h2, .category-header h2, .search-header h2, .page-header h2, .section-header h3 {
text-transform:uppercase;
font-weight:300;
margin-top:10px;
}
.section-header, .category-header, .search-header h2, .page-header h2 {
margin:40px 0;
}
.section-header h3 {
margin:0;
}
.section-header > div > a {
margin-top:10px;
color:#565c65;
font-weight:300
}
.section-header > div > a:hover {
text-decoration:none;
}
.section-header > div > a.btn-default {
color:#fff;
}
.product-grid, .product-images {
margin-top:20px;
margin-bottom:20px;
}
.product-grid .product, .product-images .product-image, #also .product {
border:3px solid #edf0f2;
border-radius:2px;
padding:2px 0 10px;
margin-bottom:20px;
}
.product-grid .product .title, #also .product .title {
font-size:16px;
}
.product-grid .product .price, #also .product .price {
font-size:20px;
font-weight:800;
}
.product-grid .product .price small {
font-weight:400;
}
.product-grid .product .special, .product-images .special, #also .product .special {
color:#fff;
padding:8px 20px;
font-size:14px;
position:absolute;
margin:10px;
}
.product-grid .product .special-new, .product-images .special-new, #also .product .special-new {
background:#565c65;
border-left:3px solid #363b43;
left:5px;
border-radius:0 2px 2px 0;
}
.product-grid .product .special-offer, .product-images .special-offer, #also .product .special-offer {
background:#f14a5e;
border-right:3px solid #d5041d;
right:5px;
border-radius:2px 0 0 2px;
}
.product-grid .product > p:last-child {
margin-bottom:0;
}
#breadcrumbs .breadcrumb {
font-size:14px;
border-radius:2px;
margin-top:10px;
background-color:#fff;
padding:0;
}
#breadcrumbs .breadcrumb .active a {
pointer-events:none;
cursor:default;
color:#777;
}
#single-product .product-image {
padding-bottom:2px;
}
#single-product #secondary-images {
margin:3px 0;
}
#single-product #secondary-images .thumbnail {
border:none;
padding:0;
margin-right:3px;
display:inline-block;
height:75px;
width:75px;
line-height: 75px;
}
.video-thumbnail > img {margin-top:10px; display:block; vertical-align: middle; line-height: 75px;}
.video-thumbnail .play {position: absolute; height:75px; width:75px; top:0; display: block; float:left;}
.video-thumbnail .play > img {opacity: 0.7;}
.video-thumbnail .play > img:hover {opacity: 1;}
#single-product #price-container {
background:#edf0f2;
padding:15px;
margin-top:20px;
margin-bottom:20px;
margin-left: 15px;
border-radius:2px;
}
#single-product #price-container .price {
font-size:24px;
font-weight:bold;
padding:10px 0 15px;
}
#single-product #price-container .in-stock, #single-product #price-container .out-of-stock {
font-size:14px;
border-bottom:1px solid #e8e8e8;
margin:0 -15px 20px;
text-align:center;
padding-bottom:10px;
}
#tabbed-info {
margin:50px 0 20px;
}
#tabbed-info .nav-tabs {
border:none;
margin-bottom:-1px;
}
#tabbed-info .nav-tabs > li > a {
background-color:#edf0f2;
border-radius:2px 2px 0 0;
color:#a7b7c1;
}
#tabbed-info .nav-tabs > li > a:hover {
background-color:#dbe3e8;
border-color:#dbe3e8;
color:#565c65;
}
#tabbed-info .nav-tabs > li.active > a {
border:2px solid #edf0f2;
border-radius:2px 2px 0 0;
border-bottom-color:#fff;
color:#565c65;
background-color:#fff;
}
#tabbed-info .tab-content {
border:2px solid #edf0f2;
padding:20px 15px;
border-radius:0 2px 2px 2px;
}
#related-products {
margin-top:50px;
}
#page-404 .form-search {
margin-top:0
}
#page-404 .search-wrap input {
height:43px;
}
#media(max-width:767px){
.category-header {
margin:30px 0 0;
}
#single-product #price-container {
border-radius:0;
margin-top:0;
}
#product-description {
padding-right:0;
padding-left:0;
}
.product-description-text {
padding-right:15px;
padding-left:15px;
}
.product-images {
margin-bottom:0;
margin-right:0;
margin-left:0;
padding:0;
}
.product-images .product-image {
border:none;
margin-bottom:5px;
}
}
#pager {
height:50px;
line-height:50px;
margin:0 0 30px;
}
#pager a {
background:#434a54;
color:#edf0f2;
}
#pager a:hover {
text-decoration:none;
background:#363b43;
}
#pager a, #pager .next, #pager .current {
padding:8px 15px;
border-radius:2px;
}
#also .category-header {
margin-bottom:10px;
}
/* CHECKOUT FLOW */
#checkout-steps {
margin-top:40px;
margin-bottom:40px;
height:113px;
}
#checkout-steps:after {
clear:both;
}
.stepwizard-step p {
margin-top:10px;
}
.process-row {
display:table-row;
}
.process {
display:table;
position:relative;
}
.process-step button[disabled] {
opacity:1 !important;
filter:alpha(opacity=100) !important;
}
.process-step i {
font-size:40px;
color:#a7b7c1;
}
.process-step .btn-primary:hover i {
color:#565c65;
}
.process-step .btn-default > i, .process-step .btn-success > i {
color:#fff;
}
.process-row:before {
top:35px;
bottom:0;
position:absolute;
content:"";
width:100%;
margin:0 -15px;
height:1px;
background-color:#ccc;
z-order:0;
}
.process-step {
display:table-cell;
text-align:center;
position:relative;
}
.process-step p {
margin-top:10px;
text-align:center;
}
.btn-circle {
width:70px;
height:70px;
text-align:center;
padding:0 0 3px 2px;
font-size:12px;
line-height:1.428571429;
border-radius:2px;
}
#basket #products {
margin-top:50px;
}
#basket #products-table, #approve #products-table {
display:table;
}
#basket #products-table > .product, #approve #products-table > .product {
display:table-row;
}
#basket #products-table > header.product, #approve #products-table > header.product {
color:#a7b7c1;
}
#basket #products-table > header.product > div, #approve #products-table > header.product > div {
border-bottom:none;
padding-bottom:0;
}
#basket #products-table > .product > div, #approve #products-table > .product > div {
display:table-cell;
padding:20px 5px;
vertical-align:middle;
border-bottom:1px solid #edf0f2;
}
.basket-widget #products-table > .product > div {
padding-top:5px !important;
}
.basket-widget {
margin-top:10px;
}
.basket-widget #basket-total {
margin-top:10px;
}
#basket #products-table > .product > div:last-child {
padding-right:0;
}
#basket #products-table > .product > div:first-child {
padding-left:0;
}
.product-qty input {
background-color:#fff;
background-image:none;
border:2px solid #dbe3e8;
border-radius:2px;
box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset;
color:#555;
font-size:14px;
line-height:1.42857;
padding:6px 12px;
text-align:center;
transition:border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
#coupon, #basket-total {
margin-top:50px;
}
#coupon input {
height:49px;
padding:10px 12px;
}
#coupon button {
margin-top:28px;
}
#basket-total #total {
font-size:20px;
font-weight:bold;
text-transform:uppercase;
border-top:2px solid #edf0f2;
padding:10px 0;
}
#basket-total #tax {
font-size:14px;
color:#a7b7c1;
}
#shipping-form #shipping_module {
padding-top:15px;
clear:both;
}
#approve #order-info dl {
margin-top:20px;
}
#order-info {
background:#edf0f2;
border-radius:2px;
padding-top:10px;
padding-bottom:10px;
}
#order-info h4 {
font-weight:300;
text-transform:uppercase;
}
#approve #order-info dl dd.gls-shop br:first-child{
display: none;
}
#continue {
margin:40px -15px;
}
#continue .prev {
text-decoration:underline;
}
#media(max-width:767px){
.process-step > a {
margin:3px;
}
#checkout-steps {
width:100%;
margin:10px -15px;
padding:0;
}
.product-decription {
font-weight:bold;
}
header > .product-decription, .product-decription > .visible-xs {
font-weight:400;
}
#coupon {
margin-top:10px;
}
.section-header {
margin-bottom:30px;
margin-top:0;
}
#approve #order-info dl {
padding-left:15px;
padding-right:15px;
}
}
/* FOOTER */
body > footer {
position:absolute;
bottom:0;
width:100%;
margin-top:30px;
min-height:200px;
background-color:#434a54;
color:#fff;
padding-top:2em;
}
#footer-nav > li > a {
padding:1px 0;
}
#footer-nav > li > a:hover {
background:none;
color:#fff;
}
/* FORMS */
form {
...
}
input {
...
}
i.form-control-feedback {
font-size:25px;
margin-right:5px;
margin-top:2px;
}
.has-error .form-control-feedback {
font-size:18px;
}
/* GENERAL GUBBINS */
.lg-icon {
font-size:1.7em;
}
.btn > i {
position:relative;
top:2px;
}
.lightbox { display: none; }
#media print {
/* All your print styles go here */
html,body {font-size:10pt;}
.section-header {margin-top:5px; margin-bottom: 5px;}
.section-header h2 {font-size: 11pt;}
.section-header h3 {font-size: 10pt;}
.footer-print {font-size: 9pt; bottom:0; text-align: center; margin-top: 40px;}
.brand {display:inline-block; text-align: right}
}

Answer 1

please check in combined.min.css and also in the html change col-sm-8 to col-sm-6
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 14px; //from 16px to 14px
font-weight: 400;
margin-bottom: 200px;
color: #000;
}
#media (min-width: 768px)
.col-sm-6 {
width: 50%;
float: right;// add this line
}
in html
<div class="row"><span class="brand col-md-6"><img src="assets/img/logo.png" alt="Dronebutikken.dk" title="Drone shop Logo" width="300"></span><div class="col-sm-6 hidden-xs"><form id="header-search-form" class="form-search form-horizontal pull-right" action="http://dronebutikken.dk/search"><div class="input-append col-sm-12"><div class="search-wrap"><input type="text" class="search-query" name="search" value="" placeholder="Indtast søgeord"><button type="submit" class="btn btn-primary search-button" value=" "><i class="flaticon-zoom22"></i></button></div></div></form></div></div>