CSS Menu Colour & Social Icons

• 

  blairsdogblog · Member · Jan 19, 2016 at 12:28 am

  • Copy link
  • Add topic to favorites

  Hi,
  I was using the following CSS to modify the colour of my menu colour and hover colour over the menu but it appears to not be working now? ALSO, how can I change the CSS of my social media icons so that all appear circular? Thanks!

  .navigation-classic .primary-navigation .menu-primary > ul > li:hover, .navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a, .navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .navigation-classic .primary-navigation .menu-primary > ul > li > a:focus, .navigation-classic .primary-navigation .menu-primary > ul > li > a:active, .navigation-classic .primary-navigation ul ul li {
    background-color: #FDD7E4;
  }
  
  .navigation-classic .primary-navigation ul ul:before {
    border-bottom: 8px solid #FDD7E4;
  }
  
  .navigation-classic .primary-navigation ul ul ul:before {
    border-right-color: #FDD7E4;
  }
  
  .navigation-classic .primary-navigation ul ul li:last-of-type {
    border-bottom: 12px solid #FDD7E4;
  }
  .navigation-classic .primary-navigation .menu-item-has-children:before {
    color: #FDD7E4;
  }

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

• 

  thesacredpath · Member · Jan 20, 2016 at 3:08 am

  • Copy link

  Hi, I’m not sure what caused this. Did you choose or change any custom colors in the customizer?

  At any rate we can override things by using the !important keyword on the color declarations like this.

  .navigation-classic .primary-navigation .menu-primary > ul > li:hover, .navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a, .navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .navigation-classic .primary-navigation .menu-primary > ul > li > a:focus, .navigation-classic .primary-navigation .menu-primary > ul > li > a:active, .navigation-classic .primary-navigation ul ul li {
    background-color: #FDD7E4 !important;
  }
  
  .navigation-classic .primary-navigation ul ul:before {
    border-bottom: 8px solid #FDD7E4 !important;
  }
  
  .navigation-classic .primary-navigation ul ul ul:before {
    border-right-color: #FDD7E4 !important;
  }
  
  .navigation-classic .primary-navigation ul ul li:last-of-type {
    border-bottom: 12px solid #FDD7E4 !important;
  }
  .navigation-classic .primary-navigation .menu-item-has-children:before {
    color: #FDD7E4 !important;
  }

• 

  thesacredpath · Member · Jan 20, 2016 at 3:21 am

  • Copy link

  On the social icons, we can add a border to them with a border radius of 50% and add a bit of padding and have them in a circle. Add this and see what you think.

  .widget_wpcom_social_media_icons_widget .genericon {
      border-radius: 50%;
      border: 1px solid;
      padding: 5px;
  }

• 

  dagabastuido · Member · Jan 23, 2016 at 1:03 am

  • Copy link

  Hi @thesacredpath
  I don’t know why it doesn’t work on my website

• 

  thesacredpath · Member · Jan 23, 2016 at 6:28 am

  • Copy link

  I’m seeing the border on your social icons when I visit your site. Did you get this figured out?

  Screenshot: https://cldup.com/qVqRq5YhgT.png