Hi,
I’m having a graphic designer do a custom logo and navigation bar and some circle icon graphics for me for my site www.paperchasestudio.com
She’s asked me for the sizes of the areas in pxls in order for her to complete her work.
Could you please peek at my site and let me know what I might tell her….I want the logo to fill the whole masthead area , the navigation bar to be centered under the logo area and the circle icons to each have their own cute graphic in the circle or even in place of the circle.
Thanks so much for your help!!
Kelly :)
Vantage Premium: Need to know sizes for custom graphics
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hey Kelly
Thanks for reaching out.
Masthead area for logo: 1080px wide.
Circle Icons: They’re 65 x 65 in total.
Your browser has a developer tool that makes it really easy to get sizes of elements. If you’re ever interested in the developer tool, specifically the inspector, check out:
http://stackoverflow.com/questions/10234154/how-to-find-computed-size-of-any-element-in-chrome-developer-tools
Thank you so much! I’ve passed the info on to the designer and await her response.
Do you think I will need a CSS code to insert the nav bar with the cute graphics?
Can I just add the logo to my media library and upload it in the proper section? I actually do know where that is. haha
Thanks!
For sure :)
Sorry, I’ve lost you there. Do you just need to insert a background behind the menu?
I’ll try adding the logo and navigation bar and come back if I have trouble..which I’m guessing I will! ? Thanks!
Hi, me again
The designer is asking if I need the whole file or just code to add her custom logo and graphics for my navigation bar and icons in the home page widgets?
Thanks!
Hi,
I have figured out that my logo comes as a jpg pic file and I can just upload that.
But still wondering if the custom navigation bar and circle icon graphics need to be whole files or do I need html codes for each button?
Thanks much
Kelly
Sorry to keep bombarding you with questions before you even get a chance to reply….but…I think i”m seeing that I might need a plug in for a custom navigation bar with the words underneath the graphics? Also seems I will need CSS for the circle icon graphics? Hmmmm…trying to read WP instructions and watch YouTube tutorials so I can get this done, but I’m too inexperienced to really figure it all out yet. :(
Thanks for your help,
Kelly
Sorry for the delay.
For the Circle Icon widget you just need the image.
I’m not quite sure what you’re looking to do with the custom menu. Vantage doesn’t offer any image settings for the menu. We can help with a little/tiny bit of custom CSS but if it’s a complex menu setup you’re after you might need to go the custom development route. If you have a link to an image so we can see what you’re going to do with the menu that’ll be great.
{\rtf1\ansi\ansicpg1252
{\fonttbl\f0\fnil\fcharset0 .SFUIDisplay-Semibold;}
{\colortbl;\red255\green255\blue255;\red0\green0\blue0;}
\deftab720
\pard\pardeftab720\partightenfactor0
\f0\fs46 \cf0 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 \
}
Hi,
I tried to copy and paste the proof of the navigation menu fir you to see, but I just got this code…
The designer is sending me code for each nav bar button so I’ll send that to you and see what you think, ok?
Thanks!
Hi Kelly
Just at a glance it looks like you’d need to get a developer in to assist with integrating your assets into your menu. If you’d like me to confirm this, please, ask your designer what app they’re using to output the code snippet you sent above?
Hi,
Do these codes/note below from the designer help us any?
Here is each individual code (You will not add the first word with the
colon (EX: BLOG:) just the code part ;) And it needs to stay in this order
to be spaced correctly.
BLOG:
SHOP:
ABOUT US:
CONTACT US:
MY ACCT:
CHECKOUT:
CART:
And if it let’s you add the code as one big chunk instead, here ya go:
I’ve figured out how to add graphics to the icon circles…yay!
I added the custom logo, but it seems to be too wide with my boxed layout. But if I do the full screen layout, it messes up the widgets, etc. Can I crop the logo graphic myself ? Seems I cannot and I can’t figure out how to adjust the width.
Also it looks teeny tiny on my iphone when I check the site from that view. Ugh. Any suggestions.
Thanks a million!
Kelly
Oh bother! I tried to copy /paste the code above for the navigation but it disappeared when I replied?! Do I need to type it out vs. copy/paste?
The menu does sound like it’ll need developer help to implement. You’re welcome to email me the menu code you’ve been supplied and I’ll confirm.
Private Snippet
If you’d like to put the site back into boxed layout I could check out the logo for you and see if we can adjust, assuming you want the site in boxed.
Thank you ! Emailing you now!
I put things back in boxed so you can see that too
Ps..I also wish all of the sections were closer together –less padding /white space between rows…is that possible?
Sure, you can adjust global Page Builder layout settings at Settings > Page Builder > Layout.
Hi Andrew,
Can you advise me on two things?
First, my background image does not seem to work correctly on the Home Page on mobile views…if you open my site on an iPhone 6s, the background image fills the whole screen, but the rest of the home page is smaller. If I turn my phone horizontally, then the background is correct, but then my logo is small and funny looking. Hmmmm?
Secondly, there is some excess white space above my footer and I can’t figure out how to narrow that area between my icon widgets and the footer. Not a huge deal, but it seems the white area jumps out at me as is.
Thanks so much!
Oh- I forgot to tell you my current settings on Layout in Page Builder:
Responsive Layout: enabled
Mobile Width: 780 px
Row Bottom Margin: 5 px
Row Gutter: 30 px
Full Width Container: body
Thanks!
You don’t have responsive layout enabled at the moment. If that’s something you’d like to turn on you can do so at Appearance > Theme Settings > Layout.
I’ll try it! Thanks?
I tried but disabling it caused my new nav bar to disappear on mobile view so I’ll just leave it alone ?
That’s it. Your nav bar should collapse into a single “Menu” item for mobile. You can choose at which point this should happen by adjusting the Mobile Menu Collapse at Appearance > Theme Settings > Navigation. A value of above 480 must be used. The value refers to resolution.