Dear geniuses. I like the size (and simplicity) of the social icons provided in the "fullscreen menu". The standard ones (social icons rounded) I get for my footer are about twice that size. Is there a trick to change footer icon sizes? Also, I'd loooove to have a white "menu"-hamburger-logo while getting the fullscreen overlay as dark transparent (as in the "black menu" setting).
1) To change the circle + icon size on footer please use the code below, please before you continue on read about How to add Custom CSS to your site:
/*circle size this is larger than now just for testing you can test your own size*/
.site-footer.footer-bottom-horizontal .footer-bottom-content .social-networks li a { width: 60px !important; height: 60px !important;
}
/*icon size*/
.site-footer.footer-bottom-horizontal .footer-bottom-content .social-networks li a i { font-size: 24px !important;
}
2) Can you please be more clear, i didn't get what you need.
Dear Eroll, the custom css works like a charm. Thank you so much. I collected quite a bit of general knowledge on WP, but coding is something else altogether.
Back to my question n.2:
on my new page, which ist generally predominantly dark (dev.peter100.de), a white icon for the menu is a great idea. Opening the menu (fullscreen, overlay) will make a bright, white background with black typeface for the menu. It comes with the setting. Is there a way to make the open menu look like the one you get, when chosing the other (dark) option, but without the black hamburger-icon?
Last one: Is there a way to make the "header" look like the "sticky header" with a semi-transparent bgr (improved readability)? As of now, the background will only appear with scrolling down. on top of the page, my logo is on full transparent bgr.
Dear geniuses.
I like the size (and simplicity) of the social icons provided in the "fullscreen menu". The standard ones (social icons rounded) I get for my footer are about twice that size.
Is there a trick to change footer icon sizes?
Also, I'd loooove to have a white "menu"-hamburger-logo while getting the fullscreen overlay as dark transparent (as in the "black menu" setting).
Hi Peter,
1) To change the circle + icon size on footer please use the code below, please before you continue on read about How to add Custom CSS to your site:
/*circle size this is larger than now just for testing you can test your own size*/ .site-footer.footer-bottom-horizontal .footer-bottom-content .social-networks li a { width: 60px !important; height: 60px !important; } /*icon size*/ .site-footer.footer-bottom-horizontal .footer-bottom-content .social-networks li a i { font-size: 24px !important; }2) Can you please be more clear, i didn't get what you need.
- Normal is white (menu is closed)
- Black ( menu is open)
In which phase you want to have change.
Thank you.
Dear Eroll,
the custom css works like a charm. Thank you so much. I collected quite a bit of general knowledge on WP, but coding is something else altogether.
Back to my question n.2:
on my new page, which ist generally predominantly dark (dev.peter100.de), a white icon for the menu is a great idea. Opening the menu (fullscreen, overlay) will make a bright, white background with black typeface for the menu. It comes with the setting. Is there a way to make the open menu look like the one you get, when chosing the other (dark) option, but without the black hamburger-icon?
Hi Peter,
I will assign this ticket to another team member to help you with second question.
Thank you.
Hi Peter,
Set the menu to dark and then I will give you some CSS code to customize it how you want.
Best regards,
Laborator Team
Hi Peter,
Add the following CSS to Custom CSS to get a white menu toggle:
.menu-bar.menu-skin-dark .hide-menu-text, .menu-bar.menu-skin-dark .show-menu-text { color: #FFF; } .menu-bar.menu-skin-dark .ham, .menu-bar.menu-skin-dark .ham:after, .menu-bar.menu-skin-dark .ham:before { background-color: #FFF; }Best regards,
Laborator Team
Beautiful, worked like a charm! Thank you!
Last one: Is there a way to make the "header" look like the "sticky header" with a semi-transparent bgr (improved readability)? As of now, the background will only appear with scrolling down. on top of the page, my logo is on full transparent bgr.
Hi again,
Adding this CSS to Custom CSS will make the header background black with opacity:
.header-absolute header.main-header { background-color: rgba(0, 0, 0, 0.38) !important; }Best regards,
Laborator Team