Mobile site not fucntional

Hi,

The mobile menu is all messed up showing as a black line and the hamburger menu is not centered, any ideas? I cant find the colour options for what is showing…

http://www.mywebsiteguystestdomain.ca/

Let me know if you can help.

Thanks…James

Hello James,

It’s your additional CSS issue, please try to disable it.

Kind Regards, Roman.
aThemes Support

Hi,

I cant disable it as it is doing other things for the site, here is what I have for additional CSS;

.has-hero .header-contact {
      background-color: #1e73be;
    } 
/* Text color */
    .has-hero .header-contact,
    .has-hero .header-contact a {
      color: #1e73be;
    }

    /* Icon color */
    .has-hero .header-contact .fa:before {
      color: #1e73be;
    }
.slide-inner .button-slider {
      color: #1e73be;
    }

    .slide-inner .button-slider,
    .slide-inner .button-slider:hover {
      background-color: #ffffff;
      border-color: #1e73be;
      color: #1e73be;
    }
a.roll-button.button-slider {
    font-size: 18px;
    padding: 20px 40px;
}
.button-slider {
  margin-top: 80px;
}
#sidebar-footer {
    padding: 30px 0 5px;
}
.footer-contact {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .footer-contact .widget-title {
      color: #1e73be;
    }

    .footer-contact .widget-title:after {
      background-color: #1abdf1;
    }
.header-contact-info span,
    .header-contact-info .fa {
      font-size: 14px;
    }
.header-contact-info,
.header-contact .header-contact-info a,
.header-contact .menu-social-container a {
    color: #1e73be;}
.header-contact, 
    .header-contact a,
    .header-contact .fa,
    .has-hero .header-contact, 
    .has-hero .header-contact a,
    .has-hero .header-contact .fa {
      color: black;
    }
@media only screen and (min-width: 102px) {
      .site-header .header-contact-info {
        float: none;
        margin-left: auto;
        margin-right: 0;
        width: auto;
        display: table;
      }
      .site-header .header-contact-info > span:last-child {
        margin-right: 0;
      }
    }
.site-logo {
  max-height: 130px;
}
@media only screen and (max-width: 767px) {
    header#masthead div.col-md-4.col-sm-8.col-xs-12 {
        max-width: 52%;
    }
	
    header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 2px 3px;
    }

    header#masthead nav#mainnav-mobi {
        left: -194px;
        width: 20px;
    }
}
.site-header .col-md-10 {
  position: relative;
}

.header-inner-contact {
  position: absolute;
  top: 10%;
  left: 0;
}

.header-inner-contact > span {
  display: inline-block;
  margin-right: 10px;
  margin-top: 5px;
}

.header-inner-contact > span:last-child {
  margin-right: 0;
}

.header-inner-contact span,
.header-inner-contact span a {
  color: #000;
}

@media only screen and (max-width: 767px) {

  .header-inner-contact {
    position: static;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
  }

}

@media only screen and (min-width: 768px) {

  .header-inner-contact {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media only screen and (min-width: 1025px) {
      .site-header {
        top: 0 !important;
        padding-top: 0;
      }
      .site-header > .header-contact {
        margin-bottom: -50px;
      }
      .site-header > .header-contact .header-contact-info {
        padding-right: 14px;
      }
    }

Can you help?

Thanks…James

Hello James,

It looks like this issue requires some coding and testing, this goes beyond our support policy. It’s considered advanced customization. As an option, you can contact Codeable for this kind of service, or find a reputable freelancer on Upwork. Hope for your understanding.

Kind Regards, Roman.
aThemes Support

Hi Roman,

All of the additional CSS has been provided by Athemes on these forums to help out so this really shouldn’t fall outside the scope of support.

Can you please try and help so I dont have to find someone else to help?

James

Hello James,

All of the additional CSS has been provided by Athemes on these forums to help out so this really shouldn’t fall outside the scope of support.

Okay, regarding this part of your additional CSS code:

@media only screen and (max-width: 767px) {
    header#masthead div.col-md-4.col-sm-8.col-xs-12 {
        max-width: 52%;
    }
	
    header#masthead div.col-md-4.col-sm-8.col-xs-12,
    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        width: auto;
    }

    header#masthead div.col-md-8.col-sm-4.col-xs-12 {
        float: right;
        padding: 2px 3px;
    }

    header#masthead nav#mainnav-mobi {
        left: -194px;
        width: 20px;
    }
}

It looks like you have copied it from one of these topics:


However, you didn’t copy it properly or changed it intentionally. And you have much more additional CSS code that should be checked. It’s okay when we help user with few lines of CSS, but it’s not okay to check hundreds of lines (you have 154). It’s just too time-consuming, really hope for your understanding.

Can you please try and help so I dont have to find someone else to help?

It looks like CSS code that I mentioned above is problematic, so you can start with it (try to copy it from the right topic as is, without altering).

Also, since you have much additional CSS code, it could be better if you used CSS comments to outline different parts of code, maybe even with links to forum topics and notes about any modifications. Here is a relevant link that might help:
https://www.w3schools.com/css/css_syntax.ASP

Kind Regards, Roman.
aThemes Support

Hi,

Thanks, i was searching on how to fix different things and thought the code would be fine since it was for Sydney pro theme…thanks for looking into this for me!

Cheers…James

You are welcome James!

Please feel free to ask any other questions that you might have in future.

Kind Regards, Roman.
aThemes Support