Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 19, 2017 at 2:57 pm #796599
    1lizcollins

    Hello,

    I’ve just noticed that my main menu gets really crowded/overlaps on laptop screens. I added vertical dividers to help, but they are also overlapping right around 1200px screen width. Can you help?

    May 19, 2017 at 4:39 pm #796650
    Nikko

    Hey 1lizcollins,

    Try to go Enfold > Header > Mobile Menu (tab) and set Header Mobile Menu activation to Activate for Smartphones and Tablets (browser width below 990px). Hope this helps :)

    Best regards,
    Nikko

    May 19, 2017 at 4:53 pm #796665
    1lizcollins

    Thanks Nikko, but I’ve already done that. It’s the gap between 1220px and 990 that seems to be a problem. How can I force more space between the menu items in that screen size range?

    May 20, 2017 at 6:19 am #796919
    Rikard

    Hi,

    You have this in your CSS already:

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

    Try changing it to this instead:

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

    Best regards,
    Rikard

    May 22, 2017 at 4:52 pm #797769
    1lizcollins

    Ah! Somehow I missed that I had this code in there. Yes, that did it. Thank you! You can mark this as solved.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Main menu gets crowded on mid-size screens’ is closed to new replies.