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

Home Forums Support [Resolved] Phonenumber link with image to right in main navigation, logo left, menu centere

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1037374
    elusive2k

    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/pkp48e

    I 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/pkp60i

    Hoping you can help me out.

    Kind regards,

    Kumar

    #1037583
    David
    Staff
    Customer Support

    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.

    #1037847
    elusive2k

    Hello 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

    #1037854
    elusive2k

    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

    #1037976
    David
    Staff
    Customer Support

    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

    #1038121
    elusive2k

    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

    #1038270
    David
    Staff
    Customer Support

    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;
    }
    #1038820
    elusive2k

    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

    #1038837
    David
    Staff
    Customer Support

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.