Tagged: icons, navigation, social media
-
AuthorPosts
-
May 17, 2013 at 5:14 pm #23434
Hey there,
Just got Enfold and LOVE IT so far. Hoping to learn how to make a quick customization though!
I want to change the location of the social media icons on the fixed header. I would like them to appear between my main navigation and the search icon. Is this possible?? I noticed when you switch to ‘bottom navigation’ the social media icons appear where I would like them. However, I want to keep the fixed navigation in the header. Any way to fuse these two?
Alternatively, if that’s possible.. I am hoping to move the alignment of the icons on the “mini header” above my main header. They are currently aligned to the left above my logo. Is there any way to have these align all the way to the right, above my navigation?
Please let me know… thanks so much!!
Jason
May 19, 2013 at 8:46 pm #119786Hi,
Please open up header.php and find line 104 which looks like:
if(strpos($headerS,'bottom_nav_header') === false) avia_social_media_icons($social_args);
*copy* and then *delete* line 104
and paste that code above that you just deleted on line 113. line 114 looks like the code below, so paste the line before it:
$phone = avia_get_option('phone');
You should probably delete line 115 or put // in front of it, because there doesnt seem to be room for the phone number now, unless you want to move that block to line 104 (left side)
Add this css to you /css/custom.css file or to Quick CSS to position the social buttons
#top .main_menu {
top: 15px;
}
.noLightbox.social_bookmarks {
top: -2px;
display: block;
position: relative;
}Thanks,
Nick
May 22, 2013 at 3:25 am #119787Hey there,
I tried what you suggested and it almost worked. There are two problems though.
– The icons on the left remain (so I have duplicate social media icons)
– The new icons (right aligned) are shifted down too much.
Here is a screenshot.
Here is some additional information if it’s helpful at all.
– I don’t need any phone number or ‘additional’ navigation.
– I just want the icons on the left to be aligned to the right.
Thanks so much!
Jason
May 22, 2013 at 3:27 am #119788Another solution I would be happy with is this one (I mocked it up in Photoshop).
This solution is preferred, but I’m okay with either one. I am not very adept at coding. Thanks :)
May 22, 2013 at 9:59 am #119789Hi,
Make sure there is nothing on line 104.
also put two forward slashes on line 149 so it looks like this
//if(strpos($headerS,'social_header') !== false && strpos($headerS,'bottom_nav_header') !== false) avia_social_media_icons($social_args);
To change the position of the social buttons, change the -2px and 15px in the previous code I gave you till they get to where you want them. Try changing -2px to -22px and see how far the icons move.
The mockups are helpful but I need to look at your code to provide you with a solution that gonna work.
Thanks,
Nick
May 24, 2013 at 12:13 am #119790Got it, thanks!
One more related question. How do I add social networks that do not have an icon?
For example, Instagram.
I think maybe I can swap icons of social network I don’t use?
1) Where to swap the icon (I have access to FTP)
2) How to change the rollover color in code.
Thanks so much!
Jason
May 24, 2013 at 5:15 am #119791May 24, 2013 at 7:32 am #119792Got it, thanks!
-
AuthorPosts
- The topic ‘Changing the location of Social Media Icons’ is closed to new replies.