Using social media icons on navigation bar
-
I see what you mean. I will think about it and let you know if I have a better idea than adding some left padding to the social media menu items.
-
dawnandrachel, we can specifically target the menu items by their unique menu item id and style them separately. The following is a media query, which limits this change to screens/windows wider than 800px. There are two reasons I’ve done this. First, at less than 800px in width, the social menu items stack vertically due to the reduced width of the overall menu. Secondly, below 768px in width, the touch menu activates and the below change would not work well with the touch menu.
@media screen and (min-width: 800px) { .nav-menu li.menu-item-331 > a::after { content: ""; } .nav-menu li.menu-item-331, .nav-menu li.menu-item-361 { float: right; } }The first rule above takes away the separator dot on the social icon and the second rule moves the two social menu items to the right and tightens up the spacing. If you add additional social items, you will have to view the source code and get the unique menu item ids for those and then add those, separated by a comma to the above two rules.
-
Hi there
That seems to work – thank you.
However there is quite a big gap between the two icons (and I intend adding a few more eventually) and also still a dot after the last item on the menu (after Contact). So, how do I tighten up the space even more and remove the dot after Contact please?I’m fussy like that! :-)
Thanks for your help.
Dawn
-
there is quite a big gap between the two icons
Let’s modify the following rule and add some left margin.
.nav-menu li.menu-item-331,.nav-menu li.menu-item-361 { float: right; margin-left: -50px }We might need to adjust this after you add some more icons.
still a dot after the last item on the menu (after Contact).
We can get rid of the dot after Contact using this CSS.
li#menu-item-41 > a:after { content: ""; } -
Thank you Chait – that works perfectly.
I’m going to add one or two more social media icons and see how that works. If all good then I will mark this as resolved.
-
???? Gone back to my site and all the CSS I’ve added over the past few days to do with the social media icons has been removed???? Why has that happened?
Starting again….
-
Okay – all works well, apart from the dot is still there but on the Twitter icon now. How do we remove the dot completely?
thank you.
-
Modify this rule:
li#menu-item-41 > a:after { content: "" }to this:
li#menu-item-41 > a:after, li#menu-item-361 > a:after { content: "" }I think the links are messed up facebook icon is leading to Pinterest profile, and Pinterest icon the facebook. Did you notice?
-
it’s now also changed the order of the icons from face book, twitter, pinterest to pinterest, twitter, Facebook
and messed with the links so that twitter links to pinterest and the Facebook icon goes to twitter……
this is getting so messy.
Ah – just saw your reply. Not sure how to fix this as the menu and menu links are right and the image urls are right.
-
And that unfortunately doesn’t work.
I started again. took out all my menu social media links and added them back in one by one. This gave me different menu-id numbers for each so I added those back into the code. Everything is okay until I then change
the menu id numbers in this bit:.nav-menu li.menu-item-391,.nav-menu li.menu-item-390,.nav-menu li.menu-item-392 {
float: right;
margin-left: -50px;
}
and that’s when the icons got switched around and the links messed up. -
Okay, I’ve managed to get rid of all the dots between the menu items.
It’s definitely this code that is messing the order of the icons up:
.nav-menu li.menu-item-392,.nav-menu li.menu-item-390, .nav-menu li.menu-item-391 {
float: right;
margin-left: -50px
}
}it changes face book (390), twitter (391) pinterest (392) to pinterest, twitter, Facebook. and not sure why.
-
-
The float will mess with the order, but you can go to Appearance > Menu and put them in reverse order by drag and drop and they should then be in the order you want.
Right now the menu items are wider than the icons and are overlapping them. We can fix that though with the following.
.menu-item-392, .menu-item-391, .menu-item-390 { width: 35px !important; margin-left: 0 !important; margin-right: 10px; padding-right: 0 !important; }See what you think with this and let me know.
-
Hi there – that works, thanks.
But Facebook icon is still directing to Twitter – fb url correct in menu.
?
-
Hmmm, this doesn’t happen in Firefox, but does happen in Safari and Chrome, but I can’t see what is actually causing it. Add the following to the very bottom of your custom CSS. It seems to take care of the issue when I tested in Safari.
.menu-item-392 a, .menu-item-391 a, .menu-item-390 a { font-size: 2px; height: 25px; } -
it doesn’t like that for some reason – I save and publish and then when I go back into it the code has disappeared.
-
ignore that – the code has stuck but it didn’t make a difference.
What did make a difference – was shortening the names of the pages in the Menu to T, F and P.
I suspected that somewhere the code was making allowances for the page names to be given room even if you couldn’t seem them. So I shortened them and that seems to have worked.
So thank you very much for all the help and patience – we got there in the end and I really appreciate it.
Best wishes
Dawn
-
- The topic ‘Using social media icons on navigation bar’ is closed to new replies.
WordPress.com Forums 