Hello,
Although I’ve selected an element to be hidden it is sometimes still visible in the builder. Is there a way to fix that? I’ve experienced it in a few different places here is an example of one.
(ex Header bar - Navigation, Inline : 768px-979px. I have it selected so that it should not be visible in that size but it is still visible in that view.)
Hello @steve,
Thanks for asking. 
I checked all 5 elements that’s present in header builder and it seems to be working fine on responsive mode. Please see screencast. https://screencast.com/t/qSddTZbHISAh
Thanks.
Why would the ‘Navigation Inline’ element still be visible in my editor on my end?
Also, could you share any literature or videos/tutorials on best practices in crafting the settings to optimize the appearance between the different responsive sizes?
Hello There,
I have logged in and I could not replicate the issue.
Since you have installed a caching plugin WP Fastest Cache, please clear your plugin cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.
Please let us know how it goes.
So where do we go from here? I’m still having the issue.
I deactivated the cache plugin. I’ve cleared my cache.
Can you share some education / learning content / vids on best practices / how to’s for making the layout mobile?
Could you teach me how to set the ‘Digital Precision’ image to stay the same size in all views?
Hello There,
Before we go to other issues or request, is your header displaying like what I have in my screenshot? Could you please share some screenshots or confirm that this has been resolved already.
For your reference, you may check out this video to get some ideas on how you can create your own menu using the header builder.
Hope this helps.
Okay so based on what i saw in the video I made some minor layout changes. I added two additional containers and have attempted to fix my header. Anyhow, it is all kinds of messed up now. I am still having the same issue with the inline navigation being visible despite setting to be not visible. On the mobile view, for some reason, the email us button is not visible.
I wish you could provide a best practices list. ie. First add a bar then container then insert an element. (Here is where I would have a question) Once an item is added in what order should it’s positioning be modified? Flex items? Margins? Padding? In general, will the items rescale in a more desirable fashion if margin and padding adjustments are avoided or kept to a minimum? (Here is another question) Should flex setting be filled out in any order (bar then container then element) or does it not matter?
I appreciate your patients with me on this guys.
Hi,
Your menu is no longer showing on smaller screen
But your logo is a bit big on smaller screens making your email button not visible, you can reduce it by adding the code below in Theme Options > CSS
@media(max-width:979px) {
.x-image.my-logo {
max-width: 300px;
}
}
@media(max-width:768px) {
.x-image.my-logo {
max-width: 250px;
}
}
@media(max-width:480px) {
.x-image.my-logo {
max-width: 200px;
}
}
Hope that helps.
I feel like we are having a misunderstanding. When I view the page outside of the editor it appears correctly. In the editor some components do not disappear when I set them to do so. This makes it difficult to edit correctly and would seem to be a flaw in the editor. Because I am having this issue with the header I moved onto the foot and am having similar issues. What should I do? Is this something that can be fixed?
It seems that every issue I have with visibility is in the 768px-979px.
Hi there,
Been trying it on multiple devices and can’t replicate the issue, are you sure you’re choosing the 78px-979px preview? Because it’s supposed to appear black instead of grey when selected. Would you mind providing a video recording? Maybe we’re just missing some steps.
Thanks!
Sure. What can I use to take a video?
I figured it out. I am inserting a link to the video in the secure notes.
Hi Steve,
Thank you for the screencast, but Neither I can replicate the issue, only if I zoom the browser in 110%, which make sense because zooming the browser makes the preview window bigger than 979px. With that said this issue seems to have something to do with your screen resolution, please make sure that your browser is set to normal zoom (100%). What screen resolution do you have?
Regarding the responsive of the header, please watch this videos here. You need to understand how the Flexbox Layout works, because that is the primary module use on the Header/Footer builder.
Please set your Bar’s Content Length to 100%, so the containers does not overflow.
Also your Bar looks very crowded (lengthy logo + lengthy menu) even if we wrap the containers. I advise that you moved your contact number (possibly the button too) to a separate bar, like a topbar.
Hope that helps,
Cheers!
Yes, yes, & yes!!! That was it. It was my zoom.
Also the video content you shared was exactly what I needed.
Love it! Thank you!!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
