Hello,

First, when finding the css to customize, do not ever see the backend. Check only front-end/live site. The css you pasted(if is exactly like that) has errors.
Try adding this one:

/*mobile*/
@media (max-width: 480px){
#logo img { height: 60px;}
.cl-mobile-menu-button span { background-color: #fff; }
.header_container * {
    background-color: #20263a;
}
}
/*tablet*/
@media (min-width: 1024px){
#logo img { height: 60px;}
.cl-mobile-menu-button span { background-color: #fff; }
.header_container * {
    background-color: #20263a;
}
}

Mobile result screenshot: https://ibb.co/0hbZKZB
Change the values for tablet, to your wish (i used the same as for mobile for this example).

Best regards!

Hello,

Yes, it’s all accessible now. I updated theme to the latest version 3.1 (released two days ago).
I updated required plugins too. Please check your site. All is well now. The mobile menu is ok as well. See screenshot: https://ibb.co/fFH3pSy

Best regards!

Hello,

1-FOOTER MENU:
There is some css that is positioning it 50% to the left. Try adding this css to fix this:

footer#footer .inner .row-fluid.ff .span12:first-child:last-child {
    left: 42% !important;
}

2-Images:
This is a decision of the developers. For any suggestion please write here: https://support.codeless.co/?forum=suggest-us-features

Can i see a page where you are using this?

3-Empty spaces: Please add some wp credentials in a private reply. So we can check it.
4-PAGEABLE CONTAINER: You can add padding to a row using the row settings. Also check the margin/padding of page container in Specular > Layout > Page Builder Row Margin Bottom/Inner Page Content Padding.

The responsive mode has different css. If you want to customize it, you need to wrapp the custom css inside a @media (max-width: 480px) rule.

There are rules to follow for responsive. When in mobile in order to have content show well, only one row structure is used. These are WordPress rules. It’s not decided from us. If you do not want to use responsive mode, and keep several columns per row, then just set off Responsive in Specular > General Options.

-Yes, you can update wordpress to 5.2. Theme has no issues with it.

Best regards!

Hello,

The menu it’s there, but it’s already in mobile mode. Screenshot: https://ibb.co/xzFJtss It will show in desktop mode only in landscape layout.
*I can’t see the first picture.

Let us know.
Best regards!

Hello,

Not by theme options. But you can using custom css. See related ticket:
https://support.codeless.co/?topic=mobile-logo-menu-color-change

Best regards!

Hello,

I checked and the mentioned images are indeed loading properly in mobile and desktop. Here is what i see:
Desktop: https://ibb.co/8bh82Dx
Mobile: https://ibb.co/8bh82Dx

1-That happens because of the difference in position of the two types of headers. I fixed it by adding this css in your custom css box:

.header_container.header-bottom.boxed-style.menu_style-simple.menu-full-style.cl-transparent.cl-header-light {
    position: absolute !important;
}
.header_container.boxed-style {
    position: relative;
}

2-Re-position the image to your wish by changing the background position in Row settings > Design > BACKGROUND IMAGE > Background Position.
-https://ibb.co/Tw4PS76 -> make the row full height. The background image will only show up to the end of the row.

3-I added this css:

.header_container.header-bottom.boxed-style.menu_style-simple.menu-full-style .cl-text p:last-child {
    color: #273eaf !important;
}
.home .header_container.header-bottom.boxed-style.menu_style-simple.menu-full-style .cl-text p:last-child {
    color: white !important;
}

Best regards!

Hello,

You can change the pages and post header in light version by change this : Header Color Style 1 > Light

To fix the issue on the mobile please add this custom css :

@media(max-width:768px){
header#header.transparent{
   background:#fff !important;
}
}

.error404 #header #logo .light {
  display:block;
}

.error404 #header #logo .dark{

   display:none;
}

.error404 nav .menu > li > a{
 color:#fff !important;
} 

Write the line above into General > Custom Css Box.

Regards!