Please check the attached video. The issue is about the "close" button on the menu. It looks good when it is a "^". But it isn't correctly displayed in a small size of window or via mobile phone when it is a "x". Hope you understand what I am talking about...I mean when the close button becomes an "x", it should look balanced. Now it doesn't look balanced. The left part of the "x" looks smaller than the right part. How to fix it? Thanks.
P.S : Please be aware as by doing customization if something happens like miss-editing files the responsibility is yours and we wont support you on finding the problem, as we are only guiding you how to get the results you need.
Hope you can fix the issue in your original Photography demo. The graphic close button (not the text one) looks fine when the user chooses the full screen menu (like what the demo shows). However, if the user chooses the top menu (like what I did), the "^" close button on a large window and the "x" close button on a smaller window can't be properly displayed at the same time.
(Maybe other people are not as picky as I am...Maybe other people won't choose top menu in this demo...)
-----------16:14------------
Hi Ylli,
I did NOT edit the code you pasted. It was an original piece of code in your "/* Custom modification from Laborator only for this Demo - START */" area. What I did edit was this:
/* Menu Trigger Icon - Narrow the lines */
/* .menu-bar .ham:after {
top: 6px !important;
} */
The only thing I did to the above code was disable it because if I didn't do that, my page would be like the attached screenshot (close button.png). If you are doubt of this, you can check your original code of the demo theme "photography".
I've read your support policy and I've been aware that your support service won't cover the customization field. So I edit it myself to fix the issue I mentioned above. But actually I think for the issue I mentioned above, your support service should have been responsible for that since the problem happens on the original code. If I don't meet that issue, I wouldn't edit the code. If I didn't edit the code, the following problem wouldn't happen, and I would not submit a ticket here.
Anyway, if you are not going to help me on the topic I submit, I hope you consider to help me on the issue happening on the original code. The problem happens because of this:
/* Menu Trigger Icon - Narrow the lines */
.menu-bar .ham:after {
top: 6px !important;
}
If I disable this code, the close button looks fine when it's a "^". But it doesn't look fine when it's an "x". If I leave the code there, the close button does NOT look fine when it's a "^". But it looks fine when it's an "x". Could you help me fix it?
Hi there,
Please check the attached video. The issue is about the "close" button on the menu. It looks good when it is a "^". But it isn't correctly displayed in a small size of window or via mobile phone when it is a "x". Hope you understand what I am talking about...I mean when the close button becomes an "x", it should look balanced. Now it doesn't look balanced. The left part of the "x" looks smaller than the right part. How to fix it? Thanks.
Yihan
Hi Yihan,
This is happening because you have edited CSS of this area. This CSS code on your Custom CSS is causing the issue.
.menu-bar.exit .ham:before {
top: -10px !important;
}
P.S : Please be aware as by doing customization if something happens like miss-editing files the responsibility is yours and we wont support you on finding the problem, as we are only guiding you how to get the results you need.
-----------17:14------------
Ok. I know how to fix it.
Hope you can fix the issue in your original Photography demo. The graphic close button (not the text one) looks fine when the user chooses the full screen menu (like what the demo shows). However, if the user chooses the top menu (like what I did), the "^" close button on a large window and the "x" close button on a smaller window can't be properly displayed at the same time.
(Maybe other people are not as picky as I am...Maybe other people won't choose top menu in this demo...)
-----------16:14------------
Hi Ylli,
I did NOT edit the code you pasted. It was an original piece of code in your "/* Custom modification from Laborator only for this Demo - START */" area. What I did edit was this:
/* Menu Trigger Icon - Narrow the lines */ /* .menu-bar .ham:after { top: 6px !important; } */The only thing I did to the above code was disable it because if I didn't do that, my page would be like the attached screenshot (close button.png). If you are doubt of this, you can check your original code of the demo theme "photography".
I've read your support policy and I've been aware that your support service won't cover the customization field. So I edit it myself to fix the issue I mentioned above. But actually I think for the issue I mentioned above, your support service should have been responsible for that since the problem happens on the original code. If I don't meet that issue, I wouldn't edit the code. If I didn't edit the code, the following problem wouldn't happen, and I would not submit a ticket here.
Anyway, if you are not going to help me on the topic I submit, I hope you consider to help me on the issue happening on the original code. The problem happens because of this:
/* Menu Trigger Icon - Narrow the lines */ .menu-bar .ham:after { top: 6px !important; }If I disable this code, the close button looks fine when it's a "^". But it doesn't look fine when it's an "x". If I leave the code there, the close button does NOT look fine when it's a "^". But it looks fine when it's an "x". Could you help me fix it?
Thank you.
YIhan