Could anyone help point me in the direction of a nice looking contact / follow us bar?
I’ve been searching for something for days and haven’t found what I need.
I’ve tried creating one myself using the options in the page builder, but it looks a bit bulky, the follow us wording doesn’t align well with the icons, and it scales really poorly.
I could see being able to create a very similar if not replica of that particular bar with a bit of tweaking of the BB module/row settings. I believe you are using individual modules for each element in that bar on your current site so you’ll just need to do a bit of adjusting. To start, I would make the heading font and icon size smaller. From there, you can adjust the row padding to your liking to accomplish a bit sleeker bar. Let me know how it goes!
Thanks for that Billy. I think the issue I was having is that I was using a call out module for the Follow Us text, so I couldn’t reduce the height of the bar. I’ve now copied a Header Setting module and that works much better.
Can you tell me where I can find the Heading Setting module in the add content section? I can’t see it in the beaver builder options so copied it from the FAQ heading.
The last issue I have is that the text on the button goes over two rows when the page width is reduced. Is there a way that I can set a minimum button width to avoid that?
I’d just like to chime in here. The Heading module should be under Basic Modules. You can also reduce the font-size on mobile for the Heading module. Simply head over to Style > Mobile structure. Reducing the font-size on mobile should prevent it from wrapping to 2 lines.
You’re absolutely right, the header module is in the basic section. Can’t believe I missed that!
I’ve been trying to find the Style > Mobile structure bit though, and can’t find it in my BB bar, or in the wordpress customise menu. I’ve tried checking all the submenus too but can’t seem to find it. Any ideas?
Ah - sorry - it’s not that bit that is causing the problem. It’s the ‘Get The Latest News’ button text that goes over two lines. It’s a subscription module, and I can’t see any mobile options in the setting menu. It’s at the bottom of this page: http://d00.0c4.myftpupload.com
Right, there is no setting for that. One thing you can do though, is reduce the width of the first 2 columns on that row, or change the word in the button, or change the font-size. We could place a minimum width on that button so it doesn’t wrap but it goes below the email field if we do. There’s just not enough space.
I think I’d prefer for the button and email box to split over two rows than for the text in the button to go over two rows. How could I specify a minimum button width?
One other thing happens as the screen width is reduced. The icons go below the Follow Us wording. There would be enough space for them to remain side by side. Is there a way I can keep them on a single row?
This can be done via Custom CSS. Place a class on your Subscribe Form module under the Advanced tab. For the code below, the class added is button-width. Then place the code below under Appearance > Customize > Code > CSS Code.
You can also just change the layout of the Subscribe Form module to Stacked.
Regarding the icons, you can change the columns’ width when it reaches the Small Responsive Breakpoint. Simply hit the Column Settings then go to Advanced. Under Responsive Layout, change the Small Device Width to 50% for both the Follow Us and the Icons columns.
I’ve not had much luck with the column settings though. I can’t seem to find them! I can open the row settings, the heading settings (where Follow Us is) and the Icon settings. The only mobile responsive part is Display and the options are whether to show the module or not on certain devices. Have I missed something obvious? Thanks
