Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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; }}

    #270170

    Hi munck!

    The url above isn’t working for me. Can you check it again so we can see whats going on live?

    Best regards,
    Devin

    #270179
    #270282

    Hey!

    Make sure you don’t have this option selected in the menu items:

    Regards,
    Josue

    #270669

    Thanks, 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.

    #270716

    Hey!

    Try adding this code to the Quick CSS:

    .av-main-nav ul {
        width: 230px;
    }

    Cheers! 
    Josue

    #270725

    Thanks. This works perfectly.

    #270731

    You are welcome, glad we could help :)

    Regards,
    Josue

    #271314

    After 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.

    #271376

    Change the code to:

    @media only screen and (min-width: 1024px) {
    .av-main-nav ul {
        width: 230px;
    }
    }

    Best regards,
    Josue

    #271392

    When 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

    #271647

    Hey!

    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,
    Ismael

    #271667

    Hello

    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.

    #271758

    Hey!

    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!
    Yigit

    #271781

    The 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

    #273505

    Hi,

    I checked your website and it appears the menu issue on 1024px width is solved:

    Best regards,
    Josue

    #273506

    Hello

    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,

Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Menu width’ is closed to new replies.