primary menu css fix after removing sub-menus...

Hello,

After I made sub menu hidden with the following CSS on the browser size of below 991px, I see a bi-linear at the bottom of last mega-menu-title. How can I remove only the last border-bottom under 'FREE' (please see the attached image).

#primary-menu .mega-menu-title ul {display: none !important;}
#primary-menu .mega-menu-title ul li {display: none !important; }
#primary-menu ul li .mega-menu-column {border: none !important;}

Thank you for your time and support as always.

Hi there,

You can fix this inline by looking for the entry you want to hide the border from and adding "border-top-style: none" to the using the "mega-menu-column" styling.

Like this:
<ul class="mega-menu-column col-md-3" style="border-top-style: none;">

Or you can change the css in the file Dark.css. Change the "border-top-style" to "border-bottom-style". (Should be around line 1714 in Dark.css)

Next you find the line below in the "responsive.css" (probably at line 559) and change the border top to "none". Like this:

/@media all and (max-width:991px)/
#primary-menu ul li .mega-menu-content ul.mega-menu-column {
float: none;
width: auto;
margin: 0;
border-left: 0 !important;
border-top: none;
}

Hope this helps.

Regards,

George

Hello,

I am trying not to use inline css because IT guy kind of set up the rules to avoid inline css if possible.

So would you please look over our file with the following url? I tried your CSS with dark.css and responsive but it didn't work.

https://www.h2owirelessnow.com/responsiveTest/test/index.html

I'm looking forward to your response.

Thank you always.