Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Logo light missing

light version
    • 9 years, 6 months ago javalquimia
      Participant

      Expired

      Hi, I uploaded a logo for light version but on mobile devices keeps default logo with white background menu. I have as default header Simple style with transparent >on  with a white logo. I would like on mobile same style with transparency and light logo.

      Take a look here:  www.cosladaweb.es/pruebas

      Thanks and regards,

      Javier

    • 9 years, 6 months ago Mirela
      Participant

      Hello,

      Please add this code into your custom css box:

      @media(max-width: 480px){
      #logo img.dark {
          display: none;
          visibility: hidden;
      }
      #logo img.light {
          display: block;
          visibility: visible;
      }}

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      No changes, I added the code but without result. This is my custom CSS box now:

      /*#header{

      margin: 0 auto;

      @media(max-width: 480px){

      #logo img.dark {

      display: none;

      visibility: hidden;

      }

      #logo img.light {

      display: block;

      visibility: visible;

      }}

      }*/

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      You have pasted it wrong. It is a independent code. It should be pasted after any piece of code you have already in the custom css box, not inside it.
      The correct form of the code you send is:

      #header{margin: 0 auto;}
      
      @media(max-width: 480px){
      #logo img.dark {
      display: none;
      visibility: hidden;
      }
      #logo img.light {
      display: block;
      visibility: visible;
      }
      }

      Try again and let us know.

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      Sorry, but I have now same way you wrote me but it doesn´t work. Light logo doesn´t appear and menu with background white.

       

       

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Please send us your wp credentials in a private reply. So i can do it for you.

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Sorry for the late rpely.
      I edited the code above to this:

      @media(max-width: 480px){
      #logo .dark {
      display: none !important;
      visibility: hidden !important;
      }
      #logo .light {
      display: block !important;
      visibility: visible !important;
      }
      }

      It’s ok now, screenshot.

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      Thanks Mihaila. Good job.

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      Hi Mihaila, regarding this issue I suposed was solved because I only checked with phone devices, but I found on tablets and on horizontal mode smartphones the logo is not showed.

      In the other hand I would like menu transparent the same I have on desktop mode.

      Thanks,

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Please add this code for the ipad layout in portrait and landscape.

       @media(max-width: 979px){
      #logo .dark {
      display: none !important;
      visibility: hidden !important;
      }
      #logo .light {
      display: block !important;
      visibility: visible !important;
      }
      }
      @media(max-width: 1024px){
      #logo .dark {
      display: none !important;
      visibility: hidden !important;
      }
      #logo .light {
      display: block !important;
      visibility: visible !important;
      }
      }

      To make header transparent even in mobile, then add this code:
      @media(max-width: 1024px){ header#header {background-color: rgba(230, 227, 221, 0.05);}}

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      Now logo is working on mobile and tablets but headerk keeps solid without transparency. I attach the code I have on custom CSS:

      #header{margin: 0 auto;}

      @media(max-width: 480px){

      #logo .dark {

      display: none !important;

      visibility: hidden !important;

      }

      #logo .light {

      display: block !important;

      visibility: visible !important;

      }

      }

      @media(max-width: 979px){

      #logo .dark {

      display: none !important;

      visibility: hidden !important;

      }

      #logo .light {

      display: block !important;

      visibility: visible !important;

      }

      }

      @media(max-width: 1024px){

      #logo .dark {

      display: none !important;

      visibility: hidden !important;

      }

      #logo .light {

      display: block !important;

      visibility: visible !important;

      }

      }

      @media(max-width: 1024px){

      header#header {background-color: rgba(230, 227, 221, 0.05);}

      }

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Please add an !important in the last code.
      This block:

      @media(max-width: 1024px){
      header#header {background-color: rgba(230, 227, 221, 0.05);}
      }

      Will become like this:

      @media(max-width: 1024px){
      header#header {background-color: rgba(230, 227, 221, 0.05) !important;}
      }

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      It doesn´t work Mihaila !

    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      Are you sure you added it properly? It should not have any problem, i tested it. Please send us valid link/credentials and i will do it for you, just like the above. The current link appears as “404, Not Found”.
      Let us know.

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      I get error 503: Service Temporarily Unavailable. Please check your site and let us know.

      Best regards!

    • 9 years, 5 months ago javalquimia
      Participant

      Expired

      This reply has been marked as private.
    • 9 years, 5 months ago Mirela
      Participant

      Hello,

      I still can not login (the site is on, but the credentials are not valid), please add this code into your custom css box:

      @media (max-width: 979px){
      .header_wrapper {
          background: rgba(251, 251, 251, 0.09) !important;
      }}

      Let us know.

      Best regards!

Viewing 18 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password