Targeting Hamburger-Icon of OceanWP Elementor-Widget (Custom Header)

Tagged: , ,

Author Posts

goninski February 3, 2019 at 11:59 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Dear MT-Team
In the last hours I tried – without sucess – to target the hamburger Icon of the OceanWP Elementor-NavMenu-Widget for a easy color change. For this Website I have a black and a white header in use for different pages. The color of the Hamburger-Icon on the black header is black as well and I need it in white. (later I hope to be able to change more things). Both Headers are built in Elementor via ‘My Library’ of the OceanWP Theme.

Hope to find help. I can share the login details, if you need.
Thanks in advance.
Best regards
François

goninski February 4, 2019 at 11:47 am

I just wanted to add some more information:
I also tried to add the page-id of the customer header to the selector, but nothing works.
Targetting other things is working fine.
I will share my credentials via the form.
Thanks in advance.
François

Sebastian February 4, 2019 at 7:09 pm

Hey François,

Thanks for sending me access details. If you would like a shortcut for solving this problem, the selector you need to target the 3 lines in the hamburger menu is this:

.hamburger-inner, 
.hamburger-inner::after, 
.hamburger-inner::before

You can manually add selectors to folders by hovering over a folder in the selectors menu and clicking the plus (+) icon that appears. Enter something descriptive in the label field e.g. “Hamburger menu lines”. Enter the selector above int the code field.

But I would also like to explain why styling the menu was a bit trickier than usual. It uses ::before and ::after pseudo elements to create the top and bottom lines. These are elements created with CSS, and are a bit unlike regular HTML elements. Also the interactivity of the menu made it harder to select by clicking. The following video explains things further.

http://somup.com/cqnfDjnFUl

I hope it makes sense. Please let me know if you need help with anything else.

Cheers,
Sebastian

You must login or register to reply to this topic.