-
Posts
-
Hi all,
using Enfold 3.2.3, I’m currently building a test site. Everything looks good on Desktop-PC (Firefox under Windows or Linux), but the header is a mess on the iPad (in portrait mode):
1. The top bar’s text at the left and the submenu items at the right overlap (expected: one or both of them should become hidden/invisible).
2. The site logo and the main menu items overlap (expected: the main menu should collapse to the small button).
3. The title text in the breadcrumbs bar is not vertically centered.How please can these problems be fixed?
Many thanks and best regards,
CarstenHey CarstenF!
Each of those errors can be fixed using css (particularly media queries).
May we have temporary access to your website so we can provide you with the exact css to do so?
Cheers!
DakeHi Dake,
link to the website is in the private data below.
(You don’t need access to the Admin area, do you? Otherwise, please let me know.)As also said in my other recent request:
I very much appreciate your help, but shouldn’t these issues be addressed in the Enfold theme itself, that is, for everyone?Best regards,
CarstenPS: Also as said in my other recent request: I’m aware that Enfold is focused on configuring the via the WordPress Admin area, but wouldn’t it be much easier in cases like this to have a well-documented, user-modifyable LESS or SCSS source file?
Hey!
1.) Add this in the Quick CSS field:
@media only screen and (max-width: 989px) { .responsive .phone-info { float: none; width: 100%; clear: both; text-align: center; }}2.) You can set the Enfold > Header > Mobile Menu > Header Mobile Menu activation to the second option. It will force the mobile menu to show earlier.
3.) If you want to adjust the vertical position of the title, use this:
.title_container .main-title { top: 2px; }Adjust the top position value if necessary.
Cheers!
IsmaelHi Ismael,
thanks for your reply!
Solution 2.) works very well.
Solution 1.) however seems to work at width of 989px, but if you try this with e.g. Firefox’s screen size test (Ctrl + Shift + M), you can see that this is activated at 989px, but then the “normal” Enfold CSS kicks in at 768px, again changing the result.
Please try yourself, observe the first change at 989px and the second change at 768px!
I think the proper solution would be to increase the original 768px setting to 989px, very much analogously to solution 2.) — but how do I do this please?
Good news is that it seems as if this will naturally fix issue 3) as well.
Best regards,
CarstenHey!
1.) To make the top bar text hidden on iPad use this code:
@media only screen and (max-width: 989px) { .phone-info.with_nav { display: none; }}Best regards,
AndyHi Andy,
many thanks for your efforts, but I didn’t want to hide it.
Instead, please have a look at the image mentioned below: The topmost menu and phone-info look very nice! This is because the width is below 768px.
How can I have the same earlier, that is, at 989px and below?
I already had a look at layout.css starting at line 3283, but it seems that there are also many other elements that are not related to this portion of the header, so I’m unsure which ones are needed. (All those starting at /*header*/ at line 3309 until /*related images*/ ?)
In other words, what Enfold > Header > Mobile Menu > Header Mobile Menu does for the main menu is what I’m looking for for the topmost bar…
Hey!
not sure if I fully understand. Do you your meta info in header look the same for example on iPad portrait screen size? if yes use a code like this:
@media only screen and (max-device-width: 989px) { .av_secondary_right .sub_menu { right: 200px; } .av_phone_active_left .phone-info { margin-left: 60px; }}and adjust as needed.
Cheers!
AndyHi Andy,
thanks for your reply!Let me re-try explaining the problem and desired solution:
The header meta info (phone info and topmost menu) is fine on both
- desktop (large size screen >= 990px; phone info is left aligned, top menu is right aligned)
- e.g. iPhone (small size screen < 768px; both phone info and menu are centered, stacked above each other)
The problem is the “mid” screen sizes, 768px to 990px, e.g. iPad in portrait mode. In this case, the (left aligned, long long long) phone info overlaps the right aligned menu in a quite ugly fashion. You can see this in the screenshot attached to my very first post above, problem “1)”.
It seems to me that a good solution to this problem would be to have “mid size” screens show the meta info centered and stacked above each other, just like “small size” screens.
(In other words, what Enfold > Header > Mobile Menu > Header Mobile Menu does for the main menu is what I’m looking for for the meta info.)
(I already tried it myself, having a look at layout.css starting at line 3283, but it seems that there are also many other elements that are not related to this portion of the header, so I’m unsure which ones are needed. (All those starting at /*header*/ at line 3309 until /*related images*/ ?))
Best regards,
CarstenHey!
in iPad portrait mode it looks like this for me:
Which looks fine to me, because nothing gets overlapped.
However, I can see in iPad landscape mode that your menu overlaps the logo. For this you can try to move the logo more to the left:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { strong.logo { left: -42px; }}After you put this code into Quick CSS it should look like this:
Which seems totally fine to me.
Please use mockups/screenshots showing what you want to achieve, if you still need help.
Best regards,
AndyHI Andy,
please consider the image linked below. Therein, especially note item “1.” (in the image I mis-placed left and right, so the correct text reads: “1. Overlap of left text and right menu“. — This is the problem!
Then, please re-read my previous reply, where I have described the same problem in great detail, and my thoughts for a solution.
(Note that item “2.” has been solved already (I will reduce main menu items later), and that item “3.” is a subsequent problem of problem “1.”, so this too is solved by solving item “1.”. I really need a solution for item “1.” as shown in the image and as described in my previous post.)
Please help!
Best regards,
CarstenHey!
ah, I think now I get what you mean.
So you don’t want it to look like this?
If not I don’t understand why you don’t use the code from this thread I already provided to you. Because using this code you could achieve a look like this:
If you want you could even add a margin-top to it to give it a little bit more space:
@media only screen and (max-device-width: 989px) { .av_secondary_right .sub_menu { right: 200px; } .av_phone_active_left .phone-info { margin-left: 60px; margin-top: 10px; }}However, you would make it much easier for us to help if you provide us a mockup showing the things you want to achieve. Use imgur.com or dropbox.
Best regards,
AndyHi Andy,
I have really described the problem and the desired solution several times now.
Please see below, where it is described again.The code that you suggested does unfortunately not work — I’ve currently added it to enfold-child/style.css, and you can see it immediately yourself if you use Firefox’s “Responsive Design View” that is activated with Ctrl+Shift+M (for more details, see https://developer.mozilla.org/en/docs/Tools/Responsive_Design_View ).
The code adds some margin, but that works for a single width only, nothing else. Also, it does not fix item “3.”.My above suggested solution however, is universal.
Please help!
Best regards,
CarstenHi!
this code only works on a different device and not with a different browser size on your desktop. So please try it with your iPad and check it. It’s simply not true that it works for a single width only, because it will work for every device size until 989px. This is the way how media queries work. If you want a solution which might work on different browser sizes on your desktop as well then try max-width instead of max-device-width:
@media only screen and (max-width: 989px) { .av_secondary_right .sub_menu { right: 200px; } .av_phone_active_left .phone-info { margin-left: 60px; margin-top: 10px; }}Don’t forget to clear browser cache.
Item 3: Change position of title for iPad portrait mode with this code:
@media only screen and (max-device-width: 989px) { h1.main-title.entry-title { top: 10px; }}Best regards,
AndyHi Andy,
with your suggested CSS applied, please consider this:
As you can see this does not work, as explained and described numerous times above.
Please help!
Best regards,
CarstenHey!
please adjust the code I already provided to you numerous of times before by yourself. We don’t have the time to customize everything for you. If you can’t do it yourself and are searching for someone for this job then you can hire a freelancer for example here: http://kriesi.at/contact/customization
Or are you saying that the code is simply not working? because it does work for me. Did you clear browser cache and hard refreshed your website a few times? please don’t check on desktop device, you need to check it on the real specific device (e.g. iPad).
As I already told you, you need to adjust the code by yourself. Play around a little bit with different values until it fits for you.
Put the code into Quick CSS field and provide us admin access so we can check it. You can post login details here as private reply.Regards,
Andy
- You must be logged in to reply to this topic.