-
AuthorPosts
-
February 11, 2017 at 3:14 am #745674
Hey,
1) I’ve managed to get the footer menu centered and where I want it to be positioned. However when I shrink the browser window, it disappears completely.
Here’s my code in the Quick CSS:
.big-preview {display:none;} .main_color strong {color:#666666;} .sidebar {padding-top:10px;} @media only screen and (max-width: 1140px) { .av-main-nav > li > a { padding: 0 7px; }} @media only screen and (max-width: 480px) { .responsive .logo a, .responsive .logo img { max-width: 90%; height: auto !important; }} .main_color strong {color:#111111;} .post-title .entry-title {font-size:26px;} .entry-content-wrapper .post-title {font-size: 26px !important;} #socket .sub_menu_socket div {overflow:auto;width: 750px; margin: 0px auto;} #socket .sub_menu_socket {float:none;margin-top:35px;}
How do I get it to show the menu items centered over multiple lines?
2) Also, my main top menu overlaps my logo when I shrink the browser window. How do I turn it into the mobile menu sooner?
Thanks!
– James.- This topic was modified 7 years, 9 months ago by jamesf1989.
February 13, 2017 at 1:39 am #746080Can anyone help?
Thanks,
– James.February 13, 2017 at 5:55 am #746115Hi,
Could you post a link to the site in question so that we can take a closer look please?
Best regards,
RikardFebruary 13, 2017 at 2:04 pm #746393Sure – it’s at http://www.digitalprosperity.com .
Thanks!
– James.February 15, 2017 at 5:12 am #747258Hi James,
1. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) and (min-width: 480px) { .responsive #socket .sub_menu_socket { display: block; } }
2. Set your mobile menu to be displayed for tablets as well under Enfold->Header->Mobile Menu
Best regards,
RikardFebruary 16, 2017 at 2:39 pm #747966Thanks for that Rikard! The top menu is now fixed, but the footer menu still disappears and doesn’t wrap to new lines when the window is resized. See here: http://www.digitalprosperity.com .
Any help?
Thanks,
– James.February 18, 2017 at 1:50 am #748732Any help?
Thanks,
– James.February 20, 2017 at 10:02 pm #749614Hi,
Sorry for the late reply!
Please refer to this post – http://kriesi.at/documentation/enfold/display-footer-menu-scroll-to-top-button-on-mobile/
Best regards,
YigitFebruary 20, 2017 at 10:06 pm #749620Thanks – but the footer still doesn’t wrap the menu items onto a new line when the window is resized. Any help with that?
Thanks,
– James.February 20, 2017 at 10:14 pm #749622Hey!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
@media only screen and (max-width: 768px) { #socket .sub_menu_socket div { width: auto; }}
Cheers!
YigitFebruary 20, 2017 at 10:29 pm #749632Thanks Yigit, but this didn’t do anything. See the footer here: https://www.digitalprosperity.com .
Thanks,
– James.February 20, 2017 at 10:32 pm #749634Hey!
Can you please create a temporary admin login and post it here privately so we can look into it?
Regards,
YigitFebruary 20, 2017 at 11:24 pm #749658Sure! Please see the temporary login details in the private content section of this reply.
Thanks,
– James.February 21, 2017 at 12:18 pm #749892Hi,
I made a slight change on the code. Please flush browser cache and review your website
Best regards,
YigitFebruary 21, 2017 at 3:53 pm #750017Thanks but now that’s created another problem… There’s a scrollbar for the menu items, it’s all left aligned when I want it all to be centered and the line height needs to be bigger so the links don’t overlap. How would we accomplish this?
Thanks!
– James.February 26, 2017 at 2:16 pm #751936Hi,
I do not see any scrollbar for the menu items.
To center align menu items please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-widht:767px) { #socket .sub_menu_socket li { float: none!important; } #socket .menu { text-align: center; } }
It should look similar to
Best regards,
Vinay- This reply was modified 7 years, 9 months ago by Vinay.
February 26, 2017 at 3:31 pm #751955Thanks for this Vinay, although after adding this code, the menu items are still left aligned. See here:
They’re also wrapped around the social images.
Anything else I should add to fix this?
Thanks,
– James.February 26, 2017 at 4:40 pm #751969Hi,
I have added the code in media query to affect only on mobile scree and confirm that the code works fine. You may not see the changes until the cached files are cleared in your browser.
Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.
Best regards,
VinayFebruary 26, 2017 at 7:23 pm #752001Thanks for this Vinay, although that’s still not fixed it 100% and also introduced another problem.
I’ve recorded a quick video to show you what I mean (make sure your sound is on): https://youtu.be/3vTlp9EUjkA.
(Or alternatively how to center align everything in the footer just for the mobile view, as that way it won’t overlap.)
Thanks!
– James.- This reply was modified 7 years, 9 months ago by jamesf1989.
March 4, 2017 at 6:56 pm #755658Any help? As it’s been almost 6 days now…
Thanks,
– James.March 9, 2017 at 7:35 pm #758501Hey!
I loaded the web site with my iOS And I can see the menu proper, like how Vinay said it is working.
You most probably under cache.Regards,
BasilisMarch 9, 2017 at 8:39 pm #758537I’m viewing the website in Incognito mode, meaning it doesn’t save a cache or any temporary files.
Did you watch the video I recorded for you, which explains what I’m referring to? It’s at https://youtu.be/3vTlp9EUjkA . As I noticed you didn’t answer the other question in there too, about the articles section.
Thanks,
– James.March 10, 2017 at 7:18 pm #759089Hey!
One by one the issues, else we can not solve them properly.
@media only screen and (max-widht:767px) { .responsive #top #wrap_all .container { text-align: center !important; } }
Let us know if that one works out as should.
Thanks a lotRegards,
BasilisMarch 10, 2017 at 9:30 pm #759132Ok I’ve just done that (changing the typo of “widht” to “width”). What’s next?
Thanks,
– James.March 12, 2017 at 9:36 pm #759709Hi!
Actually, as I was on the same topic I took the code from Vinay,
So@media only screen and (max-width:767px) { #socket .sub_menu_socket li { float: none!important; } #socket .menu { text-align: center; } }
I fixed his type also, can u try again?
Regards,
BasilisMarch 13, 2017 at 12:53 am #759762Ok I just did that – thanks. What’s next?
Thanks,
– James.March 13, 2017 at 8:56 pm #760241Hey!
And what is the result?
What is working, what is not, what is missing?
Would be perfect to help us – help you.Cheers!
BasilisMarch 13, 2017 at 10:14 pm #760286Everything looks pretty similar to what I showed you in the video…
1) The articles grid below “Check Out Our Latest Articles” at https://www.digitalprosperity.com still isn’t showing on the user’s first page load (meaning they have to refresh the page to see it).
2) The bottom menu still has a vertical scrollbar when the window is resized, and also the two top links get pushed to the side when the window is resized even smaller.
Can we get these fixed please?
Thanks,
– James.March 14, 2017 at 5:26 pm #760870Hey!
1. The latest articles load when user scrolls, so they do load properly, but they might not be triggered so fast you want.
2. I do not see the code we asked, you have not entered it at all.Also, please:
1. Please disable cache most probably the loading issue will be fixed properly
2. Updated to latest Enfold VersionBest regards,
Basilis- This reply was modified 7 years, 8 months ago by Basilis.
March 14, 2017 at 6:10 pm #760896Hey Basilis,
I’ve updated the theme to the latest version AND turned off the cache plugin, and when seeing the home page for the first time in an incognito window (i.e. with no cache), the articles area still doesn’t show at all. It’s not a matter of it being slow, it’s that it doesn’t display however long I wait and however many times I scroll past it. See for yourself in an incognito window here: https://www.digitalprosperity.com .
I also did enter the code, but maybe the cache plugin was stopping it from showing up for you. Please check again.
Thanks,
– James. -
AuthorPosts
- You must be logged in to reply to this topic.