-
AuthorPosts
-
April 2, 2014 at 4:27 pm #246596
Is there anyway to add the social icons in the header on a mobile device? Maybe between the logo and the menu button?
My website is http://www.jaredburnettphoto.com. It used to display the icons before I updated.
April 2, 2014 at 6:55 pm #246677Hi JaredBurnett!
Please add following code to Quick CSS in Enfold theme options under Styling tab
@media only screen and (max-width: 767px) { .main_menu, #header_main_alternate { display: block; } .responsive #header .social_bookmarks { display: block!important; }}
Best regards,
YigitApril 2, 2014 at 10:31 pm #246748Applied the Quick CSS, cleared the cache, and I don’t see a difference.
April 3, 2014 at 10:20 am #246950This reply has been marked as private.April 3, 2014 at 1:12 pm #246994Hey!
Have you removed the code? It seems like it is not being applied. Please try to disable minifying on total cache plugin and check if that helps.
@designing Please add following code to Quick CSS in Enfold theme options under Styling tab@media only screen and (max-width: 767px) { #header_main .social_bookmarks { top: 12%; }}
Cheers!
YigitApril 3, 2014 at 1:44 pm #247013Hi Yigit,
I’ve disabled the minifying on total cache plugin and added your code in the quick css but still no change. The icon are still beneath the logo on the mobile I’m using an iPhone if that’s any help?
Thanx
LeroyApril 3, 2014 at 1:51 pm #247017Hi!
Please try adding !important rule as following
@media only screen and (max-width: 767px) { #header_main .social_bookmarks { top: 12% !important; }}
After applying the code, please flush browser cache
Cheers!
YigitApril 3, 2014 at 1:59 pm #247021Perfect Yigit,
Thanks Man
LeroyApril 3, 2014 at 2:05 pm #247027Hi!
You are welcome Leroy, glad we could help. If you have any other questions or issues, please start a new topic. I will keep this open for OP @jaredburnett :)
Regards,
YigitApril 3, 2014 at 2:18 pm #247037Ok I removed the code, cleared the cache, added it again, cleared the cache, and it’s working now.
The alignment is off. It looks like it may need to be more centered. The logo may be pushing it lover into the menu button. If I turn my phone sideways and get landscape mode it still looks a little off center.
April 3, 2014 at 2:30 pm #247040Hi!
Please add following code to Quick CSS as well and adjust to center it perfectly
@media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { right: -40px; }}
Regards,
YigitApril 3, 2014 at 2:46 pm #247053Almost seems like my logo needs to be smaller or pushed to the side. I have the recommended 340×156 logo dimensions. If the icons were centered across the screen they would overlap the logo on the left.
April 4, 2014 at 5:40 pm #247535Any ideas on how to push items left?
April 7, 2014 at 12:42 pm #248139Hey!
I have just checked your website on my iphone and it does look fine on my end. Please see screenshot here – http://i.imgur.com/GGJr6Ib.png
Have you already fixed it?Cheers!
YigitApril 7, 2014 at 2:00 pm #248170I’m not sure what code made it change to that, but I would like it all one line. So I guess the social icons need to be pushed up to be even with the logo and menu button.
April 7, 2014 at 2:05 pm #248173Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { top: -15px; }}
You may need to adjust the value
Cheers!
YigitApril 7, 2014 at 5:22 pm #248297I adjusted the value to -1 and then tried -60 and I haven’t seen any difference clearing all caches after adjustments.
April 7, 2014 at 9:29 pm #248475Hi!
Do you have any caching plugins installed? If so, please try flushing their settings as well. As i checked earlier today, the code i posted may apply later due to caching. Please also paste all your custom CSS code on http://pastebin.com/ and post the link here so we can check if there is anything wrong with codes
Best regards,
YigitApril 7, 2014 at 10:22 pm #248508This reply has been marked as private.April 8, 2014 at 7:01 am #248634Yigit,
I flushed the plugins.
Also, here is the link to the custom code I have applied http://pastebin.com/QW7qfs5G
April 8, 2014 at 7:14 am #248646Hi Jared,
Icons are showing on my end (try seeing it from another device):
@designing scroll to the very top of this topic and click Unsubscribe.Cheers!
JosueApril 8, 2014 at 7:40 am #248663Correct Josue. The goal is to get them up in the middle to make it look like they are on the same row as the logo and menu. Right now they look really far down.
April 8, 2014 at 8:10 am #248677Hey!
Seems dynamic enfold.css isn’t being updated with the Quick CSS, try putting the code in css/custom.css in the meantime:
@media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { top: -15px; }}
Regards,
JosueApril 8, 2014 at 8:35 am #248690that looks so much better! Can I make the icons a little bigger?
What are the tags for the logo and menu button?
I assume the alignment code is the same. I can play with the alignment to center up logo better on mobile as well.
April 8, 2014 at 4:05 pm #248817Hey!
This will increase the icons:
.social_bookmarks li a { font-size: 22px; }
Regarding the others, you can use:
#advanced_menu_toggle { } .logo{ }
I’m not sure if the logo is re-positionable, remember to wrap this selectos within the mobile media query.
Best regards,
JosueApril 8, 2014 at 10:25 pm #248965Looks awesome now! Thank you guys so much!
Last Question: How do I put a dotted line between the search button and social icons in the header on a desktop? (I assume the menu and social icons align to leave space for the line)
April 9, 2014 at 1:04 am #248997This will do it:
.av-main-nav-wrap { border-right: 1px dashed gray; padding-right: 20px; }
Cheers!
JosueApril 9, 2014 at 1:51 am #249005This reply has been marked as private.April 9, 2014 at 3:23 am #249027This reply has been marked as private.April 11, 2014 at 3:11 pm #250242Any suggestions?
-
AuthorPosts
- The topic ‘Social Icons in Header for Mobile’ is closed to new replies.