- This topic has 27 replies, 4 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
December 15, 2019 at 1:02 am #1104699Paul
Hi guys
For this not-for-profit site in development, I would like to know the best way to add a Phone number (with icon) and Donate button to the right of the logo site header div (right aligned). We’re also using Elementor but suspect that keeping everything inside GP is the ideal approach (for desktop and mobile)??
Thank you!
December 15, 2019 at 7:23 am #1105036DavidStaffCustomer SupportHi there,
you can use the Customizer > Widgets > Header Widget which by default sits to the right of the logo, to add any HTML or shortcode.
To have it site aside the logo on Desktop would require you to disable the Mobile Header and some CSS which we can help with.
Let me know if you need a hand with HTML for the widget or how you want it displayed on mobile.
December 15, 2019 at 4:55 pm #1105302PaulThanks for the quick response David. Just noticed that we can add an Elementor asset there as well. Will have a play and let you know if I need any help.
Cheers
December 15, 2019 at 5:54 pm #1105318PaulHi David
Think I’ll need a bit of your help. Am looking at the following design whereby…
1. Phone icon + active phone link with hover underline state
2. CSS Donate button with hover state color and link to internal page.
These two items would vertically align with left logo, and right align to the edge of body content underneath.
Thank you in advance π
December 16, 2019 at 9:45 am #1106068TomLead DeveloperLead DeveloperHi there,
Have you tried the Header Widget area that David mentioned?
The actual content itself will require some HTML and CSS. Have you decided to throw an Elementor widget in there or do you want help with the code?
Let us know π
January 5, 2020 at 8:49 pm #1123161PaulHi Tom, David
Happy New Year!
I’ve got an Elementor widget displaying in the Header but are struggling with the layout and positioning. Can I send you a private message somewhere to access the url to check?
cheers
January 6, 2020 at 4:17 am #1123363DavidStaffCustomer SupportSo this CSS will align the Header Widget:
@media (min-width: 769px) { .inside-header { display: flex; align-items: flex-end; } .header-widget { order: 5; flex: 1; margin-left: auto } }
However you will need to rethink / edit the Elementor widget to manage the alignment of icon and text for example. Hint: Using the Elementor Heading Widget instead of the Text Widget removes the bottom margin which is currently causing the vertical alignment problem.
January 6, 2020 at 11:09 pm #1124243PaulThank you David, much appreciated. Took your advice on the Heading Widget, messed around with column widths etc and got it performing pretty well.
Cheers
January 7, 2020 at 4:23 am #1124468DavidStaffCustomer SupportYou’re welcome
January 9, 2020 at 12:17 am #1126426PaulHi David
Another special request for you re above header/menu tweaks!
On mobile display I would like to…
1. Include the phone number to right of logo.
2. Move the “Menu” label to beneath the hamburger icon as per this layout.
https://www.getintheloop.com.au/wp-content/uploads/2020/01/mobile002.jpg
Is this possible?
Thank you!
January 9, 2020 at 2:41 am #1126510DavidStaffCustomer SupportYou will need to add the phone number to the mobile header using the
inside_mobile_header
hook:https://docs.generatepress.com/article/hooks-element-overview/
Once it is in place we can take a look at the CSS for the styling etc.
January 9, 2020 at 6:29 pm #1127375PaulHi David
I’ve got that hook working on mobile. As you can see some layout and styling needs to be done if you could possibly help on that?
Cheers
January 9, 2020 at 6:30 pm #1127376Pauland possibly the addition of the Phone icon?
January 9, 2020 at 6:31 pm #1127378LeoStaffCustomer SupportFor the icon, you can consider using FontAwesome or an SVG icon.
Once you’ve added all in, David can help with the CSS π
January 9, 2020 at 6:45 pm #1127381PaulThanks Leo – that’s now done.
cheers
-
AuthorPosts
- You must be logged in to reply to this topic.