Hi Mirella,

I too have no issue with the simulated mobile layout.

However, it does not work on an actual mobile device. Here’s what happens:

1. Open the site in a browser
2. Click the hamburger menu icon
3. The hamburger menu icon changes to the X icon, but the mobile menu fails to load
4. Refresh the page
5. Click the hamburger menu icon
6. The mobile menu loads fine after refresh

The phone I tested this on is a Samsung Note 9 on Google Chrome browser.

I cannot confirm that iPhones have the same behavior, but Original Poster mentions that the issues do exist on iPhone. I can ask someone to test iPhone later today to confirm that OP’s iPhone issue also exists on my site.

• This reply was modified 6 years, 6 months ago by amandaedens.

Hello,

@ChristopherGFox
I checked your site in actual mobile and desktop simulated mobile layout. I had no issues with the menu. See screenshots:
https://ibb.co/Kq32N87
https://ibb.co/7Kpcsns

Are you still having problem? When exactly?

@amandaedens, same here: https://ibb.co/nzkVF9T

Let us know.
Best regards!

Hello Mirela,

I added my WP credentials so that you can take a look at the mobile menu loading unreliably. Thank you.

Hello,

That’s because the height of the menu exceeds the height of mobile screen. Please add this code into your Custom Css box:

.menu-small ul li a {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
}

Best regards!

Hello,

The AP Mega Menu plugin is the culprit. I deactivated it and the mobile header is ok. This is an unknown issue for us. The developer is working on it and we will update theme as soon as we have it fixed.

Best regards!

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!