Phonenumber link with image to right in main navigation, logo left, menu centere

Hi 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.

Hello David,

Thanks for your quick response.
Your suggestions work great :D
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

Hello 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/pkxw1e

Hope you can help me out with this as well.

Kind regards,

Kumar

USe 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 look

Hello David,

I have added this as an new Element as an hook:
https://prnt.sc/pl4l3r

Now 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

Edit 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;
}

Hello 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

Awesome - glad to be of help and thanks for sharing the code.