- This topic has 25 replies, 4 voices, and was last updated 4 years, 8 months ago by Leo.
-
AuthorPosts
-
June 17, 2019 at 6:48 pm #932835Douglas
Two similar questions.
Am looking to add social icons to my staging site on the top black bar over to the right corner of the container.
Am also looking to add a wishlist icon that will link to an internal page on the website. I would like this to be alongside the search and cart icons.
Can someone help
June 17, 2019 at 6:53 pm #932841LeoStaffCustomer SupportHi there,
Social icons:
https://wordpress.org/plugins/lightweight-social-icons/Menu icons:
https://docs.generatepress.com/article/adding-icons-to-menu-items/Let me know if this helps 🙂
June 17, 2019 at 7:02 pm #932848DouglasThat’s not the problem.
I have the icons. There’s no widget or menu area there.June 17, 2019 at 7:05 pm #932849LeoStaffCustomer SupportIt’s tough for me to guess where “top black bar over to the right corner of the container.” is without seeing it.
Any chance you can link me to the site in question?
June 17, 2019 at 7:07 pm #932853DouglasMy bad I thought I did. http://bke.1a0.myftpupload.com
June 17, 2019 at 7:09 pm #932855LeoStaffCustomer SupportThe top black bar is the top bar widget area:
https://docs.generatepress.com/article/top-bar-widget-area/June 17, 2019 at 7:25 pm #932864DouglasIs there a way we can stop the bar’s height from changing based on the the text and social icons?
Because now it’s blowing up because the icons and causing uneven formatting.
It would be easier to just set the size of the bar at a certain pxJune 17, 2019 at 8:25 pm #932884LeoStaffCustomer SupportCan you add the icons in so I can see the issue?
Setting a fixed height generally isn’t the best solution.
June 19, 2019 at 9:27 pm #935354DouglasI have the Twitter up there, but no matter what size I make it, it messes up the whole entire top bar. Also, the alignment is not working. I have it set to right.
June 20, 2019 at 4:24 am #935623DavidStaffCustomer SupportHi there,
set your LSI icon font to the size you want it, then add this CSS:
.inside-top-bar { display: flex; justify-content: center; align-items: center; } .inside-top-bar .widget.widget_text { margin-left: auto; margin-right: auto; transform: translateX(30px); }
This line
transform: translateX(30px);
offsets the width of the LSI icon to keep the text centred to the screen. So the 30px will need to be adjusted to suit the width of the LSI.June 29, 2019 at 12:20 pm #944829DouglasI cannot seem to get it right.
I want the wording to be center and social icons to be align right.
The top bar size still keeps adjusting; I need it at a set height.
I want the icons white not grey with less padding.June 29, 2019 at 5:19 pm #944947TomLead DeveloperLead DeveloperIt looks like you changed up the icons a bit, but if you want to force them to the far right, remove the code David mentioned above and try this:
@media (min-width: 769px) { .top-bar .enhanced-text-widget { position: absolute; right: 0; top: 0; } } .top-bar .social-icons-lists li.social-icons-list-item { line-height: 40px; margin: 0; padding: 0 !important; }
June 30, 2019 at 1:02 pm #945518DouglasOk so that fixed part of it. The text is in the right place, it’s just the icons. How could we move them into the vertical center of top.bar and the horizontal right of the container above the search icon.
June 30, 2019 at 8:09 pm #945643TomLead DeveloperLead DeveloperI just adjusted the CSS above: https://generatepress.com/forums/topic/add-social-icons/#post-944947
Can you give it another shot?
July 1, 2019 at 10:58 pm #946681DouglasNice! Almost perfect.
I just want to move the icons to above the search icon in the right corner of the container and change the show color to white if possible.Thx!
-
AuthorPosts
- You must be logged in to reply to this topic.