Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Vantage Social Media icons in header erased phone number
Is there a way to have both the social media icons and the Phone in the header text?
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
13Hi Deborah
Sure, you’d just need to add a Text or Visual Editor widget to the header widget area for your phone number. If you want a lot of control over the layout in the header widget area, try adding a Layout Builder first and then adding your widgets to that.
Hi Andrew,
I added custom css and html but can't fit phone and social icons in header area without wrap around. I'd also like to add the word CALL before the phone number and there's no room for it. I attached a screenshot.
CSS CODE:
/* header phone format */
h6 {
color:#ffffff;
font-weight: normal;
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height:1.2em;
font-size:1.4em;
align:left;
}
.inline {display: inline;}
Layout Builder Visual Editor code:
\<h6 class="inline">1-800-240-1978</h6>
What you might try here is the Layout Builder. It’s a widget, you can add it to the header widget area from Appearance > Widgets. The Layout Builder will let you build a Page Builder style layout in the header. Give it a go and let us know.
I have been using Page Builder in the header as you suggested. There isn't much room to hold that page builder row – big empty area between logo and phone. You can see how Pinterest is wrapping :9
Also the 3 photo boxes below the header need to go wider. Is there a way to update the template width?
website: http://www.firstclassvacations.com
Want boxes under slideshow to look like this:
http://www.vikingrivercruises.com/
I added this to the Custom CSS but it didn't change the width to 1480 from
1080 px:
#search-icon .searchform {
display: none;
position: absolute;
top: 100%;
right: 0;
width: 1080px;
background: #2d2e31;
z-index: 10;
overflow-x: hidden;
}
The following will adjust the over container width in Vantage. Give it a try under Appearance > Custom CSS:
/* Vantage Full Width Layout - Adjust Site Width */ body.responsive.layout-full #page-wrapper .full-container { max-width: 1080px; }1080 is default. Increase that figure as required.
When I view: http://firstclassvacations.com/ I only see the social icons, nothing else. Is it possible I’m viewing a cached version of the site. Can you try clearing the cache of your caching plugin.
Yes – I found that on a thread. It fixed the page width but if you look at my site there isnt enough room for both the phone number and social icons without wrapping. I nudged Layout Builders cells but the header wrapper isn't wide enough for both.
http://www.firstclassvacations.com
That's weird. I see 800-240-1978 and the social icons wrapping with
Pinterest on a 2nd line like in the screenshot I sent to you.
I cleared cache.
Super, I can see the phone number etc. now. Thanks. Could you perhaps email a set of temporary login details to:
[email protected]
I’d like to login and see if can re-work the header widget area layout to fit better.
user: Cruise pass: YouDeserve#^
Thx :)
>
meant to send that to other email – so changed the password :)
This is a private message.
Thanks. Should be resolved now. I added a class name to the Attributes tab of the Layout Builder row and then targeted that under Appearance > Custom CSS with the following:
/* Header Widget Area */ .header-info { min-width: 400px; } @media (max-width: 680px) { .header-info { min-width: initial; } }Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.