[Support request] Custom html in left Site header?

Home Forums Support Custom html in left Site header?

  • This topic has 25 replies, 4 voices, and was last updated 1 year ago by Tom.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #987603
    Jeremy

    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

    #987744
    David
    Staff
    Customer Support

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

    #988458
    Jeremy

    Hi 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

    #988689
    David
    Staff
    Customer Support

    Try 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-classes

    3. 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%);
        }
    }
    #989359
    Jeremy

    Thank you, David!!! That worked like a charm.

    Best,

    Jeremy

    #989360
    Jeremy

    I 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

    #989517
    David
    Staff
    Customer Support

    Looks like you found a solution?
    Let me know

    #994839
    Jeremy

    Hi Again, David. Actually, I’m still looking for a solution to small icon next to the phone number.

    Thanks in advance.

    Best,

    Jeremy

    #994850
    Leo
    Staff
    Customer Support

    You can consider using FontAwesome:
    https://docs.generatepress.com/article/font-awesome/

    Or find a free SVG icon that you can use 🙂

    #994853
    Jeremy

    Thank you, Leo. I’m still unsure about how to implement it though. I’m assuming it’s done through the CSS?

    #994859
    Leo
    Staff
    Customer Support

    Sorry haven’t you already done it?
    https://www.screencast.com/t/YQxkofDt1eW

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

    #994865
    Jeremy

    Oh, 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.

    #994877
    Leo
    Staff
    Customer Support

    Looks like you’ve done it here too?
    https://www.screencast.com/t/fsOfprJQqrcj

    Let me know 🙂

    #994892
    Jeremy

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

    #994908
    Leo
    Staff
    Customer Support

    It’s just an svg icon.

    Is it not added in the actual menu item?

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