-
Posts
-
Hello,
This is the first website I’ve designed using Enfold (2nd overall) and I’m really enjoying the Theme. I have decided to use it for most of my other projects as well, so thank you for creating such a user-friendly Theme for a n00b.
I have almost completed designing the website (Restuarant Theme) for a client but am I having some responsive issues and how elements are displayed on mobile, and hope someone will be able to help me. I apologize for the rather long list in advance.
WordPress and Theme (4.0.7) are up-to-date. I have also added a lot to Quick CSS based on the great support given to others, so I’m guessing since I’m new to designing websites that some of this custom CSS is conflicting with some settings. Login credentials and screenshots are below.
Item #1:
All of the background images (either in a Grid Row or Color Section) that I have set to display on mobile do not display on mobile. I have been unable to find a solution that worked for this. Several pages have this problem (i.e. Home, Barrel Room, Gatherings) so it isn’t confined to a specific page. I tried inserting Image Media Elements but they never displayed properly within the page layouts, so I reverted back to using background images.Item #2:
I have checked the “Hide Mobile Menu Submenu Items” box in the Header section of Theme Options to reduce the size of the mobile menu when it is displayed, but doing so has created a few issues:Item #2a
There is a extra whitespace above “Our Food” (this space also appears above “Brewery” when the Hide Submenu box is unchecked). This space includes a larger left border as seen on the screenshot. How can I remove these from the mobile menu?Item #2b:
Since I checked the “Hide Submenu Items” box to reduce the size of the mobile menu, I see that a couple of pages, “Gatherings” and “Our Story”, can only be touched to display sub pages under their headings. How can I allow these pages to be linked when someone touches them while still allow for their sub pages to be displayed? Obviously one solution would be to uncheck the “Hode Submenu Items” box but I would prefer to have a smaller menu display…but if this is the best solution, that will be fine.Item #2c:
When “Our Brews” is touched, how can I remove “Brewery” from the mobile menu? “Brewery” is not a page and is a only a heading in the desktop mega menu. I would prefer to only show “Our Brews” and then the subpages under “Brewery”.Item 2d:
When a heading is touched and the subpages appear, an extra ‘tab’ appears below the last menu item, in this case “Home”. How can the mobile menu always end at “Home”?Item #3:
Within the 3rd footer widget, I created a button using shortcode for a newsletter signup (links to external signup form). On desktop the button is aligned ‘right’ but I would like to align the button on mobile and tablets to ‘center’. How do I go about doing that?Thank you for your time and assistance. I greatly appreciate it.
Hey eskitaco,
I
ve checked your site and the site doesnt use our theme, is it correct?Best regards,
John TorvikHi John,
Yes, the website is using a child theme of Enfold Restaurant. You can confirm by viewing:
Appearance > Themes
Appearance > Editor
Appearance > Theme OptionsHi,
I tried logging in but the default /wp-admin and /wp-login.php are not working, on what URL can we log in?
Best regards,
RikardHello Rikard,
I apologize for the inconvenience as I thought I correctly added the login credentials in my original post but I can now see I did not. Please see private content for correct logins. Again, I apologize.
Hi,
We are sorry for the late reply! For future reference, please post each of your questions separately otherwise threads gets really complicated :)
#2a – Issue is caused by following custom code
.avia_mega_div { border-bottom: 1px solid #6e6e6e; border-left: 1px solid #6e6e6e; border-right: 1px solid #6e6e6e; }I changed it to following one
@media only screen and (min-width: 768px) { .avia_mega_div { border-bottom:1px solid #6e6e6e; border-left:1px solid #6e6e6e; border-right:1px solid #6e6e6e; }}#2c – Please refer to this post – https://kriesi.at/support/topic/change-mobile-menu-2/#post-784018
#2d – I added following code to Quick CSS
.avia_transform3d .show_mobile_menu #mobile-advanced { min-height: 320px!important; }#3 – I added following code to Quick CSS
@media only screen and (max-width: 480px) { #footer #text-8 .avia-button-wrap { float: none; width: 385px; }}Please check out these and then elaborate on other issues so we can make sure to provide you accurate solutions :)
Best regards,
YigitHello Yigit,
Thank you very much for your time and assistance and for letting me know about separately posting my questions in the future. I figured this would make things easier but that’s not the case. I shall do that in the future. In regards to these questions, please see below:
Question #1 – Will open up and re-post in a new ticket
Question #2a – Fixed!
Question #2b – Will open up and re-post in a new ticket
Question #2c – I had already created a mobile menu just in case, so when I added the code you referenced in the other thread to the child’s function.php file, nothing changed. I still have the desktop menu for mobile. I’m not very proficient with coding so perhaps I need to add something else?
Questions #2d – Fixed!
Question #3 – The button does not align to center on mobile. I tried editing the code but that too didn’t work, so I reverted it back to your original code. Any suggestions?Thank you again. I look forward to resolving #2c and #3.
Cheers!
eski
Hi,
Thank you for your understanding :)
#2c – I have edited menu names in Appearance > Menus and confirmed that it works on my iphone. Attached a screenshot in private content field. Please note that you would only see mobile menu on mobile devices and not by resizing browser window.
#3 – I changed the code to following one in Quick CSS field
#footer #text-8 .avia-button-wrap { width: 100%; } @media only screen and (min-width: 768px) { #footer #text-8 .avia-button-wrap { text-align: right; } .right-aligned { text-align: right; } #footer .flex_column:nth-child(3) .widgettitle { text-align: right; }} @media only screen and (max-width: 767px) { #footer .widget { text-align: center !important; }}Please review your website :)
Best regards,
YigitHello Yigit,
#2c – You are correct that the menu looks like the screenshot you posted. That is not the issue however. The issues are as follows:
1. Although a heading on the mobile menu, “Gatherings” is also a page that I would like to display. However when I tap “Gatherings”, the sub-menu appears (“Request Event”). How can I get “Gatherings” to be clickable so the Gatherings page loads and can be viewed?
2. The same goes for “Our Story”. How can I make this page load on mobile so it can be viewed?
3. Recent css changes also changed the sub-menu font under “Our Brews”. How can I make them consistent with the mobile menu font? This change occurred on my Samsung Galaxy S7.
4. Also, view “Our Craft” on mobile device. Several headings reverted back to left align (“Our Craft and The Perfect Pint). I added css code to make all headings center on mobile, but for whatever reason, these two (that I found so far) reverted back to left align.#3 – Fixed! Thank you!!
Hi,
Thank you for the update.
1-2.) I’m sorry but this is the default behaviour of the mobile menu. Parent items with submenu are not going to be accessible. You need to disable the Header > Mobile Menu > Hide Mobile Menu Submenu Items option.
3.) The following css modification altered the mobile menu font.
body { font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; }Add this code to override the modification.
#mobile-advanced a, #mobile-advanced .mega_menu_title { font-size: 15px; }4.) I can’t find the “Our Craft” page. Did you remove it?
Best regards,
IsmaelHello Ismael,
Thanks for the help.
1-2 – I disabled “Hide Mobile Menu Submenu”…not a problem having the larger mobile menu…however, when I click “Our Brews” (which isn’t a page, just a heading) the burger menu icon disappears. I have to refresh the page on mobile phone to bring the menu icon back. Is this standard or can something be done so the icon doesn’t disappear?
P.S. I just noticed the drop-down menu actually slides to the right and reduces in size. You have to scroll the page left to right to see the smaller menu on a mobile phone (Samsung Galaxy S7). Again, is this normal?
3 – Hmmmm, not sure where that css modification is located, I couldn’t find it, but when I added the override code, nothing changed on the mobile menu. It still looks the same.
4 – The page was never removed but now that I have a full menu, it can be viewed under “Our Brews”. The headings that appear to be left aligned (want them to be center) are Our Craft, The Cold Side and The Perfect Pint. All other headings appear to be center on the page.
Thank you again!
Hi,
If possible, please create a single thread or post for each inquiry. It’ll be easier for every moderators to focus on one issue so you’ll get a faster response.
Best regards,
IsmaelThis new issue resulted from an issue in this topic, but I started a new one per your recommendation. There are still a couple of outstanding issues in this topic before it can be closed however. Please see June 1 post.
Thanks!
Hi,
Please refrain from using repetitive css media queries in the Quick CSS field. We removed duplicated or unnecessary css media queries and cleaned up the css modifications. The mobile menu is fixed. And yes, clicking on an anchor or custom link such as the “Our Brews” menu items will close the mobile menu.
Best regards,
IsmaelGreetings,
Thank you for your assistance. I greatly appreciate the time and effort. Please close the ticket.
- The topic ‘Responsive Issues: Mobile Menu + Background Images’ is closed to new replies.