Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 8, 2016 at 6:54 pm #658556
    advteksol

    I am trying to apply the social icons to my header menu line, but cannot seem to find a way to do it. I would like it to look like this:

    View post on imgur.com

    Perhaps it’s because of the modifications applied to get the header to add the client login button. Any help would be greatly appreciated.

    • This topic was modified 8 years, 4 months ago by advteksol. Reason: Update image location
    July 11, 2016 at 2:21 pm #659284
    Yigit

    Hey advteksol,

    Please add following code to Functions.php file in Appearance > Editor

    function av_move_social(){
?>
 <script>
jQuery(window).load(function(){
jQuery("ul.noLightbox.social_bookmarks").detach().appendTo('ul#avia-menu')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_social');

    Best regards,
    Yigit

    July 11, 2016 at 3:21 pm #659327
    advteksol

    That removed the social media from the footer socket (which I want to keep), not added it to the main menu in the header where I asked.

    July 11, 2016 at 3:24 pm #659329
    Yigit

    Hi!

    Please go to Enfold theme options > Header > Extra Elements and choose to display social icons in your header and then change the code to following one 

    function av_move_social(){
?>
 <script>
jQuery(window).load(function(){
jQuery("#header ul.noLightbox.social_bookmarks").detach().appendTo('ul#avia-menu')
});
 </script>
<?php
}
add_action('wp_footer', 'av_move_social');

    Best regards,
    Yigit

    July 11, 2016 at 3:56 pm #659373
    advteksol

    Still not working. It removes the social icons from the footer socket. The social icons momentarily appear in the header (not the header menu bar) either above or below the Client Login button, depending on the settings in the Extra Elements area, and then disappears.

    I have left the settings as you detailed so you can see what is going on.

    July 12, 2016 at 2:55 pm #659899
    Yigit

    Hi,

    I added following code to bottom of Style.css file of your child theme

    #header_main nav .social_bookmarks {
    display: block;
    box-shadow: none;
}
#header_main nav .social_bookmarks a {
    color: white!important;
    border: none!important;
}

    Please review your website now

    Best regards,
    Yigit

    July 12, 2016 at 3:57 pm #659949
    advteksol

    Better, but I need it moved over to the right (also right of the search icon) in the middle. Also need to remove the bars between the social icons and change the color when you hover over them (like the other menu items).

    Thanks.

    July 14, 2016 at 6:47 am #660689
    Ismael

    Hi,

    Please add this css code:

    #avia-menu {
    width: 100%;
}

#header_main #avia-menu .social_bookmarks {
    position: absolute !important;
    right: 50px !important;
    float: none !important;
    left: auto !important;
}

.html_header_top.html_bottom_nav_header #top .main_menu .menu-item-search-dropdown {
    float: right;
    right: 300px;
}

    Best regards,
    Ismaelo

    July 14, 2016 at 3:00 pm #660868
    advteksol

    Thanks, that works great! Now just need to be able to get rid of the pipes ( | ) between the social icons. How can I do that?

    July 14, 2016 at 3:03 pm #660869
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #header .social_bookmarks li {
    border: none;
}

    Best regards,
    Yigit

    July 14, 2016 at 3:29 pm #660886
    advteksol

    That works! One more thing – how can I make it so the icons are highlighted with the colored circles like in the socket at the bottom of the page?

    July 14, 2016 at 3:42 pm #660895
    Yigit

    Hi!

    Please add following code to Quick CSS 

    #header .av-social-link-facebook:hover a {
    background-color: #37589b !important;
}
#header .av-social-link-gplus:hover a {
    background-color: #de5a49 !important;
}
#header .av-social-link-linkedin:hover a {
    background-color: #419cca !important;
}
#top .social_bookmarks li a {
    border-radius: 300px!important;
}

    Cheers!
    Yigit

    July 14, 2016 at 3:59 pm #660908
    advteksol

    Perfect! Thanks – you guys are great!

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Apply Social Icons to Header Menu Line’ is closed to new replies.