Tagged: menu
-
AuthorPosts
-
May 26, 2014 at 2:10 pm #270100
After renaming some menu items, my menu is now horizontal instead of vertical.
I have searched for a Quick CSS setting to specify a spacious enough width, so the menu will stay vertical.
Can you help?Thanks in advance.
Site: http://www.aktivfamiliferie.dk
Quick CSS under Styling:
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
height: auto !important; }}May 26, 2014 at 5:42 pm #270170Hi munck!
The url above isn’t working for me. Can you check it again so we can see whats going on live?
Best regards,
DevinMay 26, 2014 at 5:56 pm #270179Typo, sorry:
http://www.aktivfamilieferie.dkMay 26, 2014 at 11:04 pm #270282Hey!
Make sure you don’t have this option selected in the menu items:
Regards,
JosueMay 27, 2014 at 6:28 pm #270669Thanks, that solved the horizontal problem.
How do I force the name of the menu items to be on the same line, instead of expanding?Thanks in advance.
May 27, 2014 at 7:08 pm #270716Hey!
Try adding this code to the Quick CSS:
.av-main-nav ul { width: 230px; }
Cheers!
JosueMay 27, 2014 at 7:17 pm #270725Thanks. This works perfectly.
May 27, 2014 at 7:19 pm #270731You are welcome, glad we could help :)
Regards,
JosueMay 28, 2014 at 6:11 pm #271314After adding this, the menu is now not displayed correctly on for example an iPad2 (landscape mode):
https://dl.dropboxusercontent.com/u/4174765/image.png
Any ideas?Thanks in advance.
May 28, 2014 at 7:22 pm #271376Change the code to:
@media only screen and (min-width: 1024px) { .av-main-nav ul { width: 230px; } }
Best regards,
JosueMay 28, 2014 at 7:49 pm #271392When using an iphone5, the logo is correctly scaled using only this: (provided by you guys in an earlier support case)
@media only screen and (max-width: 767px) {
.responsive .logo a, .responsive .logo img {
height: auto !important; }}However, on iPad2 (and some desktops if small enough), the first menu item: “Kontakt os” is mixed with the logo as previously shown here: https://dl.dropboxusercontent.com/u/4174765/image.png
Using this:
@media only screen and (min-width: 1024px) {
.av-main-nav ul {
width: 230px;
}
}Correctly puts all menu items on one line, instead of breaking them up into two lines. So you could say that the above is working as planned, but another problem is the menu item being mixed up with the logo. I’m sorry for any inconvenience.
Would it help if you got a WP login?Thanks
May 29, 2014 at 6:55 am #271647Hey!
Thank you for the info.
Please go to Enfold > Header Layout > Mobile Menu > Header Mobile Menu activation. Select the second option to force the theme to activate the mobile menu earlier. Add this on Quick CSS or custom.css:
@media only screen and (max-width: 1024px) { .av-main-nav > li > a { padding: 0 10px; font-size: 11px; } }
Best regards,
IsmaelMay 29, 2014 at 8:25 am #271667Hello
Thank you. 2 issues remain:
1. On iPhone5, the logo is scaled/stretched.
2. The menu items are no longer on the same line. The following did the trick:.av-main-nav ul { width: 230px; }
Can it be combined with your solution?
Thanks in advance.
May 29, 2014 at 1:21 pm #271758Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 480px) { .responsive .logo a, .responsive .logo img { max-width: 85%; height: auto !important; }}
Cheers!
YigitMay 29, 2014 at 1:49 pm #271781The menu items are unfortunately still broken into two lines
My Quick CSS:
@media only screen and (max-width: 1024px) { .av-main-nav > li > a { padding: 0 10px; font-size: 11px; } } @media only screen and (max-width: 480px) { .responsive .logo a, .responsive .logo img { max-width: 85%; height: auto !important; }}
Can I combine the .av-main-nav ul with .responsive . logo?
Thanks
June 2, 2014 at 9:36 pm #273505Hi,
I checked your website and it appears the menu issue on 1024px width is solved:
Best regards,
JosueJune 2, 2014 at 9:38 pm #273506Hello
I changed the name of the menu items to fit. I could not get the quick css code from earlier in this thread to work.
But thanks for getting back to me. You can close this ticket.Regards,
-
AuthorPosts
- The topic ‘Menu width’ is closed to new replies.