Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 7, 2023 at 8:23 pm #1412710
    flylanddesigns

    I recently switched my website to use the Header and navigation on the side of the website. The problem is, on smaller-to-midsize monitors, the full menu is cutoff. So, for example, I have a SHOP menu. When you rollover this option, only half of the Categories are cut off.
    When viewing on a large monitor with a high-resolution, you don’t have this problem.

    Is there anything that can be done about this? Or do I have to switch away from the Side Nav, back to the header on top?

    July 9, 2023 at 1:40 pm #1412850
    Mike

    Hey flylanddesigns,
    Thanks for your patience, I checked your site and it looks like you have changed you menu back to a top menu, but on one of my test sites I added a lot of menu items to the sidebar header and for smaller tablets it seems that the sidebar header is scrollable, please see the link below. Was yours not scrollable?

    Best regards,
    Mike

    July 9, 2023 at 2:36 pm #1412855
    flylanddesigns

    No, you’re misunderstanding.
    I’m talking about the SUBmenu items getting cut off.
    So, for example, when you Rollover the SHOP section, there are (guessing) 10 choices that pop up.
    These get cut off if the browser is mid-to-small size/resolution.
    I turned the side menu back on temporarily – will leave it on for the next few hours.

    July 9, 2023 at 3:43 pm #1412859
    Mike

    Hi,
    I see, thank you for explaing further, for this we can add custom css to move the sub-menu up, for example:

    .html_header_left .av-main-nav #menu-item-71722 ul,
.html_header_left .av-main-nav #menu-item-71752 ul {
    top: -400px;
}

    this moves the “ARTWORK LICENSING” & “SHOP” sub-menus up to mid page, see the screenshot below.
    We can add media queries to this so it only occurs at certain screen sizes, I assume between 768px – 1440px is when you would like this?

    Best regards,
    Mike

    July 9, 2023 at 3:56 pm #1412861
    flylanddesigns

    Thanks, but that didn’t do anything. I added it to the Custom CSS, and refreshed my cache. Didn’t change the position of the menu, and didn’t keep it from getting cut off.

    July 9, 2023 at 5:02 pm #1412876
    Mike

    Hi,
    That’s odd, try this at the top of your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .html_header_left #top .av-main-nav #menu-item-71722 ul,
.html_header_left #top .av-main-nav #menu-item-71752 ul {
    top: -400px;
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    Or try it in your WordPress ▸ Customize ▸ Additional CSS

    Best regards,
    Mike

    July 9, 2023 at 5:35 pm #1412886
    flylanddesigns

    Thanks … it didn’t work in the Enfold Quick CSS. But it DID work in the Additional CSS prompt.
    However, now the Logo and Cart area overlaps the pop-out.
    It looks like I just might not be able to use the Side Navigation, and will need to switch back to top Navigation.

    July 9, 2023 at 6:58 pm #1412890
    Mike

    Hi,
    Your your situation it probably would be best, sorry we were not more help.

    Best regards,
    Mike

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