Hi,
I have purchased 2 Vantage themes at this point and love the theme.
In the current website I am developing, my goal is to have the following header layout:
1. Small logo (which does not have the business name incorporated) at left, vertically centered.
2. Not far to the right of that logo, the name of the business (which also happens to be the same as the site title)
3. At the far right, a tagline and underneath that, a phone number.
I need these three items to stack and not run into each other when the theme is viewed in the mobile versions.
I know you, Andrew and Greg, have mentioned numerous times that you can’t have the site title and the logo both display. However, given the above parameters, there must be some kind of work-around to achieve what I want. I’m surprised that no one else (or at least in as many threads as I have read) has brought up the need or desire to have both the site title and the logo to display in the header.
So, can you suggest the best way to obtain my goals?
Thanks in advance,
~Barb
p.s. When I put the multi-site license in the Premium Order Number below, it came back as an error, so I have put the most recent premium order number instead. Please make sure my multi-site license is valid….
Header Layout How-To Dilemma
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Sorry, I forgot to check the Notify me when… box below so I am doing that now.
Hi Barb
Thanks for your support. You’re all good to go on the license front. Sorry to hear about the forum glitch.
Try this, add your logo via Theme Settings and then add a Visual Editor widget (http://wordpress.org/plugins/black-studio-tinymce-widget/) x 2 to the header widget area. Within those two Visual Editor widgets add your site name and remaining items you’ve discussed above. Once that’s done please send through a link where we can view this live and we’ll do our best to assist with the positioning you’re after.
Thanks for the speedy reply, Andrew! Outstanding!
Unfortunately I am developing the site locally on my PC, altho I could move it up online if needs dictate.
However, my client has made a different request, which takes away the need for 2 visual widgets in the header. He wants his entire logo and site title (which is a png image) used instead of just the logo.
The new logo/site title is 575px wide. I have entered header text (.support-text) to appear at far right. Unfortunately, when I decrease the screen size, the support text overlaps the logo at about 870px screen width and does not drop below the logo until the menu goes into mobile mode.
I saw your 9/30/14 suggestion in the thread
Thread: Header display issues with vantage mobile
I tried that but it didn’t work. I am emailing you a Word doc with my exact situation and pictures.
Thanks for your help!
~Barb
Did you try adjusting the breakpoint to suit your layout?
/* Vantage increase support text breakpoint */ @media screen and (max-width: 960px) { body.responsive header#masthead hgroup .support-text, body.responsive header#masthead hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } }The breakpoint there is 960. If you’re still seeing a crossover you can increase it.
Hi Andrew,
I figured out the problem with the above code: you need to add a period before hgroup.
So, once I did that, the above code worked and there is no more overlapping. However, right before the support-text (and the header widget, which I also tried) bumps below the logo, it is smack up against it. I’m not sure what code I should tweak to make it bump down before it “touches” the logo. I would like there to be a measure of space between the logo and the support text at all times.
In addition, once the text bumps below the logo, for a short while it is as far to the left as it can go and also smack up against the bottom of the logo. When the menu switches to mobile, that text then is centered below the logo and spaced appropriately. I would like the text to be centered below the logo with some space inbetween from the moment the text goes below the logo. Is that possible? Are we talking margins or padding, etc. when the screen is at tablet size?
Again, thanks for your help in advance!
Glad to hear you picked that up.
I’d recommend increasing the breakpoint, that would cause everything to be on a new line before the elements were touching.
I could help with centering but would need to see the site live to assist with this.
I’ve increased the breakpoint, Andrew, but that does not address how awkward the site looks with the header widget placement from about 675px through 978px.
I will put the site online and send you the link via email so that you can check it out yourself and hopefully provide the CSS magic that will take the header widget from the far right of the screen to centered under the logo.
Stay tuned and thanks!
~Barb
For sure, send it through when you’re ready and I’ll take a look.
Andrew!
Great job on sending me the code to achieve what I was looking for! I’m going to post it here for those who may have similar needs. I assume this may require a bit of tweaking for others as their breakpoint might be different than my site’s was….
Goal: To center the header widget or support text under the logo when the initial breakpoint occurs moving down from a desktop to mobile perspective:
@media (max-width: 960px) { body.responsive header#masthead .hgroup { text-align: center; } body.responsive header#masthead .hgroup .logo { float: none; } body.responsive header#masthead .hgroup .logo img { margin: 0 auto; padding-top: 0px !important; padding-bottom: 0px !important; } body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar { position: static; display: block; margin-top: 30px; max-width: 100%; } body.responsive header#masthead .hgroup .support-text img, body.responsive header#masthead .hgroup #header-sidebar img { max-width: 100%; height: auto; } body.responsive header#masthead .hgroup #header-sidebar { padding-top: 0 !important; padding-bottom: 0 !important; height: auto; } body.responsive header#masthead .hgroup #header-sidebar .widget { display: block; margin: 0 auto; float: none; } }Thanks so much, Andrew!
~Barb
Hi Barb
Sorry this so long to resolve. Thanks for hanging in there with us!
This issue fixed my issue of the logo overlapping with the support text. I hope a future version includes this fix as it is obviously undesired behavior.
Thanks!