We utilize essential cookies to ensure our website operates effectively and remains secure. Additionally, we'd like to request your permission to use optional cookies. These are intended to enhance your browsing experience by offering personalized content, displaying advertisements that are relevant to you, and helping us to further refine our website.
Choose "Accept all cookies" to agree to the use of both essential and optional cookies. Alternatively, select "Let me see" to customize your preferences.
Privacy Preference Centre
Our website utilizes cookies to enhance your browsing experience and to present you with content tailored to your preferences on this device and browser. Below, you will find detailed information about the function of cookies, enabling you to make informed choices about which cookies you wish to accept. Please note that disabling certain cookies might impact your user experience on our site. It's important to remember that cookie preferences need to be set individually for each device and browser you use. Clearing your browser's cache may also remove your cookie settings. You have the freedom to modify your cookie preferences at any point in the future.
For a comprehensive understanding of our use of cookies, please refer to our complete cookies policy.
These cookies are needed for the website to work and for us to fulfil our contractual obligations. This means they can't be switched off. They enable essential functionality such as security, accessibility and live chat support. They also help us to detect and prevent fraud. You can set your browser to block or alert you about these cookies, but it means some parts of the site won't work.
Performance and Analytics
These cookies allow us to measure and improve the performance of our site. They help us to know how popular pages are, and to see how visitors move around the site. If you don't allow these cookies, we won't know when you've visited our site, and we won't be able to monitor its performance.
Functional
These cookies enable us to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we've added to our pages. If you don't allow these cookies, some or all of these services may not work properly.
Advertising
These cookies collect information about your browsing habits to show you personalised adverts. They may be used to build a profile of your interests and show you relevant adverts on other sites. They don't store directly personal information, but are based on uniquely identifying your browser and internet device. If you don't allow these cookies, the adverts you see will be less relevant.
This effect will add a border to each side of your Mega Menu Item. This can be seen as a hover but can also be made to stay static (visible) solely on the page you are on to highlight where you are.
See the effect in action
How to use the Effect
The below code will apply the hover effect. To make the effect stay static (visible) on the current page you are on then please scroll further to see the additional lines.
Select 'Options' from the top header of BlockLab and then select 'Advanced > Custom CSS'. Copy and paste the below code. Hit save, go to Blocklab and Publish and the effect will be applied.
CSS
#shop [id^=mega-menu-v2] li a:hover span { display: none; } #shop [id^=mega-menu-v2] li a:hover:before { content: "("; } #shop [id^=mega-menu-v2] li a:hover:after { content: ")"; }
(To edit the content either side of the Mega Menu hover, change the Red code)
For keeping the border static (visible) for the current page:
(Replace the Blue code with your own Mega Menu ID - Find it using this tutorial)FIND MEGA MENU ID
(To edit the content either side of the Mega Menu hover, change the Red code)
You need to replicate this code for each menu item you have. This code is for the first menu item. You will need to replicate this for each menu item you have. For each page you will need to increase the Green bit of code by 1. For example, if you have 5 pages on the Mega Menu, it will look like this:
