Forum Replies Created
-
Posts
-
Hey Ismael! I was able to get this resolved today. By using the code in the “additional css” area, not my child theme css stylesheet, the following worked so the sticky header no longer covers up the top content of the pages:
@media only screen and (max-width: 767px) {
.responsive #top #main { padding-top: 110px!important; }}And for reference if it’s helpful to others, I used this code in my child theme css stylesheet to actually make the navigation header stick on mobile:
@media only screen and (min-width: 768px) and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #header {
position: fixed;
}It’s not clear to me why the padding wouldn’t work in my child css, but it works, so I’m happy!
Thank you again!!
Thanks Ismael! I’ve actually been working on it all day and I had made very similar adjustments. I didn’t put in the line height, so I might do that. I found out that by adding my code to the “customize additional css” versus the child css stylesheet I was able to get results. I know the child is the best place to keep code so that when theme updates are applied, custom settings aren’t over written. Will code be overwritten in the “Appearance” “customize” “Additional CSS”.? Also, I was having issue with the actual link area being large enough on mobile (it was restrained to the upper left and barely clickable on mobile). So, I added some padding to fatten up the actual link area in a.ls-layer-link:link. I was just not able to get a hover effect that worked, so when you click the button, it doesn’t turn blue on mobile like the other buttons. Oh well. This is what I ended up with.
@media only screen and (max-width: 768px) {
.custom-mobile-button-large {
width: 110px!important;
height:22px!important;
font-size: 14px!important;
text-align: center!important;
background-color: #a3e83c!important;
line-height: 20px!important;
}
}a.ls-layer-link:link {
padding-right: 125px!important;
padding-bottom: 35px!important;
}Hey Ismael! Yes! We are supposed to launch today. And, yes, this is a one page website and I want it to be a sticky header on mobile so the user has access to the menu at all times (this is where the main call to action “colored menu button” resides). I can’t launch it with the way it looks on mobile and I will have to disable the sticky header until the padding is resolved. For now, the coding is active, but by the time you log in, the coding might be commented out (since it isn’t working on mobile). I still want it to work, so please see what you can do. I really appreciate the help!
Hey,
No, this is not related to the layer slider button. In this thread, I was referring to the “colored menu button” on the home page navigation menu. I wanted to know if there was a way to force that colored menu button to stay at the top (sticky) on mobile. As it stands, this colored menu button is only visible through the burger menu.Thanks!
Hey Ismael,
Well, your concept is good one, only it didn’t work for me. I used your code with some modifications (I actually need the button to be larger on mobile because it’s tiny). But for now, I’d be happy just to get the code working. I put the new class ID where you described. I DID NOT add any spaces but instead called it “custom-mobile-button-large” for the class ID in the layer slider Links & Attributes. Then, in my child css I added:(I wasn’t sure why you had a class of .black so I added both elements to the new class name). Ideally, my button will have the same colors as on desktop (green and then blue on hover), but more importantly it needs to be visible on mobile. It’s too tiny. Anyway, I added the following, but nothing happened (yes, I cleared my caches, etc. :) ):@media only screen and (max-width: 768px) {
.custom-mobile-button-large {
max-width: 200px;
background-color: black;
}
}Hey Ismael,
Thanks for the reply. I added your code but it is not having any affect. I have cleared my cache, tried my mobile in incognito, etc. I even maxed out the padding to 500px see if I could make the space huge, and nothing changed. This what I currently have for the sticky header, including your code, and the sticky header is still covering the contents of the page:@media only screen and (min-width: 768px) and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #header {
position: fixed;
}
}
@media only screen and (max-width: 767px) { .responsive #top #main {
padding-top: 110px !important;
margin: 0;
}
}Hi Mike,
Ok, thank you. Alternatively, is there a way to make the “scroll to top” floating button return to the last viewed anchor link, instead of scrolling back to the top of the page?
Thanks!Hi Mike! No, unfortunately that was not the fix. I deleted the code out of the header file in my child theme, saved it (empty file) and it dramatically messed up the site! I quickly pasted the header info back in. Can you perhaps send me the code for the updated lightbox that maybe I could patch in? Alternatively, should I try uninstalling and reinstalling Yoast? I don’t know if this will mess anything else up. Thanks!
Hi! I’m still a little confused. The problem started when I went to Yoast and selected “Yes” for the media linking, as suggested above. This did not work, it caused a problem by not being able to have the images open as expected. I revered to the original setting of “No” in Yoast. I’m trying to understand what the header file has to do with this, and why removing this would help? Thanks!
Yes, I have the header.php under my child theme, and I have not made any changes to the header file. I use the child style sheet for custom css, and the functions file for customization. But I don’t add any “updates” in these files. What do I need to do in the header file (under my child theme) to update it? When I update Enfold, doesn’t it take care of all the updates needed for the theme? I should i be doing other updates elsewhere? Does this have something to do with changing the Yoast to “YES” in the search appearance/media section? Thanks!
I want to clarify the above after looking at the wordpress file. These are “galleries” and when you click on each image, they are supposed to open up a gallery of images.
Additionally, I see this page (below) also isn’t functioning now: Instead of opening in lightbox, this opens to the single image file. It is set to “big images with thumbnails below” These should just be changing in large image at the time on each click. As mentioned, I changed the Yoast setting back to NO.
Hi! So I tried your suggestion using Yoast. I set it to YES. The images, when clicked, no longer opened. So I turned it back to NO, and the images still do not open. Could you please look at this for me? Click on any image. When I hover I can see the file name/directory/path at the bottom of my browser but nothing happens. Site is below:
Super Duper! You’re hired! heehee Thanks again for all your help! Hopefully this thread can be considered closed! :)
CheersWow Mike,you are quick and so very helpful! Thank you….It looks great, and making the change to the Special Heading makes total sense. Ooooone more thing though… why is the caption box still showing in the image element, below the main color section? I was originally using that as another example where I might want a caption box. But I don’t have the custom class added in the developer ID below that image element, and the caption boxes are still there? They should only be there if I add the class name, like above. Sorry to keep this thread going so long ;)
Well, I’m not sure what’s going on. These caption boxes seem to be more work than I expected. The blue margin is also back again (on the left). I’ve got my custom class name in the develop id at the bottom of the element and it doesn’t add the caption boxes. But in the image element below the main image, I DO NOT have my custom class name, and the caption box is behind the text. It’s reverse. Below are my logins. css is in my child style sheet. Could you please have a look?
Hi Mike! Thank you for your help… we are just about there. I was able to get it all to work by using the “Customize” option for that page (yay). It does, however, apply the effect to all the same elements on that page. So If I don’t want a caption box behind text further down on the page, it puts it there anyway. It seems using the custom css class/ID per element is what I need to do (so I can put it ONLY where I want it). So, I would like to like to keep all css in my child theme, and tweak it with custom class names as needed. But, when I put the css in the child theme, it didn’t work. I added a custom name, as you suggested, and added it to the css developer ID under the element. It still had no effect (tried in different browsers). Usually the code works in the child theme so I’m still not clear why it’s not working there. Below is what I have pasted in my child theme:
Oops… I missed this. It looks like the css pushed the whole image and captions over to the right, and left the blue background showing to the left (basically a big margin to the left). Have a look at the screenshot:
Hi Mike,
That’s interesting. When I put the code in my enfold child css, it didn’t do anything. Then I tried putting it where you said (under the customize) and it worked! I’ve never added css with the “customize” before.. What is the difference between adding code to the child editor and adding it to this “customize” option?
Also, can I add a custom class so that it only applies to the text I want it to apply to? If I just added something like “.my-custom-name” somewhere before the curly bracket, then added my-custom-name in the css options for that element, would that work?
One more thing. Is is possible to have the caption box fit the length of the text, like the slider caption boxes, instead of having both boxes be equal length? I sent you a screen shot below as an example. Thank you!!Actually, I can give you credentials on a new site I just started today to see if I can get it to work on this site. I’m not sure if it’s easier to apply your code for a caption box to an ‘image with a caption’ or if it’s easier to apply the code to a ‘special heading’ (when placed over a color section). Either way, it would be nice to have the ability to make the text pop away from the background image, just like the text on the enfold sliders (where you can set the color of caption box, and opacity). I’ve included into below… you will see my text, on the site, where I am asking for help with the caption box (I made it easy :) ). Thanks!
Hi Ismael,
Yes, that page is no longer accessible. It was a page on a testing site and the actual site is now complete and live. I wasn’t able to wait for a resolution on this element, so just went ahead and redesigned how that caption is formatted and displayed. My apologies for not letting you know. Thanks for checking in!Yahooozy! It works right out of the box. I love it when that happens! Thanks again for your great support. This is one of the reasons I keep designing websites with your theme. Thanks again and cheers!
Actually, can I ask one more favor??? Is there a way to remove the total number of photos that display in the bottom right corner? For instance, if there are 15 photos on a page, and I click the photo to enlarge, it says 1/15, etc. Since they won’t be seing any more than just that one photo, is would be great if that would not display. Thanks :)
Beautiful! A solution to my problem. I tried removing the arrows with css earlier, which worked, but it still left the problem of clicking through. This worked perfectly. My client will be very happy. Thank you so much!!!
Yes, this is fairly straightforward. If you look at any Enfold page that has clickable images, the default is to open in Lightbox, and to allow the user to click through all of the images (each time the user clicks on the enlarged verion of the image, or clicks on the arrow). I do not want the user to see any other image, other than the one they clicked to enlarge. It is confusing to see images that may be outside of a particular element, and that may be irrelevant. I just want the image, when clicked, to enlarge, and then close on click. Here is your example theme which shows what I’m referring to (click an image, it gets larger, but then you continue to click through all the images, instead of just seeing this one image):
Thanks!
Interesting. That is getting close, but that box behind the text covers over the entire image. I would like it to look like the standard caption box, like the sliders have. It’s just a box behind the text with some equal space/padding to fill in behind the text. Maybe this code just needs padding, or margins added to it? Thanks!!
