- This topic has 25 replies, 4 voices, and was last updated 4 years, 6 months ago by Tom.
-
AuthorPosts
-
August 18, 2019 at 11:56 pm #987603Jeremy
Hello,
I’m hoping there is a way to create a custom site header where a phone number can be placed on the left, logo in the middle, and then the nav menu on the right?
I already have the logo center justified and the nap menu right justified, so it just needed now how to add custom html, or any kind of widget to the left side.
Thank you in advance for any suggestions.
Best,
Jeremy
August 19, 2019 at 4:52 am #987744DavidStaffCustomer SupportHi there,
Are you able to share a link to your site? And are you using the Top Bar for anything? If you’re not add your phone number to a widget there and ill take a look at some CSS to get the layout you want.
August 19, 2019 at 8:29 pm #988458JeremyHi David,
Thanks for the reply. Here is a link to the developing site:
http://37.60.251.180/~jeremyfu/msdomingolawgroup.com/
You will see a logo in the header and the nav bar to the right of it. I am trying to add a phone number to the left of the logo.
By the way, it looks as if the logo is getting pushed off center. Do you know how to correct that as well?
Thanks!
– Jeremy
August 20, 2019 at 3:42 am #988689DavidStaffCustomer SupportTry this:
1. Add a new Menu item to your Primary nav. Add the Phone number as the label and put # for the URL. Put this item to the top of your menu.2. Add these two classes to the menu to hide them from the mobile menu:
hide-on-mobile hide-on-tablet
2.1 How to add CSS Classes:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes3. Add this CSS to force the phone number to the left and center the logo:
@media (min-width: 769px) { .main-navigation { width: 100%; } .main-navigation ul { display: flex; } .main-navigation ul li:first-child { margin-right: auto; } .site-logo { position: absolute; left: 50%; transform: translateX(-50%); } }
August 20, 2019 at 9:31 pm #989359JeremyThank you, David!!! That worked like a charm.
Best,
Jeremy
August 20, 2019 at 9:39 pm #989360JeremyI guess while we are at it, is it possible to add an widget in that area? I am using Elementor, and was thinking of possibly having an Icon Box there, mainly to add a small icon next to the phone number.
Thanks again!!!
Best,
Jeremy
August 21, 2019 at 3:57 am #989517DavidStaffCustomer SupportLooks like you found a solution?
Let me knowAugust 27, 2019 at 11:02 am #994839JeremyHi Again, David. Actually, I’m still looking for a solution to small icon next to the phone number.
Thanks in advance.
Best,
Jeremy
August 27, 2019 at 11:11 am #994850LeoStaffCustomer SupportYou can consider using FontAwesome:
https://docs.generatepress.com/article/font-awesome/Or find a free SVG icon that you can use ๐
August 27, 2019 at 11:15 am #994853JeremyThank you, Leo. I’m still unsure about how to implement it though. I’m assuming it’s done through the CSS?
August 27, 2019 at 11:20 am #994859LeoStaffCustomer SupportSorry haven’t you already done it?
https://www.screencast.com/t/YQxkofDt1eWOr you are looking to add an icon right beside the number itself? If so I’d check with Elementor’s support as it looks like they are loading some sort of icons for you already.
August 27, 2019 at 11:23 am #994865JeremyOh, actually that was done using the icon box widget in elementor. I’m trying to find a way to either put a widget in the header left of the logo or add an icon to the phone number that David helped me put there.
August 27, 2019 at 11:35 am #994877LeoStaffCustomer SupportLooks like you’ve done it here too?
https://www.screencast.com/t/fsOfprJQqrcjLet me know ๐
August 27, 2019 at 11:57 am #994892JeremySorry for the confusion. I literally copied that phone number with the icon from a demo site, and was actually surprised to see the icon show up. However, I couldn’t figure out how the icon was showing up or how to change it out for my own.
I hope that makes sense.
August 27, 2019 at 12:27 pm #994908LeoStaffCustomer SupportIt’s just an svg icon.
Is it not added in the actual menu item?
-
AuthorPosts
- You must be logged in to reply to this topic.