Making Logo Pop

• 

  debbiesarah · Member · Aug 4, 2017 at 9:55 pm

  • Copy link
  • Add topic to favorites

  Hello! I am using the luxury theme and am having some issues with my logo getting lost in my header images. Is there a way to make my logo pop off my background better? Perhaps putting some type of overlay or fade on my header images would do the trick.

  If this is my best option, what CSS would I need to accomplish this?

  Thank you for your help!

  The blog I need help with is: (visible only to logged in users)

• 

  debbiesarah · Member · Aug 4, 2017 at 9:57 pm

  • Copy link

  … I forgot to add, I am able to arrange images so my logo is visible on my PC. However, it is very difficult to see the logo on mobile devices unless I choose a very light image.

• 

  thesacredpath · Member · Aug 4, 2017 at 11:00 pm

  • Copy link

  Hi there, you know, this is a bit difficult since your logo is in dark blue, but your menu items are in white. If we add a transparent dark background, your logo gets more lost. If we make the transparent background based on white, your menu items get lost. White seems better than basing the gradient on black. Add this to your custom CSS and see what you think.

  .header-overlay .row {
    background: -moz-linear-gradient(top, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
  }

• 

  debbiesarah · Member · Aug 4, 2017 at 11:29 pm

  • Copy link

  Thank you! I do like the way this looks.

  You mentioned my menu items are in white. How can I change these to dark blue?

  Thank you so much for your help!

• 

  thesacredpath · Member · Aug 5, 2017 at 1:10 am

  • Copy link

  To change the menu item color to the blue in your logo, add the following.

  .page-banner a, .page-banner a:link {
    color: #04356F;
  }

  I think it looks nice with the blue menu items and logo and the white-based gradient.

• 

  debbiesarah · Member · Aug 5, 2017 at 1:19 am

  • Copy link

  I agree… makes everything easier to read. :) Thank you so much! You have been most helpful!

• 

  debbiesarah · Member · Aug 5, 2017 at 1:26 am

  • Copy link

  Sorry… one more question for you. I added this CSS info to make my menu items blue and it does show the changes in my ‘customize’ screen. However, after I save and then go to view my website, the changes are not there (menu is still white). All the other changes I have made were instantaneous. Will this change take some time to publish, or do I have to do something else?

• 

  thesacredpath · Member · Aug 5, 2017 at 8:14 pm

  • Copy link

  Hi, I’m seeing blue on the menu items with the exception of About, which is in white. I’m confused as to why the one menu item is white. We can force the color change though by adding the !important keyword to the color declaration. Generally I stay away from !important unless absolutely necessary since it can cause issues with other customizations, but in this case, I can’t see any problems.

  .page-banner a,.page-banner a:link {
   color:#04356F !important;
  }

• 

  debbiesarah · Member · Aug 7, 2017 at 4:42 pm

  • Copy link

  Awesome! It worked that time. Thank you for all your help. I really appreciate your time and expertise.

• 

  thesacredpath · Member · Aug 7, 2017 at 11:16 pm

  • Copy link

  Hooray and you are welcome!