Tagged: 

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • October 11, 2016 at 9:34 pm #698077
    tremblayly

    Hi

    I’ve create a fullwidth menu because my main menu was too large. Now from what I gather I have to add this menu to all of my pages. The problem I face is that not all of my pages use fullwidth layout, so my pages get messed up. Is there another alternative to my problem? Is it possible to use the fullwidth menu as part of the header? Or perhaps have a main menu with two lines?

    My website is not yet public, so you can find credentials below to access the site.

    Thank you
    Lyse

    October 12, 2016 at 3:21 pm #698337
    Yigit

    Hey tremblayly,

    Can you please post the link to your page where you are using a boxed layout so we can see the issue?

    Please refer to this thread – https://kriesi.at/support/topic/word-wrap-in-menu-or-have-the-menu-on-two-lines/#post-283385

    Best regards,
    Yigit

    October 12, 2016 at 9:37 pm #698535
    tremblayly

    Hi Yigit,

    I am not using a boxed layout, I use a fullwidth layout for my site.

    Thank you for the link. It was extremely helpful. I have recreated my main menu and got rid of the fullwidth menu. My only issue is with the positioning of the second line of the menu item, it does not display well in responsive mode. I tried the option suggested in the linked ticket. to use:
    position: inherit!important;
    although it works well for the responsive screen, the my main menu positioning no longer displays correctly. I kept the positioning as relative until you can help me find a solution.

    I have put the access credentials in the private area so you can have a look.

    Thanks
    Lyse

    October 17, 2016 at 1:39 pm #699975
    Andy

    Hi,

    viewing access does not work for me. Please check.

    Best regards,
    Andy

    October 17, 2016 at 6:49 pm #700183
    tremblayly

    Hi Andy,

    You had problems accessing this site in the past as well. I have other tickets opened with support and they seem to get in no problem.

    I copied and pasted the login credentials in the private area again. You may have to enter it more than once….

    WP Engine support checked the access logs and report no problems.

    Thanks
    Lyse

    October 19, 2016 at 8:20 am #701047
    Ismael

    Hi,

    Thank you for the info.

    Please add this in the Quick CSS field in order to fix menu items with multiple lines.

    @media only screen and (max-width: 989px) {
.avia-menu-text > * {
    display: inline-block !important;
    bottom: auto !important;
}

.avia-menu-text > .menu-break {
    left: 5px;
}
}

    Best regards,
    Ismael

    October 19, 2016 at 1:21 pm #701257
    tremblayly

    HI Ismael,

    I added the CSS code you provided, put the span.menu-break position back to “relative” instead of “inherit”, but the spacing remains an issue. I’ve put back the span.menu break position to relative for now.

    Thanks
    Lyse

    October 19, 2016 at 1:28 pm #701263
    tremblayly

    Hi Ismael,

    Your code did fix the responsive issue with the 2-lines menus.

    So, I’m left with the 2-lines main menu issue when in responsive mode.

    Thanks
    Lyse

    October 20, 2016 at 8:20 am #701715
    Ismael

    Hi!

    So, I’m left with the 2-lines main menu issue when in responsive mode.

    Could you please provide a screenshot of the issue? The code should fix the issue within the advance mobile menu.

    Best regards,
    Ismael

    October 20, 2016 at 3:39 pm #701928
    tremblayly

    Hi Ismael,

    I’m sorry for the confusion I’ve caused. The issue is not on the mobile (hamburger) menu, it’s on the desktop main menu when my screen gets to be about 17″.

    Here’s a screenshot of my desktop main menu problem when I use the following recommended CSS code for a two-line menu:
    span.menu-break {
    display: block;
    line-height: 0;
    bottom: 10px;
    position: inherit;
    }
    RESULT: https://www.dropbox.com/s/430gkmncbpiep3v/span%20menu%20break%20INHERIT.jpg?dl=0

    Here’s a screenshot of my desktop main menu problem when I make the position relative:
    span.menu-break {
    display: block;
    line-height: 0;
    bottom: 10px;
    position: relative;
    }
    RESULT: https://www.dropbox.com/s/9zn7c6t99uljqkm/span%20menu%20break%20RELATIVE.jpg?dl=0

    Thanks
    Lyse

    October 22, 2016 at 12:58 am #702705
    Ismael

    Hi,

    You can only reproduce the issue when you resize the browser to a certain width, correct? What is the screen resolution of your monitor? Please try to decrease the padding of the menu items on smaller screens.

    @media only screen and (max-width: 1200px) {
    .av-main-nav > li > a {
       padding: 0  10px;
    }
}

    Best regards,
    Ismael

    October 23, 2016 at 9:27 pm #703068
    tremblayly

    Hi Ismael,

    Yes, it only happens when I resize the browser to a certain width. It seems to happen when I get to 15″.

    The code you provided does not change anything.

    Thanks
    Lyse

    October 26, 2016 at 8:24 am #704160
    Ismael

    Hi,

    Did you remove the browser cache or hard refresh the page? Please adjust the padding value if necessary.

    @media only screen and (max-width: 1200px) {
    .av-main-nav > li > a {
       padding: 0  8px !important;
    }
}

    Best regards,
    Ismael

    October 26, 2016 at 2:24 pm #704307
    tremblayly

    Hi Ismael,

    I’ve cleared cache, turned off my PC and still the problem remains. Changing the padding does not change anything. The only way I can get this to work is to make the span.menu-break position “relative”. Having the position relative, will that break something else? If not I’ll keep it relative since it fixes my issue.

    Lyse

    October 31, 2016 at 5:17 am #705958
    Nikko

    Hi,

    Setting to postion relative rarely causes problems, but if you want to make sure you can test it with other browsers or devices. Just let us know if there are still any issues after setting it to relative position :)

    Best regards,
    Nikko

    October 31, 2016 at 6:46 am #705976
    tremblayly

    Hi Nikko,

    Thank you for the feedback. I will report any issues if I find any.

    Lyse

    November 1, 2016 at 10:28 pm #706873
    Nikko

    Hi Lyse,

    I will keep this thread open if you see any issues related to this topic just post it here :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.