Hello,

Sorry for th elate reply.
Please keep in mind that we respond to topics according to their arrival time. The oldest first. So keeping replying to your own topic often will only delay our respond time.

1-Your site is not identical to the demo because it has other data in it. Starting from the logo which is in different dimensions from the demo.
The code added to your custom css box, was shaping the responsive layout of the site. It does not affect other configurations whatsoever.
A newly installed plugin can affect the site, or an updated plugin..etc.

2-As for the menu in this view, this happens when the menu width exceeds the header width (some points while re-sizing the window) This is resolved by changing the css for that specific screen width. However you should know that the responsive code covers the predefined screen-width of mobiles/tablets (read more here). These resolutions are fixed and the same for all devices.

3-We are sorry that this topic from a month ago is still open, but removing the code we give you, won’t help moving forward with it. We test the code we give you, so the other changes you have been experiencing are not related to this.

4-Please add these lines into your custom css box, for the layout of width 800px and 850px:

@media (max-width: 979px) and (min-width: 768px){
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container, .header_7.header_wrapper .container { width: 667px !important;}
.services_small.wpb_content_element.align_left {  margin-left: -44px !important;}
}
@media (min-width: 768px){
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container, .header_7.header_wrapper .container { width: 697px !important;}
.vc_col-sm-4 {  width: 30% !important;}
}
@media (min-width: 980px){
nav .menu > li > a {
    margin-left: -5px !important;
    margin-right: -5px !important;
}}

Let us know.

Best regards!

Hello,

Please add this code into your custom css box:

@media (max-width: 480px){
#logo { left: -156px !important;}
.header_tools { left: 38px !important;}
#logo img.dark {
    max-height: 118px;
    margin-top: -65px;
}
.mobile_small_menu { left: 30px !important;}
}

Result.
Let us know.

Best regards!

Hello,

Please add this code into your custom css box:

@media (max-width:480px){
#content {  width: 268px !important;}
#logo { left: -37px !important;}
.mobile_small_menu { left: 6px !important;}
}
@media (max-width: 767px){
#copyright .desc {
    width: 97% !important;
    margin-left: 3px;
}}
@media (max-width: 979px) and (min-width: 768px){
.mobile_small_menu { top: 50%;}
#content { width: 646px !important;}
.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container, .header_7.header_wrapper .container { width: 647px !important;}
.wpb_text_column.wpb_content_element { margin-left: 12px;}
}

Result: iPhone5, iPad.

Best regards!

Hello,

Please edit the above code to this:

@media (min-width: 979px) and (max-width: 1150px){
.mobile_small_menu { display: block !important;}
#navigation { display: none;}
#logo {padding-left: 32% !important;}
}

Best regards!