Mobile Logo & Menu Color Change

- 8 years ago riedmankatie
  Participant
  
  Expired
  
  Hello,
  
  Is there a way to use the light version of a logo for specific pages on the mobile display and dark versions on others?
  
  How do you change the color of the mobile menu? On some pages it appears gray and others it is white (on a white background so it’s not visible). I haven’t added anything to change this so I’m not sure why the mobile menu color is inconsistent. I would like to have it appear white on some pages and dark on others.
  
  Thank you.
  
  Katie
- 8 years ago Mirela
  Participant
  Hello,
  
  This requires custom css. If you want a different logo in mobile and only on certain pages, then the custom css code would need to be added only to those page’s custom css box (the gear icon in top-right corner). Try this code:
  
  @media (max-width:480px){ .header_wrapper #logo { content: url("https://codeless.co/specular/default/wp-content/uploads/2014/10/logo.png"); }}
  
  Please fill in the necessary information on your extra information fields of your profile data. So we can give it a closer look to mobile menu.
  
  Read this article for more information.
  
  Best regards!
- 8 years ago riedmankatie
  Participant
  
  Expired
  
  This reply has been marked as private.
- 8 years ago riedmankatie
  Participant
  
  Expired
  
  If I’d like to have a different logo for the web page display, what would the custom CSS be?
- 8 years ago Mirela
  Participant
  
  Hello,
  
  The css is the one i send you. The logic is this: you set a logo for your site. Add the custom css to change this for the mobile version. Or you remove the @media rule and add it into the page’s custom css box of which you wish to change logo to.
  Can you please be more specific with: “Different logo for web page”? What do you need to do?
  I checked the page’s in mobile but i get only one type of logo, the light version. Did you manage to fix the inconsistency?
  Let us know.
  
  Best regards!
- 8 years ago riedmankatie
  Participant
  
  Expired
  
  Sorry – different logo meaning light logo vs. dark logo.
  
  On mobile, even thought specific pages were set to use the light version of the logo, the dark logo was used. I changed both the light and dark logo in general settings to the white version to fix the mobile problem. I have a few pages where the navigation background is white, so I think it will be easier to change the logo to the dark version on those specific pages using the custom CSS you provided.
  
  I will let you know if that doesn’t work.
  
  Thank you.
- 5 years ago nadeembuilds
  Participant
  .header_wrapper #logo { content: url("https://codeless.co/specular/default/wp-content/uploads/2014/10/logo.png"); }} This works but how do we do we hyperlink it ?
- 5 years ago Mirela
  Participant
  
  Hello,
  
  The logo on mobile is a link to the homepage as well as in the desktop layout. Are you not having this? Please add a link to your site so we can check.
  
  Best regards!
- 4 years, 12 months ago nadeembuilds
  Participant
  
  This reply has been marked as private.
- 4 years, 12 months ago Mirela
  Participant
  
  Hello,
  
  @nadeembuilds, please refresh your profile data with valid credentials for the new site. So we can give it a closer look.
  
  Best regards!
- 4 years, 11 months ago projectnadeem
  Participant
  
  This reply has been marked as private.
- 4 years, 11 months ago Mirela
  Participant
  
  Hello,
  
  @projectnadeem
  I understand but i need some wordpress login credentials to further check this. On our side there is no issue with logo linking in mobile.
  
  Best regards!

Viewing 11 reply threads

You must be logged in to reply to this topic.

Community Forums

Site Links

Useful Articles

Login