Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 28, 2024 at 4:02 pm #1446850
    craig374

    When checking the current set up of my site on a tablet in landscape orientation, I have noticed that the main navigation menu links are overlapping with the logo, which is on the left side. Is there a way to reduce the space between the main navigation headers so that they are closer together?

    May 29, 2024 at 5:25 am #1446912
    Ismael

    Hey craig374,

    Thank you for the inquiry.

    Have you tried adjusting the Enfold > Main Menu > Menu Items For Mobile settings to the second option (Activate for Smartphones and Tablets)?

    If you want to adjust the font size and space between the menu items on tablet view, add this css code:

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  #top #header .av-main-nav>li>a {
    font-size: 12px;
    padding: 0 4px;
  }
}

    Best regards,
    Ismael

    May 30, 2024 at 7:58 pm #1447111
    craig374

    Thank you for the response. I did previously activate the mobile menu for smart phones and tablets. It is simply that in landscape orientation, the width of the browser is long enough for the site to kick into desktop mode, which is fine.

    Thank you also for the code. I have made note of it. For now, I was able to resolve the issue by making one of the menu titles shorter. There is no more over lap.

    May 31, 2024 at 4:49 am #1447141
    Ismael

    Hi,

    Great! Glad to know that you managed to solve the issue. Let us know if you have more questions.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Adjust Space Between Main Menu Navigation Links in Header’ is closed to new replies.