-
-
Hi,
I’m looking to replicate the menu you use in your One Page demo https://codeless.co/specular/onepage/
I’ve tried all the default options, but none have the side brackets on hover as per the demo. Which option was used?
I’ve also created a One Page menu but the colour does not change to the appropriate section when in that section. Is there a trick to that?
See https://manukalife.mystagingwebsite.com/ for my menu reference.
Thanks!
-
Hello,
The menu with brackets is an old version of one page. We have removed it in quite some updates before. To reproduce it, add this code at the end of your style.css file:
/* Effect 1: Brackets */ .background--dark nav .menu > li > a:hover { color: #0c93d6 !important; } .header_1 nav .menu > li > a::before, .header_1 nav .menu > li > a::after { display: inline-block; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .header_1 nav .menu > li > a::before { margin-right: 10px; content: '['; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); transform: translateX(20px); } .header_1 nav .menu > li > a::after { margin-left: 10px; content: ']'; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); transform: translateX(-20px); } .header_1 nav .menu > li > a:hover::before, .header_1 nav .menu > li > a:hover::after, .header_1 nav .menu > li > a:focus::before, .header_1 nav .menu > li > a:focus::after { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); } .header_1 nav .menu > li:last-child a{padding-right:0; margin-right:0;} .sticky_header .header_wrapper.header_1{ -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.04); -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.04); box-shadow: 0 3px 5px rgba(0,0,0,0.05); } /* End Header 1 */
-Did you set up page as a one page? Please check in page’s General Settings > Page Options & Style > Use menu as one page menu.
I see you do not have a sticky header. If you scroll back to the top, this means that the section you are now is the first section, so the first menu item will be highlighted.Let us know.
Best regards!
-
Great thank you.
One final menu question – I’m having issues hiding the dropdown menu on the menubar. I’d prefer it not to display.
Show Responsive Menu Dropdown is switched to off, yet it still shows. Do i need to deactivate anywhere else?
Thanks,
-
Hello,
The “Show Responsive Menu Dropdown” option is to display menu in mobile. Do you want to remove the drop-down menu items from the normal layout (desktop)? In this case the fastest way is to remove them from menu altogether. Go to Appearance > Menus, and edit your main menu.
I don’t see any sub-menus in your site. Are you perhaps referring to the extra side navigation? See screenshot. In this case go to General Options > Layout > Extra Side Navigation, set it OFF.
Let us know.
Best regards!
-
You’ve perfectly answered all my questions :)
Thank you!
Please close the ticket.
Cheers,
-
You must be logged in to reply to this topic.