[Support request] Custom html in left Site header?

[Jeremy]

I had to look at what I did again. I basically copied and pasted into the Navigation Label field of the menu item, and that’s all I did. I was surprised to see the logo appear in what I thought was just a text field.

Maybe I can just create an icon box somewhere and copy and paste the desired icon into that field? Otherwise, I am not sure what the best method would be to achieve this.

[Leo]

I think the current way using SVG is the best. You can try to find the desired icon in SVG format to replace the current one.

[Jeremy]

Hello again,

Sorry to keep rehashing this issue. Currently I am still trying to have a header that has a non-link phone number with an phone icon on the left side of the header, the site logo in the center of the header, and then the primary navigation menu on the right. What would be the best, cleanest way to do this?

As it is now, I have the phone number on the left, which is the first child of the primary menu moved with css. I do not wish to have any link properties to it. Also, when sizing the browser window down, the primary menu first jumps to the left of the logo before it turns into a mobile menu.

As far adding an icon to the phone number, I don’t understand where to put any sort of code to source an image if I am using the menu label method. I have been able to paste a logo from sowewhere else, but it does not get me any control over the result.

Thank you in advance for help and for the help thus far.

Best,

Jeremy

[David]

So go to the menu editor and edit the phone number menu item.

1. Edit the Menu item and give it another class of no-pointer and add this CSS ( after your done editing the meni:

.no-pointer {
    pointer-events: none;
}

2. Whilst your editing the menu item remove the hide-on-tablet class as this is causing the number to disappear and your nav to collapse over the logo before the mobile menu kicks in:

3. Phone Icon edit the menu label itself ie the phone number and before it add this:

<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1600 1240q0 27-10 70.5t-21 68.5q-21 50-122 106-94 51-186 51-27 0-53-3.5t-57.5-12.5-47-14.5-55.5-20.5-49-18q-98-35-175-83-127-79-264-216t-216-264q-48-77-83-175-3-9-18-49t-20.5-55.5-14.5-47-12.5-57.5-3.5-53q0-92 51-186 56-101 106-122 25-11 68.5-21t70.5-10q14 0 21 3 18 6 53 76 11 19 30 54t35 63.5 31 53.5q3 4 17.5 25t21.5 35.5 7 28.5q0 20-28.5 50t-62 55-62 53-28.5 46q0 9 5 22.5t8.5 20.5 14 24 11.5 19q76 137 174 235t235 174q2 1 19 11.5t24 14 20.5 8.5 22.5 5q18 0 46-28.5t53-62 55-62 50-28.5q14 0 28.5 7t35.5 21.5 25 17.5q25 15 53.5 31t63.5 35 54 30q70 35 76 53 3 7 3 21z"/></svg>

[Jeremy]

That worked great, David. I did not realize I could paste a link to an icon directly into the label field. Thanks again.

One thing I noticed is when I drag-resize the browser menu that the right-navigation crosses over the site logo before it switches to the mobile menu. Can that be prevented?

Thanks,

Jeremy

[David]

Apart from having less menu items or making stuff smaller the only way is to increase the Mobile Break Point in Customizer > Layout > Primary Navigation so it breaks to mobile menu sooner. Try increasing it to 960px.

[Jeremy]

Hi again. So sorry to have another question. But when I scale up the logo under the GeneratePress identity section, it scales from an origin of the top of the logo, pushing it behind the section underneath.

How can I justify the logo so it scales from the center?

Thank you again!

[Jeremy]

Also, though the no-pointer class worked great, I am having trouble assigning other classes to the phone numbers to style line-height, etc., while not affecting the actual navigation items.

Thanks again.

[Tom]

Hi there,

1. This will likely require CSS – what size are you wanting to set it to? Try adding this:

.site-logo {
    top: 10px;
}

2. You can use the no-pointer class to add other values:

.main-navigation .main-nav ul li.no-pointer a {
    line-height: inherit;
}

[Jeremy]

That worked like a charm, Tom. Thank you!

[Tom]

You’re welcome! 🙂

[Author]

Posts