Forum Replies Created
-
AuthorPosts
-
Thanks so much! Everything works perfectly now. I really appreciate all your help.
Chris
Yes! That’s perfect! Thanks so much!
Just one or two more minor things:
1. Currently the cross logo is not quite centered. I think it’s because the entire menu (the whole block) is centered. Is there a way to center the cross, and then arrange the other menu items around it?2. When I scroll down, the menu items get a little bit closer together (you can see this at the website, which is in the private data). I assume there’s a padding code somewhere that’s affecting this? How can I avoid this?
Here’s all the menu css code I have affecting the header, if it helps:/* increases spacing between top menu items */ #top #header .av-main-nav > li { margin-right: 15px; } /* eliminates space above menu */ .container.av-logo-container { max-height: 0 !important; } #header_main { padding: 10px 0; } /* changes logo to blue in menu when scrolling down */ .header-scrolled-full #menu-item-914 a { background-image: url(https://middlestreetnh.com/wp-content/uploads/2016/09/CROSS-BLUE-50-50.png); background-size: 50px 50px; background-repeat: no-repeat; width: 50px; } .header-scrolled-full #menu-item-914 .avia-menu-text { display: none; } .header-scrolled-full #menu-item-914 a:hover { background: transparent !important; background-image: url(https://middlestreetnh.com/wp-content/uploads/2016/09/CROSS-BLUE-50-50-75.png) !important; }
Thanks so much for all your help!
Thanks :) This gets closer. Unfortunately now the cross logo is about half the size it should be :) I tried changing the background-size attribute from “contain” to “cover,” which only displayed half the logo (see screenshots in private data). Also tried setting pixel values (background-size: 50px 50px) and percentages (background-size: 100% 100%). All results are in the screenshots.
I’m obviously no expert, but it seems that the “container” for the logo is too narrow. Any way to make it wider?
I tried different browsers (chrome and safari for mac); no difference.
Thanks for all your help!
ChrisThanks so much! The first bit of code worked perfectly!
Unfortunately the second didn’t work. Currently I do not display a conventional “logo,” as defined/set in Enfold settings. Instead, I have our logo set in the middle of the menu as a menu item.
As you can see when you visit the site (link in private content), the white cross logo looks great when it’s over the “glassy” semi-transparent menu, which only appears when the page is scrolled all the way at the top. When I scroll down, however, the menu changes from the “glassy, transparent” effect to a simple, light-cream background with blue text. I would like for this image to change, when the page is scrolled, from white to blue.
To set the logo in the middle of the menu, I created a menu item as a “custom link,” and in the Navigation Label I added the tag pointing to the white logo image. That’s what I want to change to blue when the user scrolls down. I’ve attached an image showing how the logo is currently set up in the menu in the private data (screenshot from “menus” page)
My best guess was some sort of class id in the tag, and some corresponding css to change the image or overlay a new one?
I hope that clarifies a bit. Thanks so much for all your help!
Chris
Thanks so much! The solution for the second two questions (text overlay over featured image and removing link to image) worked great!
The solution to #1 (align image top-center) didn’t work. As you can see (link in private data), the peoples’ heads are still cut off. I played around with the advanced editor and a full size color section in the post, but that seems like more trouble than it’s worth. I posted a link in the private data to the original image; I’m looking for the featured image to display the top section, instead of the middle section.
This also brought up a couple of other questions:
1. How would I add a color overlay to the featured image? Since the title text is white, I’d like to add an opaque black overlay (the “glassy” effect; probably about 0.4 or 0.5) to the featured image, so that the white text stands out more.2. Is there a way to get these changes to reflect on the blog page as well? (middlestreetnh.com/blog) I’d like the featured image to be semi-opaque there, and the post title to be overlaid over the featured image on the blog page as well.
Thanks so much! I really appreciate all your help!
Chris
Wow, that was a fast response!
Page listed in private data.
Sure! Sorry it took so long; was traveling recently. Link in private data section.
Thanks!
P.S. Somehow the order on imgur may have gotten messed up. I ordered the captions as #1, #2, #3, #4 so you can figure out the order they should appear!
- This reply was modified 8 years, 3 months ago by dunawaychris. Reason: changed imgur link
Definitely! Listed in private content.
Thanks so much! That’s what I’m looking for.
With this change I’m having some other trouble.
1. There’s a large transparent area above the menu (I selected “Logo center, Menu below” in header options). I tried to upload a new transparent logo that’s a 1×1 transparent png, but there’s still a big space above the menu. How do I delete that?
2. I’d love to increase the horizontal padding in the menu, so that the menu items are spaced further apart. How do I do this?
3. This may be wishful thinking, but I would love for the logo to change color with the rest of the menu as you scroll down. Is there any way to do this?
4. The logo shows up in the middle of the mobile menu. Can I create a separate mobile menu without the logo?Thanks so much for all your help. You guys (and girls, maybe?) are awesome!
Chris
March 10, 2016 at 6:20 pm in reply to: How to center a partial-width column in Avia layout builder #596460Perfect, thanks so much! You’re the absolute best!
March 10, 2016 at 2:52 am in reply to: How to center a partial-width column in Avia layout builder #596011Not at all! Thanks so much for your help.
Chris
February 25, 2016 at 7:07 pm in reply to: How to center a partial-width column in Avia layout builder #589381Hi,
So sorry, I still can’t figure this out. Here are the screenshots of what I’ve done. I’ll also post my login credentials.
Thanks so much,
ChrisFebruary 24, 2016 at 4:40 am in reply to: How to center a partial-width column in Avia layout builder #588107Hi,
Thanks so much for your help. Unfortunately I can’t get this to work. I updated the functions.php file and added the code to the custom css box in styling, but what do I add to the custom css field in the element itself? I tried av_three_fourth but that didn’t work.
Thanks again for all your help,
ChrisOh my, you’re good. That’s exactly what I wanted! Thanks so much!
cheers,
ChrisWorked like a charm. Thanks!
Now, I have two other questions:
1. I’d like to change the phone info font to slightly larger (14px) and also a light version of lato. I have the following code, which doesn’t seem to work:phone.info { font-size: 14px!important; font-weight: 300!important; }
Ideas?
2. Also, is there any way to set the opening full-screen slider so that the image position is fixed instead of parallax? I want it to look like the beige bar below it slides “over” the intro full screen slider, which would not change position as you scroll down.
If I should start new threads with these, let me know!
Thanks for all your help!
Unfortunately not. It does turn blue, but the dark, semi-transparent overlay is still there, making it a darker blue. I’m looking for it to be a lighter blue. Interestingly, on my desktop computer you can see the lighter color at the edges that I’m looking for. Here’s a screenshot:
That helped. The phone bar is now uniformly covered and appropriately transparent.
But it stays that way even when I scroll down. Is there a way to change color, like the header does, when I scroll down? I’d like for it to be this blue: #124b88.
Also, when I applied your code I lost the formatting for the text in that small bar. It’s the right font (Lato), but I’d like it to be a light weight (300) and size 14. This is the code I’m using, doesn’t seem to work:
phone.info { font-size: 14px!important; font-weight: 300!important; }
I also tried adding div. before the phone.info
Ideas?Thanks so much!
-
AuthorPosts