Viewing 30 posts - 1 through 30 (of 41 total)
1 2
  • Author
    Posts
  • April 2, 2014 at 4:27 pm #246596
    JaredBurnett

    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 #246677
    Yigit

    Hi 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,
    Yigit

    April 2, 2014 at 10:31 pm #246748
    JaredBurnett

    Applied the Quick CSS, cleared the cache, and I don’t see a difference.

    April 3, 2014 at 10:20 am #246950
    designing
    This reply has been marked as private.
    April 3, 2014 at 1:12 pm #246994
    Yigit

    Hey!

    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!
    Yigit

    April 3, 2014 at 1:44 pm #247013
    designing

    Hi 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
    Leroy

    April 3, 2014 at 1:51 pm #247017
    Yigit

    Hi!

    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!
    Yigit

    April 3, 2014 at 1:59 pm #247021
    designing

    Perfect Yigit,

    Thanks Man
    Leroy

    April 3, 2014 at 2:05 pm #247027
    Yigit

    Hi!

    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,
    Yigit

    April 3, 2014 at 2:18 pm #247037
    JaredBurnett

    Ok 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 #247040
    Yigit

    Hi!

    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,
    Yigit

    April 3, 2014 at 2:46 pm #247053
    JaredBurnett

    Almost 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 #247535
    JaredBurnett

    Any ideas on how to push items left?

    April 7, 2014 at 12:42 pm #248139
    Yigit

    Hey!

    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!
    Yigit

    April 7, 2014 at 2:00 pm #248170
    JaredBurnett

    I’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 #248173
    Yigit

    Hey!

    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!
    Yigit

    April 7, 2014 at 5:22 pm #248297
    JaredBurnett

    I 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 #248475
    Yigit

    Hi!

    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,
    Yigit

    April 7, 2014 at 10:22 pm #248508
    designing
    This reply has been marked as private.
    April 8, 2014 at 7:01 am #248634
    JaredBurnett

    Yigit,

    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 #248646
    Josue

    Hi 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!
    Josue

    April 8, 2014 at 7:40 am #248663
    JaredBurnett

    Correct 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 #248677
    Josue

    Hey!

    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,
    Josue

    April 8, 2014 at 8:35 am #248690
    JaredBurnett

    that 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 #248817
    Josue

    Hey!

    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,
    Josue

    April 8, 2014 at 10:25 pm #248965
    JaredBurnett

    Looks 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 #248997
    Josue

    This will do it:

    .av-main-nav-wrap {
    border-right: 1px dashed gray;
    padding-right: 20px;
}

    Cheers!
    Josue

    April 9, 2014 at 1:51 am #249005
    JaredBurnett
    This reply has been marked as private.
    April 9, 2014 at 3:23 am #249027
    JaredBurnett
    This reply has been marked as private.
    April 11, 2014 at 3:11 pm #250242
    JaredBurnett

    Any suggestions?

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 41 total)
1 2
  • The topic ‘Social Icons in Header for Mobile’ is closed to new replies.