-
Posts
-
Kriesi support,
website: http://www.bardactest.dreamhosters.com
First off thanks for your awesome theme and amazing tech help. I am not sure what the best solution for this is, but whenever I decrease my browser screen size, the main menu and logo clash with each other, allowing the menu text to overlap the logo. In addition, the menu items on the far right get pushed down below the header.
What would be the best way around this? It just looks messy. I guess if anything, I’d rather everything get smaller as the page size decreases or the logo disappears to give more room for the menu. But, if that is not a good way to go about fixing this, please let me know what your best solution would be!
One more question – when I look at the site from a mobile browser, the secondary menu takes up a lot of space. Any way to reduce this or make it look a bit more tidy?
Thanks again and hopefully I won’t have to bug you too much more!
-JulianHey Julian!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 989px) { .main_menu, #header_main_alternate{display:none;} .container #advanced_menu_toggle, #advanced_menu_hide{display:block;} #mobile-advanced{display:block;} } @media only screen and (max-width: 480px) { #header_meta .container { width: 100% !important; } }Cheers!
JosueJosue!
That’s awesome – it is certainly a hell of a lot better than it was originally. There is still one resolution when decreasing the page size that has the logo/menu overlap. Any way to fix that? Aside from that, it is perfect!
In regards to the mobile secondary menu – spot on!
– Julian
Hi Julian!
Try changing this part:
@media only screen and (max-width: 989px) {To:
@media only screen and (max-width: 1139px) {Best regards,
JosueAlmost there! The menu and logo no longer clash, however for some reason you can see the mobile browser menu on the right side of the page at some sizes (when viewing on desktop browser).
Please see this link to see what I’m talking about: http://i.imgur.com/YlP9Emm.png
Thanks, so close!
Try adjusting this value in the code until you get the desired result:
@media only screen and (max-width: 1139px) {That means that the mobile menu will appear when the window size is 1139px width.
Cheers!
JosueAlright, that makes sense. I think I’ve worked out a solution and have moved the “Home” tab up to the secondary menu in order to keep the site on the desktop version for as long as possible.
Speaking of the secondary menu/extra info, is there any way to make them center earlier on when decreasing page size? Right now, when decreasing, there is a certain window size where the secondary menu gets pushed above the extra info section. Here, the extra info is aligned left and the secondary is aligned right. Is there any way to center both secondary menu and the extra info at this point? As the page gets even smaller, they eventually center, it just takes too long to do so.
Thanks!
Hi!
Change the whole code to:
@media only screen and (max-width: 990px) { .main_menu, #header_main_alternate{ display: none; } .container #advanced_menu_toggle, #advanced_menu_hide{ display: block; } #mobile-advanced{ display: block; } #header_meta .container{ width: 95%; margin: 0px 20px; } } @media only screen and (max-width: 480px) { #header_meta .container { width: 100% !important; } }Cheers!
JosueSoooooooo close! Almost there Josue. The second menu no longer squishes and looks perfect when decreasing page size. The only problem is that now, some of the text on the right side is cut off when viewed on a mobile browser/at the smallest size. Any fix to this?
Thanks so much – you’ve been awesome and a great help!
Try with this:
/* Mobile menu toggle */ @media only screen and (max-width: 990px) { .main_menu, #header_main_alternate{ display: none; } .container #advanced_menu_toggle, #advanced_menu_hide{ display: block; } #mobile-advanced{ display: block; } } /* Header Meta adjustments */ @media only screen and (min-width: 480px) and (max-width: 990px) { #header_meta .container{ width: 95%; margin: 0px 20px; } } @media only screen and (max-width: 480px) { #header_meta .container { width: 100% !important; } }Cheers!
JosuePERFECT! Thanks so much Josue for your continued support. Hopefully you won’t hear from me for a while (although I cannot make any promises :)
– JulianHey Josue,
Something I noticed when changing the page size. As you can see below the header, I have four main product groups in circle icons, each taking up 1/4 of the screen size. When changing the screen size, at a certain point, it pushes two down to another row.
The issue is that the top two images adopt a much larger size, while the bottom two retain their small size. Would it be possible to have all four icons match in size? Either big or small is fine, but I would like them to be the same size.
Thanks!
Yeah…I am not sure what happened. I click update and two of the products were deleted! Of course that would happen when you try to look at it. They are back now, but still resize as I described earlier. Thanks!
Hi,
Can you please create me an administrator account? post it here as a private reply.
Regards,
JosueI couldn’t really test anything, there is something going on with a caching functionality you have enabled there. Anyhow, the issue with the 1/4 columns is that the third one is getting wrapped by an em tag, i think this may be related to the code block there.
You can also enable this to help you debug that:
http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/Regards,
JosueYou were right! There was an “align:none” tag on the third image that did not need to be there. I took it out and things worked great! I had one in the fourth one as well, but after taking it out, that image did not resize properly.
So, I took it out of the third image, left it in the fourth image, and every thing is good to go!
Thanks so much for helping me today, I know I’ve been a pain. If I could digitally buy you a beer, I would!
– Julian
Great, let me know if you have any additional questions. We appreciate if you take the time to rate Enfold in Themeforest, you can do that in your Downloads page :)
- You must be logged in to reply to this topic.