How to remove ugly visual artifacts in the menu

  • Resolved bryanhiggs

    (@bryanhiggs)


    6 years, 5 months ago

    I have been working on a custom header for my website, using theme OceanWP, Elementor, and NavMenu Addon for Elementor. You can see a skeleton version of what I have at https://play.uucm.org/. Unfortunately, when I view this menu in tablet and mobile sizes, I get some ugly visual artifacts to the right of each nested menu:

    1) There is a vertical white line which has been mentioned in other posts in this forum.
    2) I chose a background color for the navbar (not the menu itself) that allows me to clearly see the separate menu items. However, in the tablet and mobile size menu, this background color shows through in a very ugly way.

    Go to my website, and narrow the browser window to tablet and mobile sizes to see the result.

    Please, how do I get rid of these visual artifacts in the tablet and mobile sizes?

    Thanks for any assistance you can render!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter bryanhiggs

    (@bryanhiggs)

    Anyone?

    Help much appreciated!

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Is anyone out there?

    Plugin Support Madalin

    (@madalin_themeisle)

    Hi @bryanhiggs,

    Sorry for my delayed replay. Could you please tell us if you issue still persist after the last update?

    We’re waiting for your reply — Have a great day!

    Thread Starter bryanhiggs

    (@bryanhiggs)

    Yes, it does. (The website I pointed you at has progressed beyond the way it was at the time of my post, as I have work to do on it, and the menu is no longer an example of Navmenu Addon for Elementor). However, I briefly switched back to that menu, and it still shows visual artifacts (I’m using Google Chrome Version 71.0.3578.98 (64 bit) )

    I have uploaded an image of what I see at https://sites.google.com/site/bryanhiggs/random-images .
    I hope you can access it.

    I am using Version 1.1.6 of the plugin, which I believe is currently the latest available. WordPress version 5.0.2, if you need that.

    Thanks for getting back to me!

    Plugin Support Vishakha Patel

    (@vishakha)

    Hello There,

    For the menu in the mobile background, set a border like this – https://prntscr.com/lz91u9 and it should display the border in a mobile device. At the same time, it will be available in desktop too. You can reduce the color opacity with this slider – https://prntscr.com/lz923m for a better look.

    To remove the right verticle line, you can add the following code to Additional CSS:

    .eldropdown-toggle:after {
    border-left-width: 0px !important;
}

    Hope it give a better look for mobile devices.

    Had the same problem and the solution worked for me. Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove ugly visual artifacts in the menu’ is closed to new replies.