Hi,
I would like to add an email and phone number to my menu bar please. This is the site:
I originally had the logo in the header and used widget icons. But the logo and widgets did not line up and there was a big gap between the menu and the icons.
So I added the logo to the menu, which is much more streamline, but now I can’t see how/where to add an email or phone number. Also I would like to be able to click the email icon and be automatically taken to my email. How do I do that?
Thanks!
Hi, thanks for reaching out.
You might consider adding your email address and phone number to the menu as “Custom Links”. That can be done from AppearanceMenus. An alternative might be to try a Top Bar type plugin. I don’t have one to recommend at the moment but there are a few that will add a top bar to any theme.
Actually, that’s not quite cutting it. I want the top menu to look like this:
http://www.workevents.com
Is there a way to make Logo, line up with phone & email and the menu to line up directly under contact details?
Thanks!
Wrong Website. I meant http://www.worthevents.com
Thanks for the link.
Anything is possible with a bit of custom development but, unfortunately, there isn’t an easy, settings based method of adding a second line to the Logo in Menu masthead layout.
To answer your original question about email links. When adding the link, you can use
mailto:. More on mailto links https://css-tricks.com/snippets/html/mailto-links/.Hi,
If I sign up for premium would they be able to provide me with some code to achieve this perhaps?
Thanks for this,
Lisa.
Hi Lisa. Yes, we could assist with this task within our premium support scope. In the event that you upgrade, please, email [email protected] and reference this thread. Thanks.
Actually, I’ve almost sorted it. I’ve moved the logo, menu and widgets in to the header and that has helped with the alignment. The only thing I can’t seem to fix, is right aligning widgets above the custom menu. Have a look now:
wortheventsvr.com
I’ve disabled widget class in the page builder settings and I’ve removed padding (or so I’d thought) with some custom CSS:
}
.widget_circleicon-widget .circle-icon-box {
margin: 0 0 0 0 !important;
padding: 0;
}
Any thoughts?
Thanks. I’m not quite sure what’s happening there, you might need to make the row layout Full Width Stretched.
Another option is perhaps to use the Masthead widget area at AppearanceWidgetsMasthead. That’ll allow you to build a custom header using individual widgets or a Layout Builder widget. The only issue is that a menu widget won’t automatically become a mobile menu on mobile devices.