In general, I’m a rookie. Got Vantage and all SiteOrigin stuff. On the home page I tried to add icons (www.waterfowltips.com) but for some reason the outline still appears. Scratching my head as the image is transparent background and the page is set the #ffffff (white)
Baffled – Icons Outline
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Bgladden
Thanks for your support. Looks like you’ve reverted to using a regular editor widget. If you’re ok with that solution then that’s cool. If not we’d need to see the problem to help resolve :)
Andrew, all good. I had to turn off Image Shadowing and Rounding under customize/page. I'm really a rookie and found you guys by chance (after ditching StudioPress) and like the kinda-simplicity. Looking for more tutorials rather than trying to go the BeaverBuilder or Weebly/WIX route.
Looking for a tutorial to put social icons in Menu Bar next to Search.
Would like to reduce header/menu space as much as possible.
Great to have you with us. Putting menu icons next to search is actually a little tricky. One solution you could try right now is to use:
https://wordpress.org/plugins/menu-icons/
Create a Custom Link at Appearance > Menus for each social network. Choose the icon for each link using the Menu Icons plugin. Menu Icons will add a link to each menu item that allow you to choose an icon.
Once you’ve added your icons, let me know, I’ll help with a little Custom CSS to move those items to the right.
Thanks Andrew. I'll just put them in the masthead. The trick there is to shrink the menu bar and masthead (heigh-wise) so it looks right. And still having trouble with a logo in the masthead. We'll keep trying. I love bluehost, wordpress, and all the SiteOrigin stuff, just a rookie and very bad at this stuff.
I’ve been hearing good things about Bluehost.
Do you perhaps want to send me a set of temporary login details so I can take a look? Instructions to follow.
Would it be possible for you to create a temporary admin account for us so we can log in and take a look? You can create the account with the following email address:
[email protected]
Just navigate to Users > Add New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the “Send Password” field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
OK, you should get the email for admin. Thx!
I'm just getting started, so not much content. Just for home page
Let me know if you didn't get it. Set it up an hour ago.
Sorry, nothing on our side. Please, re-send using the Private Reply checkbox below. Apologies for the hassle.
Should get it now.
Could you post it here as a normal message and then use the Private Reply checkbox in the bottom right when posting? Thanks.
This is a private message.
Thanks. You can see my solution on your site now. If you go to Appearance > Menus and click on each item you’ll see where the icon is set. Unfortunately, no YouTube icon so I’m making do.
At Appearance > Custom CSS you’ll see I have CSS to make the icons align right:
.main-navigation li:nth-of-type(2), .main-navigation li:nth-of-type(3), .main-navigation li:nth-of-type(4) { float: right; }Those numbers, 2, 3, 4 need to match the position of the icons. We have four menu items right now, home and three icons so the icons are in position 2,3 and 4. As you add more menu items you’ll need to update this.
I’ve added your order number so you’ll get Vantage updates now.
Thanks Andrew. I will review in a bit. Wonder how I put a larger icon in menu too, to the left? Thx!
No problem. The icon size can be controlled from within the icon selection link at Appearance > Menus. To float icons right, add the following to Custom CSS:
.main-navigation li:nth-of-type(4) { float: left; }Set the numerical values to match the number of the menu item you want to control. (1) would be the first item in your menu.
Thanks Andrew. I’m such a rookie. Thanks for the updates in the web site. it’s not exactly what I wanted, so wondering if there is a tutorial on how to do this stuff. I’d like the Social and Menu words about twice as big and add my own logo. I purchased the Vantage Theme hoping to use it on multiple sites with a very similar look. ( Logo in Menu or header with Social Icons, menu fixed when scrolling). along with a slider with words in the slider. If you think this is too much for me to handle. I’ll look around for a different approach. I’m bootstrapping this, so cost is important. I did find a neat tutorial on Tyler.com and that’s about as close to the approach as I can find (but with the slider/words in slider). I use bluehost and they are great. I’d rather NOT use a free (really wattered down) Weebly or have to pay $11/mo for Weebly Pro + commerce. Thanks for any guidance.
The menu font size can be set from Appearance > Customize > Theme Design > Menu > Menu Font Size.
Your site logo can be added from Appearance > Theme Settings > Logo.
Perhaps you can explain a little more, we’ll do our best to help.
Frankly, I love your site https://siteorigin.com/ and http://www.tyler.com
I'd just like one Menu Bar that stays put when scrolling, my logo, the menu, social icons
From there, I think I can either just do the MetaSlider, your slider (do you recemmend yours?) with words/buttons on it, three icons and that's about it.
I'm struggling with initial setup. I'd use this same setup (different colors, content) for more sites.
Your menu is currently sticky. At least it is on my side.
Logo goes in Appearance > Theme Settings > Logo.
Social icons within the menu, unfortunately all I can think of there is the Menu Icons solution. The Menu Icons does provide the option to upload your own image if that’s what you’re after.
Meta Slider Free doesn’t offer a text layer option but we have a solution using an overlay image: https://siteorigin.com/vantage-documentation/getting-started/slider/.
Sure, you can use the SiteOrigin Slider Widget. Just edit the row it’s in and click the Layout tab, make the row layout Full Width stretched, then, to remove the space under the menu, add the following to Appearance > Custom CSS:
/* Home */ .home #main { padding-top: 0; }This is only applicable if using the SiteOrigin Slider widget. That widget does support text layers.
Page: Slider Widget Documentation
Thanks Andrew. I have MetaSlider Pro and it's still challenging. Oh Well
I'll keep trying. i don't want to go to Weebly, no, no, no
How can I remove the social Icons you put up? Sorry, It's just that they are small and don't look like what I thought they would.
Maybe I should just try to use the header and make it real small and match the color of the menu bar?
Meta Slider Pro does come with premium support. If you run into a challenge you can’t work past you could ask for help.
The social icons I applied are done via Menu Icons plugin. Please see the help section here:
https://wordpress.org/plugins/menu-icons/screenshots/
You can quite easily adjust the size of them using the plugin.
Yes, you can use the default masthead and drop the padding down from the Customizer.
Hey Andrew. Thanks for all your help. I just included the masthead layout and shrunk it down as far as I could. Check it out http://www.waterfowltips.com
In a perfect world I would like this on on the menu and the menu stays fixed as you scroll. I'm just not that capable.
Side question, is there a way to reduce the margins between rows? I went to settings > siteorigin and reduced the row bottom margin to 10 px but it didn't change anything.
Also a way to shrink margin from MetaSlider to first row. I think I won't bother you'all for a while ;-)
Sure :)
Meta Slider to the site body can be controlled from Appearance > Custom CSS using:
/* Home */ .home #main { padding-top: 0; }The above assumes you’re just targeting the home page with this.
With regards to the original menu question, perhaps try this child theme:
https://siteorigin.com/wp-content/uploads/2015/05/vantage-child-menu-widget-area.zip
1. Download the ZIP.
2. Install from Appearance > Themes > Add New: Upload Theme.
3. It’ll add a widget area at Appearance > Widgets.
4. You can tweak the alignment of the widget area using the absolute position values in the only CSS rule at Appearance > Editor > style.css
Activating a child theme will cause Appearance > Customize and Appearance > Menu location settings to reset. Unfortunately, this is normal.