Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 4, 2016 at 9:39 pm #695261
    sheefoo

    Hi,
    I have many items in the main menu, and while it looks ok on bigger screens (20+ inch), the menu items spill into a second line and outside of the main menu area, and in this case become semi hidden on the slider area.

    How do I go about resolving this? E.g. We can make the spill over items appear in an expanded menu area on the smaller screens and have all the links centralized etc.

    October 5, 2016 at 6:17 pm #695677
    Yigit

    Hey sheefoo,

    Please refer to this post – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Best regards,
    Yigit

    October 9, 2016 at 12:42 pm #697050
    sheefoo

    Hi Yigit,

    That is not what I am trying to achieve here. I want to keep the menu as it is, except to let the spillover happen on a second row that is visible in the navigation bar and not spill out of it. And to centralize all the links in the menu so that it looks neat.

    Please help me out with this.

    October 10, 2016 at 12:44 pm #697261
    Yigit

    Hi,

    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-width: 1400px) {
.av-main-nav > li > a {
    padding: 0 4px;
}}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

    Best regards,
    Yigit

    October 10, 2016 at 10:21 pm #697561
    sheefoo

    I have added the code but it does not seem to solve my problem. Let me try to show you what is wrong using this screen shot:
    http://imgur.com/a/J8BjR

    The navigation menu is too long hence spills into the 2nd line together with the search link, and that becomes semi hidden in the sliders. I want the links for both lines to centralize, and be in the menu region. How do i achieve that?

    October 11, 2016 at 1:03 pm #697794
    Yigit

    Hi,

    I changed custom CSS code to following one

    @media only screen and (max-width: 1400px) {
.av-main-nav > li > a {
    padding: 0 4px;
}}
@media only screen and (min-width: 1401px) {
.av-main-nav > li > a {
    padding: 0 10px;
}}
#header #header_main_alternate .container {
    padding: 0;
}

    and it does work fine until 1180px. You have so many menu items to display them on one line on smaller screens. I would recommend you to switch it to mobile menu on screens smaller than 1180px – http://kriesi.at/documentation/enfold/switching-to-mobile-menu-on-higher-resolutions/

    Best regards,
    Yigit

    October 31, 2016 at 3:13 am #705932
    sheefoo

    Hi Yigit thank you so much. I understand that it may be impossible to display the menu items on one line. Is there any way to display them on two lines then, As I foresee that the menu might continue expanding as our product range increases…

    November 2, 2016 at 2:55 pm #707126
    Andy

    Hi,

    it should be displayed automatically in two lines, if there are too many menu items.

    Best regards,
    Andy

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