- This topic has 89 replies, 14 voices, and was last updated 6 years, 9 months ago by Ian.
-
AuthorPosts
-
March 16, 2015 at 3:48 pm #87605TomLead DeveloperLead Developer
To make the items stick with the others, remove all of the CSS mentioned in this thread. The items will sit like regular menu items without any tweaking π
March 16, 2015 at 11:28 pm #87783Mark FlintYeah but I want the main menu items aligned bang on centre under the centralised logo, and the social media icons out of the way on the right. But the icons are pushing the main menu items off to the left… Is there a way to fix this?
March 17, 2015 at 8:26 am #87871TomLead DeveloperLead DeveloperAh, float: right will push the other menu items over a bit.
Using position: absolute will make it so the other menu items ignore the social icons.
Something like this:
.social_icon { position: absolute; right: 0; }
March 18, 2015 at 12:59 pm #88328Mark FlintThanks Tom. The code did work, but with a little tweaking. I had to add in !important for it to kick in and once I’d done that it ended up aligning in the right place but with both icons on top of each other. So I created CSS for each icon and adding padding to the second:
.twitter_icon {
position: absolute !important;
right: 0;
}
.facebook_icon {
position: absolute !important;
right: 0;
padding-right: 40px;
}This has made it work: http://www.strawberryshop.flintmarketing.co
However these icons don’t seem to be appearing on mobile… Any idea why that would be??
March 18, 2015 at 4:59 pm #88384TomLead DeveloperLead DeveloperYou can make sure that the absolutely positioning only happens on desktop with this (instead of the above):
@media screen and (min-width: 769px) { .twitter_icon { position: absolute !important; right: 0; } .facebook_icon { position: absolute !important; right: 40px; } }
March 19, 2015 at 1:30 pm #88837Mark FlintNailed it! Thanks Tom π
March 19, 2015 at 1:31 pm #88838TomLead DeveloperLead DeveloperYou’re welcome! π
May 29, 2015 at 10:05 am #111202HeathI used these instructions and got the icons to work. (I had to use the “!important” suffix.)
But, I like how your social icon widget has the option to “open in new window”. Can I somehow apply this functionality to the navigation icons I’ve creating using Dee’s steps?
Thanks for having the best support EVER!
PS – Just bought the Sections add-on and looking forward to playing with it. Can’t wait to see what add-on you put out next! Also, it might be helpful if you create Support sub-sections for each specific add-on (and the social icons widget).
May 29, 2015 at 10:08 am #111203TomLead DeveloperLead DeveloperIn “Appearance > Menus”, click the “Screen Options” tab at the top right, and check the “Link Target” checkbox.
Now open your menu items, and you’ll see an option to open your links in a new window π
BTW, in GP 1.2.9.7, I added a built in class to float menu items to the right:
menu-item-float-right
May 29, 2015 at 10:14 am #111205HeathThat was easy, Thanks! That check box should show up for URLs by default!
What’s an example of how would you apply the new class you built in?
May 29, 2015 at 10:15 am #111206TomLead DeveloperLead DeveloperIt won’t work until the next version of GP, but it would mean you could skip the !important part and adding your own CSS, and just add the class above into your CSS Class field in the menu item π
June 10, 2015 at 1:34 pm #113833Elio MartinezHi,
So which is the code to add the social icons in the nav menΓΊ like http://generatepress.com/? Ihave seen a lot of code and examples in this topic, but I don’t know whic code is the right one.
Thanks-
June 10, 2015 at 1:43 pm #113835HeathElio, just follow the instructions on page 1 of this topic. There are basically three components: The CSS class, the icons, and the menu. Dee pretty much nails it. π
June 10, 2015 at 11:58 pm #113874TomLead DeveloperLead DeveloperLatest and greatest method:
1. Add your social icons to your menu using FontAwesome in “Appearance > Menus” – add a custom link, input your social URL, and then add the FontAwesome HTML for the icon you want in the navigation label.
2. To make it float right, go to “Screen Options” at the top right of the Menus page, and make sure “CSS Classes” is checked.
Now open your menu item you want to float right, and add this class: menu-item-float-right
That should be it π
August 4, 2015 at 7:11 am #126318MonicaHi,
I cannot manage to make it work. I added the plugin Simple Custom CSS and the following:
.social_icon {
float: right;
}Checked the CSS class on the screen options.
And tried the following:
Url: my Facebook url
navigation label: <i class=”fa fa-facebook”></i>
CSS Classes: social_iconbut it does not work. tried a few variations but cannot manage to get it to work.
I also tried tin stalling the lightweight social icons plugin but it doe snot give me the option to add urls. Wanted to attach some screenshots to show you but I cannot do it here.
I am trying to put the social icons to the right above the navigation menu. Any suggestions? Thanks.
-
AuthorPosts
- You must be logged in to reply to this topic.