Change BG color of menu drop-down and footer

• 

  danahderani · Member · Jan 29, 2017 at 3:06 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I’d like to know the Custom CSS codes to change the background color of my navigation menu’s drop-down, the bottom of my blog where it reads “older posts,” as well as my footer block.

  Here are images of what I’m referring to:

  http://i.imgur.com/o45Z5eD.png
  http://i.imgur.com/Mx3G4n4.png

  I’d like the background of my drop down menus and footer to be #ffffff with the text color #002429.

  And I’d like the background of the ‘older posts’ block to be #002429 and the text #ffffff.

  Then, on the footer, there’s a faint gray line, I’d like that removed or just changed to #ffffff.

  Thank you so much in advance!

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

• 

  staff-loquaciousloon · Staff · Jan 30, 2017 at 6:15 pm

  • Copy link

  Hi there!

  This CSS should do the trick:

  /* Dropdown Menus */
  .main-navigation ul ul {
      min-width: 284px; /* width fix */
  }
  
  .main-navigation ul ul li {
      background: #fff;
  }
  
  nav#site-navigation ul ul li a {
      color: #002429;
  }
  
  /* Older Posts Button */
  #infinite-handle span {
      background-color: #002429;
  }
  
  /* Site Info Border */
  .site-info {
      border: none;
  }

  I’ve also added in an additional style (the first one) to fix a small issue I’ve just noticed with the shadow along the bottom of the dropdown menus. I’m opening a ticket to get that fixed, but in the meantime, that style should do the trick :)

• 

  danahderani · Member · Jan 30, 2017 at 6:51 pm

  • Copy link

  Thank you so much Chad! It worked great.

  Would you be able to provide me with a code to change the background color of my footer/site info? In the second link I provided, I’d like the dark background to just be white (#ffffff).

  Thanks again (:

• 

  staff-loquaciousloon · Staff · Jan 30, 2017 at 10:28 pm

  • Copy link

  You’re welcome!

  For the footer,

  .site-footer {
      background: #fff;
  }

  should do the trick. :)

• 

  danahderani · Member · Jan 30, 2017 at 10:40 pm

  • Copy link

  Thank you so much for all of your help – everything looks great now!

• 

  staff-loquaciousloon · Staff · Jan 30, 2017 at 10:51 pm

  • Copy link

  You’re welcome! :)