Main menu and footer

Hey Lene,

Thank you for the inquiry.

You can adjust the height of the current menu indicator using the following css code.

.avia-menu-fx {
    height: 4px;
    width: 100%;
}

And to add a custom social icon to the theme, please check the following documentation.

// https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

Best regards,
Ismael

Hi,

Did you register a custom social icon using the filters as described in the documentation? If you want to adjust the style of the social icons, please check the documentation below.

// https://kriesi.at/documentation/enfold/social-share-buttons/#custom-styled-social-icons

Best regards,
Ismael

Hi,

Yes, you can insert style #3 and adjust the properties as required. You can change the background by adjusting this css rule for example.

/* Icon background color */
.av-share-box ul li a {
  background: #f0f0f0;
}

Best regards,
Ismael

Hi,
Thank you for your patience and the link to your site, I couldn’t find the above css on your site, but I believe the reason it doesn’t work is because the css is for the social share buttons and not the custom [social-bookmarks] shortcode that you are using. Nonetheless try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

/* Icon style */
.widget .social_bookmarks li a {
  width: 30px!important;
   height: 30px!important;
   line-height: 24px !important;
   border-radius: 30px!important; 
   padding: 3px 0 !important;
   background: #fff !important;
}
/* Icon color */
.widget .social_bookmarks li a:before {
  color: #00737A;
  transition: all .5s ease;
}
/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #000;
  transition: all .35s ease;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Glad to hear, please let us know when we should close this thread.

Best regards,
Mike

Hi,

Thank you for the update.

Please look for this css rule to adjust the hover state.

/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #000;
  transition: all .35s ease;
}

Replace it with:

/* Icon color on hover */
.widget .social_bookmarks li a:hover:before {
  color: #ffffff;
  background: #0a66c2;
  transition: all .35s ease;
}

Best regards,
Ismael

Hi,
I changed the css to this:

/* Icon color on hover */
#footer .widget .social_bookmarks li a:hover {
  color: #ffffff!important;
  background: #0a66c2!important;
  transition: all .35s ease;
}
.widget .social_bookmarks li a:hover:before {
  color: #ffffff;
}

please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. We’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard