Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1120968
    #1121088

    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

    #1121201

    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 4 months, 2 weeks ago by  welswebmaster.
    #1121406

    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

    #1121576

    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

    #1121791

    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

    #1121900

    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

    #1121927

    Hi,

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

    Have a nice day!

    Best regards,
    Ismael

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Enfold media breakpoints where menu and logo overlap’ is closed to new replies.