Solved Help with Global Header

Hi,

So I'm working off of a brief from a designer, and the header is probably too much info for a header but it is what it is.

Basically the main menu line is normal stuff, but they want a line above it with all of the info (address, phone number, hours, facebook & ig logos that connect to pages, and email icon but I haven't added this yet).

I was able to create it okay for the desktop version. But when it's reduce to ipad or mobile size the top line which I created using a text mod just scrunches up. I've attempted some css to shrink it, but it just looks awful.

Is there a better way to achieve this so that it works naturally on mobile devices? Should I be looking at a header/menu plugin like Superfly? Any help or tips would be awesome.

Here's the live demo site: http://www2.pcdc.net/~vscr/testing/

And I've attached a screen shot of the wireframe backend - let me know if you'd like me to provide any more info.

 

So this is the code I ended up with in the text mod, including the span code:

<h6><span><a href="http://g.page/velvetsunrisecoffeeroasters" target="_blank" rel="noopener noreferrer"><i class="fas fa-map-marker-alt"></i> 8-100 Ringwood Drive, Stouffville, ON, L4A 1A9</a> <i class="fas fa-phone-alt"></i> 905-205-0783 <i class="far fa-clock"></i> Tues-Sat 9am-4pm <a href="https://www.facebook.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook fa-lg"></i></a> <a href="https://www.instagram.com/velvetsunrisecoffee" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram fa-lg"></i></a></span></h6>

It still just line breaks awkwardly, doesn't seem like there's an a way to make it look decent... any alternative solutions you know of?

 

I also tried just making that top line another menu mod, but in mobile it creates 2 burger menu's.... do you have any experience with header/menu plugins like superfly? Would those work better to make this thing work?

 

That's much better, thank you!