Adjustment to logo, menu and mobile version

Hi guys,

I’ve designed my website www.myteamshop.de using the WP Sydney theme. Although the website itself works fine there are still some issues to be addressed / some adjustments to be made:

  1. The logo in the header section is slightly blurry. I’m already using a high resolution logo. How can I a achieve a not blurry logo presentation?

  2. My website appears to be kind of slow, especially in the middle section where it shows screenshots. These screenshots take ages to load - if they load at all. I seems that I have to initially click on them in order to show anything but white. Anything I can adjust?

  3. I’d like to have the menu item “Home” in a different color that the other items. How can I do so?

  4. Even though I have added additional CSS to ensure a proper style of my website no matter which platform (desktop, mobile, tablet) you use, it only works for some devices like iPhone X, iPad Air 2, MacBook. On the contrary, when using an iPad mini or a Samsung S8 edge the website looks messed up. Could you please also help me with this issue?

I have already applied some piece of CSS, maybe this helps to further understand the logic of my website:

.btn-menu{
     color: #000;
}
 @media only screen and (max-width:1025px){
     .header-wrap .container{
         text-align: left;
    }
     .header-wrap .btn-menu{
         float: right;
         margin-right: 15px;
    }
     .header-wrap .col-md-4 {
         max-width: 90%;
         position: relative;
         z-index: 1000;
    }
     .header-wrap .col-md-8 {
         margin-top: -60px;
    }
     #mainnav-mobi {
         top: 70px;
    }
}
 #mainnav-mobi ul > li > a {
     color: black;
}
 #mainnav-mobi {
     background-color: white;
}
 @media only screen and (min-width: 1024px) and (max-width: 1024px) {
     .slide-inner {
         top: 40%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 50px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 50px;
         left: -310px;
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 1025px) {
     .slide-inner {
         top: 45%;
         padding-left: 100px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 0px !important;
         padding-top: 100px !important;
         text-align: left;
         font-size: 28px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 20px;
         left: -445px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 375px) and (max-width: 812px) {
     .slide-inner {
         top: 40%;
         padding-left: 10px !important;
    }
     .subtitle {
         top: 0%;
         padding-left: 10px !important;
         padding-top: 30px !important;
         text-align: left;
         font-size: 16px !important;
    }
     .maintitle {
         padding-left: 0px !important;
         text-align: center;
    }
     .roll-button {
         top: 32px;
         left: -90px 
    }
     .nf-form-content input[type="button"] {
         color: #FEFEFE !important;
         background-color: #102C3D !important;
         font: 13px lato, raleway;
         font-weight: bold;
    }
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
     .header-wrap .btn-menu {
         margin-top: 50px;
    }
}

I really hope you can help me with these issues.

Thanks a lot.

Regards,

Sebastian

Hello Sebastian,

Thank you for reaching out to us here. Let’s address them one by one.

  1. The logo in the header section is slightly blurry. I’m already using a high resolution logo. How can I a achieve a not blurry logo presentation?

Your actual logo seems a bit blurry. The sharpness displaying on your site isn’t reduced when uploading. The solution is to make other logo image (PNG) with better quality and reupload it.

Regards,
Kharis

1 Like

Thank you Kharis!

Could you please help me with the other issues? Appreciate it!

Regards,
Sebastian

Hello Sebastian,

Please share me the links to your other topics.

Regards,
Kharis

Hi Kharis,

please see for the other topic in my initial post. I did not post them separately.

Do you want me to post each topic separately?

Regards,
Sebastian

Sorry I missed it. Would you please post them separately in new topic. Use one topic for one question to help easier track progress and avoid endless discussion.

Regards,
Kharis

1 Like

Done.

Regards,
Sebastian