Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 22, 2019 at 5:53 pm #1120968
    July 23, 2019 at 3:43 am #1121088
    Ismael

    Hey Julie,

    Thank you for using Enfold.

    Try to adjust the font size of the menu items and the padding between them.

    @media only screen and (max-width: 1300px) {
    #top #header .av-main-nav > li > a {
        font-size: 13px;
        padding: 0 10px;
    }
}

    Best regards,
    Ismael

    July 23, 2019 at 1:55 pm #1121201
    welswebmaster

    Hi Ismael,
    That didn’t work. The menu shouldn’t slide behind the logo which makes it look unprofessional. How do we adjust to make them not overlap?

    • This reply was modified 5 years, 5 months ago by welswebmaster.
    July 24, 2019 at 8:01 am #1121406
    Ismael

    Hi,

    Thank you for the update

    Did you toggle the Performance > File Compression settings after adding the code? Did the adjustment take effect? The font size of the menu items should be smaller and the space between them narrower.

    Best regards,
    Ismael

    July 24, 2019 at 3:20 pm #1121576
    welswebmaster

    Hi,
    Thanks for your response.
    Yes, I did toggle and view in both CSS file merging and compression states (enabled and disabled; now enabled) even refreshing server cache. I adjusted font size down to 10px for the main menu and padding to 7px between each item. Still… it overlaps with the logo (WELS lettering) now at the E instead of the W. I’d like no overlap with the logo. What adjustments can yet be made to accomplish this?

    Kind regards,
    j

    July 25, 2019 at 1:56 am #1121791
    Ismael

    Hi,

    Thank you for the update.

    This css code overrides the font-size property.

    #top #header .av-main-nav > li > a {
    color: #ffffff;
    font-size: 15px;
    font-family: "open sans","HelveticaNeue","Helvetica Neue","Helvetica-Neue",Helvetica,Arial,sans-serif;
}

    The menu font size is still set to 15px. Please remove that code or place the latest code below it. You can also add the !important rule to the latest code so that it takes priority.

    This is how the header should look like after.

    // https://imgur.com/a/x7vCa1a

    Best regards,
    Ismael

    July 25, 2019 at 2:03 pm #1121900
    welswebmaster

    Ismael rocks! That did it. Thank you so much. Still couldn’t find the CSS code override you referenced, so I moved your code to the top and placed the !important as you suggested.

    Kind regards,
    j

    July 25, 2019 at 3:20 pm #1121927
    Ismael

    Hi,

    Great! You’re welcome! Let us know if you need anything else.

    Have a nice day!

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Enfold media breakpoints where menu and logo overlap’ is closed to new replies.