Tagged: header, mobile, social icons
Hi,
I have a 2 part question:
1. How can I increase the font size of the social icons in the header? I found in the threads the following quick css code
#top .social_bookmarks { font-size: 20px; }
But this only changed the size on the mobile platforms. It didn’t seem to make a difference in the non-fixed header space mode
2. How can I increase the space (distance) between the social icons in the header. The mobile version especially the icons are very close together, making it harder for someone to touch the current icon link.
Hello jennallocco!
1) Please try adding !important to force it
#top .social_bookmarks { font-size: 18px!important; }
2)
#top .social_bookmarks li a { width: 50px; }
Regards,
Yigit
Thank you. When using the “Header with social icons and bottom” How can I do the following
1. Remove the vertical divs separating the navigation tabs
2. Give the bottom navigation itself a color background
Hey!
1.
.main_menu li a {
border: 0 !important;
}
2. Change red for the desired color.
#avia-menu, #header_main_alternate{
background: red !important;
}
Regards,
Josue
Thanks.. Almost worked. The colored background of the navigation doesn’t go the full width. See my working site below
Hey!
It’s because you are using a Boxed layout, in order to make it work you need to select a Splash one.
Best regards,
Josue
I switched from boxed layout to stretch, is that what you mean by “Splash”.
If that is the case it doesn’t align with the slider as a result. Can the navigation color get stretched as well?
Hey!
Change the code to this:
#avia-menu, #header_main_alternate {
background: #6D6E71 !important;
z-index: 1;
}
Result:
Cheers!
Josue
Thank you, perfect
Glad we could help, let us know if you have any more questions or issues :)
Regards,
Josue