All is good Wes. Thank you! So will I need to include these custom options on future sites so the same thing doesn’t occur?
Excellent Wes. Thank you. That did it.
I still need to get the title centered on mobile, but I should be able to figure it out.
Thanks!
hi Wes.
There’s a margin on the right but not the left. So the site shifts left on mobile (which leads to the cutoff, I think).
Here’s a screenshot:
http://www.porticovisual.com/screenshot
Thanks Wes.
Thanks Andykev but no luck with that one – still blown-up on a kindle and iphone.
That background image resides in the body.home css I added:
body.home {
background-image: url(“/wp-content/uploads/2015/11/white_kitchen_home4.jpg”);
-webkit-background-size: cover;
-moz-background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: left top;
}
So I’m thinking the code needs to go somewhere in the responsive sections. Nothing has worked, but I’m sure it’s a simple fix.
Maybe body.home isn’t the best place to add that full image. Not sure. (I also added a non-breaking space into the welcome widget and, as mentioned, gave it a set height to make this work.)
Here’s the site, if anyone is willing to help. Thanks:
Hey, thanks a lot Wes.
That was perfect and very valuable information going forward!
It looks like the mobile icon only works or shows up if you use the header widget/menu (vs the prime menu below header)?
Greg
The thing is, the entire nav menu disappears — it’s not just the responsive menu.
I’ve used Epik on a ton of sites and they all work fine.
It’s got to be a something in the customization, was just hoping someone else ran across something similar and could lend a thought. I’ve inspected thoroughly and no luck finding anything.
Ugh.
Thanks Scooby.
I’ve used this plugin and it works very well:
https://wordpress.org/plugins/wpmbytplayer/
I don’t know if there’s a downside, but it’s easy to use. Just make the background of the widget (whether it’s slider of welcome) transparent. I haven’t found a better option yet.
Greg
Close this. Issue resolved.
I had <p align=”left”> in a widget. I thought I could get away with it.
Funny thing is I have other older sites and it’s showing up in Firefox.
Greg
Well this is bad.
I just started recreating the site, uploaded photos so far, and I’m having the issue again.
Check it out on Chrome, it’s fine.
Look on Firefox…the widgets don’t even show up.
I have no idea, but man it’s bumming me out.
Any thoughts?
Greg
Yeah something is weird. I even killed all plugins, removed all widgets, and the issue is still there.
There’s something in the code somewhere (which, yes, I did customize CSS).
I bet it’s one, tiny little thing and at this point it’ll be easier for me to rebuild and watch it along the way instead of trying to find a “needle in a haystack.”
So don’t go nuts unless you feel challenged to see what the deal is before I start all over 🙂
Thanks Eric!
Kind of hard to see it without the url.
Check it out here:
sam.creativeresultsmarketing.com
Awesome. That was it! Thank you. Appreciate the help Jessy!!
Hi Jessy, the space it still there. I’m trying to get the photo of the guy to sit flush above the dark background widget right below it. It’s a small space, but you should be able to see it.
The padding seems to be either in the .one-half column div I’m using or in the text widget itself.
Again, it’s a small space, but definitely still there.
And it’s driving me nuts that I can’t find it!! So if you have any idea that would great.
Hi Wes just checking back…have you had any time or luck on your end with this? just curious.
A good example: http://ruhm.com
Greg
Wes, this topic came up on the SP forum and this is one option, although I’m sure there’s got to be a better way (or at least a plugin coming soon?):
http://sridharkatakam.com/video-background-genesis-using-jquery/
I had already tried changing no-repeat to repeat and a couple of other tweaks with no luck.
BUT…thanks for bringing it up again because I removed “.hf5” from there and that did the trick!!!
Appreciate the help Eric.
Greg
Hi Eric. For the header wrap, I dropped in a single image-background with a 100×100 image. It automatically repeats.
I’m trying to do the same with the Featured-Dark area (use a single, smaller background image) but when I upgraded to the new version of Epik, it just blew up the single image. Which I guess Wes set up so you can put a full width image in there to auto-stretch?
I removed the css for the image and just using a solid background color for now.
Thanks for any help
Hi Van,
Thanks. I did check out some of the videos. I was just curious if anybody had any Epik-specific info. Some of the css needs to be tweaked to get it to work at full-width.
I’ve used a few different sliders and liked the things Royal slider could do, but it’s not as straight-forward as I’d hoped. I hear Meta Slider is nice but haven’t tried it…Royal slider’s slideshow for photography/images is pretty cool and hooks up with the wordpress gallery.
Greg
Ahhhh okay. I kept removing padding thinking the logo would keep it opened up.
This is the only time I’ve had the nav not align in the middle with Epik, so I thought maybe it was a header height issue.
Thanks Wes.
Greg
Hi Wes,
No, I still want a normal horizontal nav — just trying to center it vertically.
I’ve removed padding, added it back, removed the header…
It’s basic. I just can’t find the right code.
Check it out here — I added a red line to my screenshot:
Eric, just wanted to let you know it worked perfectly. Awesome. Thank you again. -Greg
Eric, I haven’t gotten a chance to try it yet, but that is very, very cool of you to take your time to figure it out. Thank you so much…for that and all the help you provide in this forum.
Greg
Okay, but that’s making it too easy for me. I like to get in there and mess around…but I’ll take your help if you’re willing 🙂
Here’s where I’m at: http://www.gregpayette.com
You can hover over the top nav and see the buttons…but I want it to fill the header, vertically when I hover.
Thanks Eric.
Here’s the code for the nav I’m talking about. I added a background color for the hover, but seems like what I’d need to do set a height so it fills up the entire header, vertically. Which would be 108px…but I’ve tried various things (i.e. background-height) with no luck. Any ideas?:
/* Site Header Navigation
——————————————— */
.site-header .genesis-nav-menu a {
color: #990000;
}
.site-header .genesis-nav-menu .current-menu-item > a {
color: #990000;
}
.site-header .genesis-nav-menu a:hover {
color: #ccc;
background: #990000;
}
.site-header .genesis-nav-menu .sub-menu .current-menu-item > a {
color: #ccc;
}
Eric, so what you’re saying is that same css is what’ll trigger the colors behind the navigation to create somewhat of a button effect (right header widget, custom menu)? I didn’t know that…I’ll see what I can do.
Hi Wes – not an issue on any of my sites.
The only reason I’m asking is I saw a post or 2 from people asking how to REMOVE the rollover effect…which to me meant it happened automatically in Epik unless you removed it?
I don’t see it on the demo either. I’m really just curious if it’s already in the css somewhere but I’m missing it (to have that effect on all linked images)?
Greg
It sounds like what you’d like to do is actually more straight-forward than what I’m doing. What I have so far for a single image background is this:
/* Slider Wide
——————————————— */
.slider-wide {
clear: both;
width: 100%;
background: url(‘/wp-content/uploads/2013/10/wideimagetest.jpg’) no-repeat fixed center;
height: 400px;
}
But I want a single image and real text. (I’m not 100% there yet, by the way. A couple of things not jiving.)
However…
If you’re not worried about real text, then it sounds like you just need a slider that lets you go wide enough. The problem with super wide sliders is the larger file size.
What Wes does on his theme demo is a nice way to go…a “normal” size slider image that uses the same background colors rather than having an “edge” or key line on your featured images. This way it appears to be a full-width slider. But it’s really not. (If that makes sense?)
But that might not be an option for you.
I’ve recently started using Soliloquy (lite version is free but limited…paid is only $19.) It seems to be very good. Plus it works with shortcode, which is just plain easy. So you just set it up and add the shortcode to your wide slider widget. You can go as wide as you want but, again, large files aren’t good.
By the way, to add shortcut to widgets I found I had to add this to functions:
add_filter( ‘widget_text’, ‘do_shortcode’ );
===
I don’t know if I gave you the answer you’re looking for but hopefully helped a little 🙂
Thanks Wes. It seems to fairly simple so hopefully I can get it cranking.
Thanks for the quick reply Wes. I actually tried that just pulling the image in and came close, but gotta have the image in the background up top, plus include the button and text “layered” over it. I’m still digging but no luck (yet).
I’m not sure how to close this topic, but I dug a bit deeper and found the answer thanks to jennifergrayeb and Wes. For anyone else digging for a similar answer, it’s here: https://appfinite.com/topic/epik-logo-heightalignment-issue/