Home › Forums › Support › Phonenumber link with image to right in main navigation, logo left, menu centere
- This topic has 8 replies, 2 voices, and was last updated 4 years, 5 months ago by David.
-
AuthorPosts
-
October 17, 2019 at 9:15 am #1037374elusive2k
Hello,
I would like to have the logo to left inside the main navigation, the menu itself in the center, and a phone number clickable with an icon/image in front of it to the right.
As shown in this print screen: https://prnt.sc/pkp48eI am using the most recent version of GeneratePress (Premium).
I have tried several options, but I think you can help me to work this out.
https://prnt.sc/pkp5lq
https://prnt.sc/pkp5ty
https://prnt.sc/pkp60iHoping you can help me out.
Kind regards,
Kumar
October 17, 2019 at 3:04 pm #1037583DavidStaffCustomer SupportHi there,
try this CSS to arrange the menu center and push the last menu item ( phone number ) to right:
.main-navigation .main-nav { flex: 1; } .main-navigation ul { display: flex; } .main-navigation ul li:first-child, .main-navigation ul li:last-child { margin-left: auto; }
For the image – you can add HTML to a Menu item label, so edit the phone number menu item and add an image tag containing your image eg.
<img src="full_url_to_image/image.png" class="menu-phone-image" alt="Phone">
Might need a little CSS to position, which we can help with once its in place.
October 18, 2019 at 12:28 am #1037847elusive2kHello David,
Thanks for your quick response.
Your suggestions work great 😀
I didn’t know I could add html to the menu item its label, thanks for letting me know.
I managed to get this all working correctly and I am very happy with the results.Keep up the good work and awesome support.
Kind regards,
Kumar
October 18, 2019 at 12:44 am #1037854elusive2kHello David,
I am only having 1 follow up question.
How can I display the phone number link with image in the center of the mobile menu header?So I would like to have the logo to the left, phone number in the center, mobile menu with 3 dashes to the right.
https://prnt.sc/pkxw1eHope you can help me out with this as well.
Kind regards,
Kumar
October 18, 2019 at 4:53 am #1037976DavidStaffCustomer SupportUSe GP Hook Element to add some HTML:
https://docs.generatepress.com/article/hooks-element-overview/
The
inside_mobile_header
hook will do the job. May need some CSS to style / align. Put it in place and i can take a lookOctober 18, 2019 at 7:32 am #1038121elusive2kHello David,
I have added this as an new Element as an hook:
https://prnt.sc/pl4l3rNow I am struggling to get this positioned correctly.
I would be very please if you could point me into the right direction.
Kind regards,
Kumar
October 18, 2019 at 8:44 am #1038270DavidStaffCustomer SupportEdit your HTML to include a class of mobile-header-phone in your A tag eg.
<a class="mobile-header-phone" href="......
Then add this CSS:
.site-logo.mobile-header-logo { order: -1; } .mobile-header-phone { margin-right: auto; align-self: center; } .mobile-header-phone img { margin-right: 10px; }
October 19, 2019 at 6:42 am #1038820elusive2kHello David,
Thank you very much, I have got this working as I wanted to.
I only needed to add !important to the order:-1;My entire CSS is now like:
.main-navigation .main-nav {
flex: 1;
}
.main-navigation ul {
display: flex;
}
.main-navigation ul li:first-child, .main-navigation ul li:last-child {
margin-left: auto;
}
.main-navigation ul li img.menu-phone-image {
vertical-align: middle;
margin-right: 12px;
}
.site-logo.mobile-header-logo {
order: -1!important;
}
.mobile-header-phone {
margin-right: auto;
align-self: center;
}
.mobile-header-phone img {
margin-right: 10px;
vertical-align: top;
height: 23px;
}I would like to thank you very much for your fast and great support!
Kind regards,
Kumar
October 19, 2019 at 7:02 am #1038837DavidStaffCustomer SupportAwesome – glad to be of help and thanks for sharing the code.
-
AuthorPosts
- You must be logged in to reply to this topic.