Tagged: fullwidth menu
-
AuthorPosts
-
October 11, 2016 at 9:34 pm #698077
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
LyseOctober 12, 2016 at 3:21 pm #698337Hey 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,
YigitOctober 12, 2016 at 9:37 pm #698535Hi 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
LyseOctober 17, 2016 at 1:39 pm #699975Hi,
viewing access does not work for me. Please check.
Best regards,
AndyOctober 17, 2016 at 6:49 pm #700183Hi 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
LyseOctober 19, 2016 at 8:20 am #701047Hi,
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,
IsmaelOctober 19, 2016 at 1:21 pm #701257HI 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
LyseOctober 19, 2016 at 1:28 pm #701263Hi 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
LyseOctober 20, 2016 at 8:20 am #701715Hi!
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,
IsmaelOctober 20, 2016 at 3:39 pm #701928Hi 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=0Here’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=0Thanks
LyseOctober 22, 2016 at 12:58 am #702705Hi,
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,
IsmaelOctober 23, 2016 at 9:27 pm #703068Hi 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
LyseOctober 26, 2016 at 8:24 am #704160Hi,
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,
IsmaelOctober 26, 2016 at 2:24 pm #704307Hi 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 #705958Hi,
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,
NikkoOctober 31, 2016 at 6:46 am #705976Hi Nikko,
Thank you for the feedback. I will report any issues if I find any.
Lyse
November 1, 2016 at 10:28 pm #706873Hi Lyse,
I will keep this thread open if you see any issues related to this topic just post it here :)
Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.