Moving shortcode object

[jleslie]

Hi,

I'm trying to move a shortcode object (social media icons generated by Feather) to the right of my primary navigation menu. Is this possible? I can move other images or text - but don't know what to do with this.

Grateful for any help!

http://www.lifeandlemurs.com

[carroc]

Looks like you figured it out?

---

~Carleigh
Genesis Lover Skype Group
http://carleighrochon.com

[jleslie]

I got it to move to the right, but now it has spaces in between the icons and looks like it widened the menu as well.

Any idea what is adding those spaces and how to remove them? Here is the code:

$menu .= sprintf( '<li class="right your-custom-code-class">%s</li>', do_shortcode( '[feather_follow size="22"]' ) );

Thanks!

[carroc]

If you give it a class within (class="right your-custom-code-class") then maybe you can override more styles?

---

~Carleigh
Genesis Lover Skype Group
http://carleighrochon.com

[jleslie]

I'm sorry, Carleigh, I don't understand what you mean? I'm just not far enough along in my understanding to grasp what is going on.

I was originally following these instructions for customizing the nav bar at http://www.rfmeier.net/add-a-custom-primary-nav-extras-within-genesis/#comment-7455.

Any pointers in the right direction would be appreciated. Thanks so much for your help!

[bandj]

Try adding padding to #nav li.right a

padding: 6px 5px 5px;

[jleslie]

Thanks bandj! When I try that it causes it to go vertical.

[carroc]

remove the above padding that you added. Add this to your stylesheet:

li.your-custom-code-class a.synved-social-button {
float: right;
}

---

~Carleigh
Genesis Lover Skype Group
http://carleighrochon.com

[jleslie]

Thank you for your help. Nothing seemed to be working until this was suggested - after replacing 'your custom code' for 'main menu icons' I added this to my stylesheet:

#nav li.main-menu-icons{
    float: right;
}
 
#nav li.main-menu-icons a{
    display: inline-block !important;
    margin-bottom: 0 !important;
    border-right: none;
    margin-right: 10px !important;
    padding: 6px 0 5px;
}
 
#nav li.main-menu-icons a:hover, 
#nav li.main-menu-icons a:active,
#nav li.main-menu-icons:hover a{
    background: none !important;
}

That seems to work perfectly. Again, thanks everyone for your help!

[Author]

Posts